/** * Shop & Extras — design reference module (scoped). * Source: mayerpix-shop-extras-v2-2.html */ .mpx-shop-extras-root { --gold:#C9A96E; --gold-l:#E2C99A; --gold-d:#A07840; --gold-rgb:201,169,110; --text-rgb:240,237,232; --black-rgb:10,10,10; --hl-rgb:255,255,255; --black:#0A0A0A; --surface:#161616; --surface2:#1C1A17; --surface3:#242220; --border:rgba(var(--gold-rgb),.14); --border-s:rgba(var(--gold-rgb),.32); --text:#F0EDE8; --tm:rgba(var(--text-rgb),.55); --td:rgba(var(--text-rgb),.28); --green:#7DBE8A; --green-bg:rgba(125,190,138,.08); --green-b:rgba(125,190,138,.26); --amber:#E8A84A; --amber-bg:rgba(232,168,74,.08); --amber-b:rgba(232,168,74,.26); --red:#DC5050; --red-bg:rgba(220,80,80,.07); --red-b:rgba(220,80,80,.26); --blue:#8AAAE8; --blue-bg:rgba(138,170,232,.08); --blue-b:rgba(138,170,232,.24); --purple:#A88AE8; --purple-bg:rgba(168,138,232,.08); --purple-b:rgba(168,138,232,.22); --retouch-ui-scale:1.12; font-size:13px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; background:var(--black); color:var(--text); font-family:'Montserrat',sans-serif; font-weight:400; min-height:100vh; overflow-x:hidden; } .mpx-shop-extras-root *, .mpx-shop-extras-root *::before, .mpx-shop-extras-root *::after { box-sizing:border-box; margin:0; padding:0; } /* ═══ LAYOUT (outer column unscaled; scale matches Retouch .portal-wrap) ═════ */ .mpx-shop-extras-root .wrap{ max-width:1100px; margin:0 auto; padding:0 24px; } .mpx-shop-extras-root .mpx-shop-extras-scale-wrap{ width:calc(100% + 48px); margin:0 -24px; box-sizing:border-box; padding:0 24px 120px; zoom:var(--retouch-ui-scale); } @supports not (zoom:1){ .mpx-shop-extras-root .mpx-shop-extras-scale-wrap{ transform:scale(var(--retouch-ui-scale)); transform-origin:top center; width:calc(100% / var(--retouch-ui-scale)); margin-left:calc((100% - (100% / var(--retouch-ui-scale))) / 2); } } .mpx-shop-extras-root #v-tiles > .wrap > .mpx-shop-extras-scale-wrap{padding-top:24px} .mpx-shop-extras-root .mpx-shop-extras-wrap-content{padding-top:24px} @media(max-width:768px){ .mpx-shop-extras-root #v-tiles > .wrap > .mpx-shop-extras-scale-wrap, .mpx-shop-extras-root .mpx-shop-extras-wrap-content{padding-top:20px} } /* ═══ TOPBAR (parity with Retouch .topbar) ══════════ */ .mpx-shop-extras-root .topbar{ position:sticky;top:0;z-index:300; background:rgba(var(--black-rgb),.96);border-bottom:1px solid var(--border); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);height:52px; display:flex;align-items:center;padding:0 24px;gap:16px; margin:0 -24px 0;width:calc(100% + 48px); } .mpx-shop-extras-root .tb-back {background:transparent;border:none;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--td);cursor:pointer;transition:color .2s;padding:0;display:flex;align-items:center;gap:5px} .mpx-shop-extras-root .tb-back::before {content:'←'} .mpx-shop-extras-root .tb-back:hover {color:var(--tm)} .mpx-shop-extras-root .tb-div {width:1px;height:20px;background:var(--border);flex-shrink:0} .mpx-shop-extras-root .tb-info {flex:1;min-width:0} .mpx-shop-extras-root .tb-name {font-size:12px;font-weight:500;color:var(--tm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mpx-shop-extras-root .tb-sub {font-size:10px;color:var(--td);margin-top:1px} /* Owner 2026-10-01: one "Back to Client Portal" button style across portal modules (as Session Prep); no repeated "Shop & Extras · session · date" line next to it; the status pill stays on the right. */ .mpx-shop-extras-root .topbar{position:static;background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;height:auto;padding:28px 0 0;margin:0 0 6px;width:auto;justify-content:space-between;flex-wrap:wrap;gap:12px} .mpx-shop-extras-root .tb-div,.mpx-shop-extras-root .tb-info{display:none} /* The static "Extras: None" pill contradicted live unpaid items on the same screen */ .mpx-shop-extras-root .topbar .extras-pill.none{display:none} /* The "— Shop & Extras" eyebrow repeated the title (owner 2026-10-01) */ .mpx-shop-extras-root .eyebrow[data-i18n="sh_page_title"]{display:none} /* The session strip (type · date · location) repeated what the client already knows (owner 2026-10-01) */ .mpx-shop-extras-root .session-strip{display:none!important} .mpx-shop-extras-root .tb-back{display:inline-flex;align-items:center;gap:0;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:rgba(var(--gold-rgb),.08);border:1px solid var(--border);border-radius:2px;padding:10px 20px;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s} .mpx-shop-extras-root .tb-back::before{content:none} .mpx-shop-extras-root .tb-back:hover{color:var(--gold-l);background:rgba(var(--gold-rgb),.14);border-color:var(--gold)} /* Extras status pill in topbar */ .mpx-shop-extras-root .extras-pill{display:flex;align-items:center;gap:8px;padding:5px 12px;flex-shrink:0;border:1px solid var(--border)} .mpx-shop-extras-root .extras-pill.due {background:var(--amber-bg);border-color:var(--amber-b)} .mpx-shop-extras-root .extras-pill.paid {background:var(--green-bg);border-color:var(--green-b)} .mpx-shop-extras-root .extras-pill.none {background:transparent} .mpx-shop-extras-root .ep-label {font-size:9.5px;letter-spacing:.12em;text-transform:uppercase} .mpx-shop-extras-root .extras-pill.due .ep-label {color:var(--amber)} .mpx-shop-extras-root .extras-pill.paid .ep-label {color:var(--green)} .mpx-shop-extras-root .extras-pill.none .ep-label {color:var(--td)} .mpx-shop-extras-root .ep-val {font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1} .mpx-shop-extras-root .extras-pill.due .ep-val {color:var(--amber);font-weight:600} .mpx-shop-extras-root .extras-pill.paid .ep-val {color:var(--green)} .mpx-shop-extras-root .extras-pill.none .ep-val {color:var(--td)} /* ═══ TYPOGRAPHY ══════════════════════════════════ */ .mpx-shop-extras-root .eyebrow{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px} .mpx-shop-extras-root .eyebrow::before {content:'';width:18px;height:1px;background:var(--gold);opacity:.5} .mpx-shop-extras-root h1.serif {font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:300;line-height:1.15;margin-bottom:10px} .mpx-shop-extras-root h1.serif em {font-style:italic;color:var(--gold-l)} .mpx-shop-extras-root .page-sub {font-size:12px;color:var(--tm);line-height:1.85;max-width:480px} .mpx-shop-extras-root .sec-title {font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--td);margin:24px 0 12px;display:flex;align-items:center;gap:8px} .mpx-shop-extras-root .sec-title::after {content:'';flex:1;height:1px;background:rgba(var(--gold-rgb),.08)} /* ═══ SESSION CONTEXT STRIP ══════════════════════ */ .mpx-shop-extras-root .session-strip{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--border);padding:12px 18px;margin-bottom:24px;position:relative;overflow:hidden} .mpx-shop-extras-root .session-strip::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.22),transparent)} .mpx-shop-extras-root .ss-ico {font-size:16px;flex-shrink:0} .mpx-shop-extras-root .ss-text {flex:1;min-width:0} .mpx-shop-extras-root .ss-name {font-size:12px;font-weight:500;color:var(--tm);margin-bottom:2px} .mpx-shop-extras-root .ss-meta {font-size:10px;color:var(--td);display:flex;gap:10px;flex-wrap:wrap} .mpx-shop-extras-root .ss-badge {font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;background:rgba(var(--gold-rgb),.07);color:var(--gold);border:1px solid rgba(var(--gold-rgb),.18);flex-shrink:0} /* ═══ BADGES ══════════════════════════════════════ */ .mpx-shop-extras-root .badge{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .mpx-shop-extras-root .bd {width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0} .mpx-shop-extras-root .b-green {background:var(--green-bg);color:var(--green);border:1px solid var(--green-b)} .mpx-shop-extras-root .b-gold {background:rgba(var(--gold-rgb),.07);color:var(--gold);border:1px solid rgba(var(--gold-rgb),.2)} .mpx-shop-extras-root .b-amber {background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-b)} .mpx-shop-extras-root .b-blue {background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-b)} .mpx-shop-extras-root .b-muted {background:rgba(var(--text-rgb),.04);color:var(--td);border:1px solid rgba(var(--text-rgb),.08)} .mpx-shop-extras-root .b-red {background:var(--red-bg);color:var(--red);border:1px solid var(--red-b)} .mpx-shop-extras-root .b-purple {background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-b)} /* ═══ NOTICES ══════════════════════════════════════ */ .mpx-shop-extras-root .notice{padding:10px 14px;font-size:11px;line-height:1.65;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px} .mpx-shop-extras-root .n-amber {background:var(--amber-bg);border:1px solid var(--amber-b);color:var(--amber)} .mpx-shop-extras-root .n-info {background:rgba(var(--gold-rgb),.06);border:1px solid var(--border);color:var(--tm)} .mpx-shop-extras-root .n-ok {background:var(--green-bg);border:1px solid var(--green-b);color:var(--green)} .mpx-shop-extras-root .n-err {background:var(--red-bg);border:1px solid var(--red-b);color:var(--red)} .mpx-shop-extras-root .n-purple {background:var(--purple-bg);border:1px solid var(--purple-b);color:var(--purple)} /* ═══ SESSION EXTRA ITEM CARDS ════════════════════ */ /* Three types: .item-client — added by client, removable .item-retouch — from Retouch Selection, read-only .item-staff — Added by MayerPix, invoice-style */ .mpx-shop-extras-root .extra-items{display:flex;flex-direction:column;gap:10px;margin-bottom:0} .mpx-shop-extras-root .extra-item { background:var(--surface);border:1px solid var(--border); padding:18px 20px;position:relative;overflow:hidden; } .mpx-shop-extras-root .extra-item::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.16),transparent)} .mpx-shop-extras-root .extra-item.item-retouch {border-color:rgba(var(--gold-rgb),.22)} .mpx-shop-extras-root .extra-item.item-retouch::before {background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.35),transparent)} .mpx-shop-extras-root .extra-item.item-staff {border-color:rgba(168,138,232,.25)} .mpx-shop-extras-root .extra-item.item-staff::before {background:linear-gradient(90deg,transparent,rgba(168,138,232,.35),transparent)} .mpx-shop-extras-root .extra-item.item-paid {opacity:.7} .mpx-shop-extras-root .extra-item.item-paid .ei-head {padding-right:108px} /* Item header row */ .mpx-shop-extras-root .ei-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px} .mpx-shop-extras-root .ei-ico {width:38px;height:38px;background:rgba(var(--gold-rgb),.07);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .mpx-shop-extras-root .item-staff .ei-ico {background:var(--purple-bg);border-color:var(--purple-b)} .mpx-shop-extras-root .item-retouch .ei-ico {background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.25)} .mpx-shop-extras-root .ei-info {flex:1;min-width:0} .mpx-shop-extras-root .ei-name {font-size:13px;font-weight:500;margin-bottom:3px} .mpx-shop-extras-root .ei-desc {font-size:11px;color:var(--td);line-height:1.6;margin-bottom:6px} .mpx-shop-extras-root .ei-badges {display:flex;flex-wrap:wrap;gap:5px} .mpx-shop-extras-root .ei-price {text-align:right;flex-shrink:0} .mpx-shop-extras-root .ei-unit-price {font-size:10px;color:var(--td);margin-bottom:3px} .mpx-shop-extras-root .ei-total {font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--gold);line-height:1} .mpx-shop-extras-root .item-paid .ei-total {color:var(--green)} .mpx-shop-extras-root .item-staff .ei-total {color:var(--purple)} /* Item footer */ .mpx-shop-extras-root .ei-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid rgba(var(--gold-rgb),.07)} .mpx-shop-extras-root .ei-qty-ro {font-size:11px;color:var(--td);display:flex;align-items:center;gap:6px} .mpx-shop-extras-root .ei-qty-val {font-size:12px;font-weight:500;color:var(--tm)} .mpx-shop-extras-root .ei-source {font-size:10px;color:var(--td);display:flex;align-items:center;gap:5px} .mpx-shop-extras-root .ei-source-dot {width:4px;height:4px;border-radius:50%;background:var(--gold);flex-shrink:0} .mpx-shop-extras-root .item-staff .ei-source-dot {background:var(--purple)} .mpx-shop-extras-root .ei-actions {display:flex;align-items:center;gap:10px} .mpx-shop-extras-root .ei-remove {background:transparent;border:none;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(220,80,80,.5);cursor:pointer;transition:color .18s;padding:0} .mpx-shop-extras-root .ei-remove:hover {color:var(--red)} .mpx-shop-extras-root .ei-link {background:transparent;border:none;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:color .18s;padding:0;text-decoration:underline;text-underline-offset:3px} .mpx-shop-extras-root .ei-link:hover {color:var(--gold-l)} .mpx-shop-extras-root .ei-contact {background:transparent;border:none;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--td);cursor:pointer;transition:color .18s;padding:0} .mpx-shop-extras-root .ei-contact:hover {color:var(--tm)} /* Staff added notice inside item */ .mpx-shop-extras-root .staff-notice{ display:flex;align-items:flex-start;gap:8px; margin-top:10px;padding:8px 10px; background:var(--purple-bg);border:1px solid var(--purple-b); font-size:10px;color:var(--purple);line-height:1.55; } /* Paid stamp */ .mpx-shop-extras-root .paid-stamp{position:absolute;top:12px;right:12px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;background:var(--green-bg);color:var(--green);border:1px solid var(--green-b)} /* ═══ TWO-COLUMN LAYOUT ════════════════════════════ */ .mpx-shop-extras-root .two-col{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start} /* ═══ ORDER SUMMARY ════════════════════════════════ */ .mpx-shop-extras-root .order-summary{background:var(--surface2);border:1px solid var(--border);padding:22px 20px 20px;position:relative;overflow:hidden;position:sticky;top:68px} .mpx-shop-extras-root .order-summary::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.28),transparent)} .mpx-shop-extras-root .os-label {font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:8px} .mpx-shop-extras-root .os-label::after {content:'';flex:1;height:1px;background:rgba(var(--gold-rgb),.1)} .mpx-shop-extras-root .os-rows {display:flex;flex-direction:column;margin-bottom:14px} .mpx-shop-extras-root .os-row {display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:7px 0;border-bottom:1px solid rgba(var(--gold-rgb),.07)} .mpx-shop-extras-root .os-row:last-child {border-bottom:none} .mpx-shop-extras-root .os-k {color:var(--td)} .mpx-shop-extras-root .os-v {color:var(--tm)} .mpx-shop-extras-root .os-divider {height:1px;background:var(--border);margin:8px 0 14px} .mpx-shop-extras-root .os-total-row {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px} .mpx-shop-extras-root .os-total-lbl {font-size:11px;font-weight:500;color:var(--tm);letter-spacing:.08em;text-transform:uppercase} .mpx-shop-extras-root .os-total-amt {font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;color:var(--gold);line-height:1} .mpx-shop-extras-root .os-total-amt.green {color:var(--green)} .mpx-shop-extras-root .pay-btn {width:100%;background:var(--gold);border:none;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:15px;color:var(--black);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px} .mpx-shop-extras-root .pay-btn:hover {background:var(--gold-l)} .mpx-shop-extras-root .pay-btn:disabled {opacity:.35;cursor:not-allowed} .mpx-shop-extras-root .pay-btn.ghost {background:transparent;color:var(--td);border:1px solid rgba(var(--gold-rgb),.2)} .mpx-shop-extras-root .pay-btn.ghost:hover {border-color:rgba(var(--gold-rgb),.4);color:var(--tm)} .mpx-shop-extras-root .pay-btn.green-btn {background:var(--green);color:var(--black)} .mpx-shop-extras-root .pay-btn.green-btn:hover {background:#8ecf9a} .mpx-shop-extras-root .os-note {font-size:10px;color:var(--td);text-align:center;margin-top:10px;line-height:1.6} .mpx-shop-extras-root .os-secure {display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:var(--td);margin-top:8px} /* ═══ CATALOG CARDS ════════════════════════════════ */ .mpx-shop-extras-root .catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .mpx-shop-extras-root .cat-card {background:var(--surface);border:1px solid var(--border);padding:18px 18px 16px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:all .22s} .mpx-shop-extras-root .cat-card::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.12),transparent)} .mpx-shop-extras-root .cat-card.can-add {cursor:pointer} .mpx-shop-extras-root .cat-card.can-add:hover {border-color:var(--border-s);background:rgba(var(--gold-rgb),.04);transform:translateY(-1px)} .mpx-shop-extras-root .cat-card.can-add:hover .cc-cta {gap:7px} .mpx-shop-extras-root .cat-card.request-only {cursor:pointer} .mpx-shop-extras-root .cat-card.request-only:hover {border-color:rgba(168,138,232,.3);background:rgba(168,138,232,.04);transform:translateY(-1px)} .mpx-shop-extras-root .cat-card.request-only:hover .cc-cta {gap:7px} .mpx-shop-extras-root .cat-card.muted {opacity:.44} .mpx-shop-extras-root .cc-ico {font-size:20px;margin-bottom:10px} .mpx-shop-extras-root .cc-name {font-size:13px;font-weight:500;margin-bottom:5px} .mpx-shop-extras-root .cc-desc {font-size:11px;color:var(--td);line-height:1.6;flex:1} .mpx-shop-extras-root .cc-price {font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--gold);margin:8px 0 0} .mpx-shop-extras-root .cat-card.request-only .cc-price {color:var(--tm)} .mpx-shop-extras-root .cc-foot {margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:6px} .mpx-shop-extras-root .cc-cta {font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:4px;transition:gap .2s;white-space:nowrap} .mpx-shop-extras-root .cat-card.can-add .cc-cta {color:var(--gold)} .mpx-shop-extras-root .cat-card.request-only .cc-cta {color:var(--purple)} .mpx-shop-extras-root .cc-cta.off {color:var(--td);pointer-events:none} /* Request type visual indicator */ .mpx-shop-extras-root .cat-card.request-only{border-color:rgba(168,138,232,.16)} .mpx-shop-extras-root .cat-card.request-only::before {background:linear-gradient(90deg,transparent,rgba(168,138,232,.2),transparent)} /* ═══ EMPTY STATE ══════════════════════════════════ */ .mpx-shop-extras-root .empty-state{text-align:center;padding:48px 20px} .mpx-shop-extras-root .es-ico {font-size:36px;margin-bottom:16px;opacity:.3} .mpx-shop-extras-root .es-title {font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--tm);margin-bottom:8px} .mpx-shop-extras-root .es-sub {font-size:12px;color:var(--td);line-height:1.85;margin-bottom:0;max-width:360px;margin-left:auto;margin-right:auto} /* ═══ RECEIPT ══════════════════════════════════════ */ .mpx-shop-extras-root .receipt{background:var(--surface2);border:1px solid var(--border);padding:20px 22px;position:relative;overflow:hidden;margin-bottom:16px} .mpx-shop-extras-root .receipt::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(125,190,138,.3),transparent)} .mpx-shop-extras-root .receipt-head {display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)} .mpx-shop-extras-root .rh-lbl {font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:3px} .mpx-shop-extras-root .rh-sub {font-size:12px;color:var(--tm)} .mpx-shop-extras-root .receipt-rows {display:flex;flex-direction:column} .mpx-shop-extras-root .rr {display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:7px 0;border-bottom:1px solid rgba(var(--gold-rgb),.07)} .mpx-shop-extras-root .rr:last-child {border-bottom:none} .mpx-shop-extras-root .rr-k {color:var(--td)} .mpx-shop-extras-root .rr-v {color:var(--tm)} .mpx-shop-extras-root .rr-v.green {color:var(--green);font-weight:500} .mpx-shop-extras-root .rr-v.gold {color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:17px} /* ═══ PORTAL TILES ══════════════════════════════════ */ .mpx-shop-extras-root .tiles-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px} .mpx-shop-extras-root .tile {background:var(--surface);border:1px solid var(--border);padding:18px 18px 16px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:all .22s} .mpx-shop-extras-root .tile::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.13),transparent)} .mpx-shop-extras-root .tile.active {cursor:pointer} .mpx-shop-extras-root .tile.active:hover {border-color:var(--border-s);background:rgba(var(--gold-rgb),.04);transform:translateY(-1px)} .mpx-shop-extras-root .tile.active:hover .tile-cta {gap:8px} .mpx-shop-extras-root .tile.muted {opacity:.45;pointer-events:none} .mpx-shop-extras-root .tile-ico {font-size:20px;margin-bottom:10px} .mpx-shop-extras-root .tile-name {font-size:13px;font-weight:500;margin-bottom:4px} .mpx-shop-extras-root .tile-desc {font-size:11px;color:var(--td);line-height:1.6;flex:1} .mpx-shop-extras-root .tile-amount {font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--amber);margin-top:4px} .mpx-shop-extras-root .tile-foot {margin-top:12px;display:flex;align-items:center;justify-content:space-between} .mpx-shop-extras-root .td-dot {width:4px;height:4px;border-radius:50%;background:currentColor} .mpx-shop-extras-root .tile-cta {font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);transition:gap .2s;display:flex;align-items:center;gap:4px;white-space:nowrap} .mpx-shop-extras-root .tile-cta.off {color:var(--td);pointer-events:none} /* ═══ ACTION NEEDED ROWS ════════════════════════════ */ .mpx-shop-extras-root .action-row{background:var(--amber-bg);border:1px solid var(--amber-b);padding:14px 18px;margin-bottom:10px;position:relative;overflow:hidden;display:flex;align-items:center;gap:14px} .mpx-shop-extras-root .action-row::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,168,74,.4),transparent)} .mpx-shop-extras-root .ar-ico {font-size:18px;flex-shrink:0} .mpx-shop-extras-root .ar-body {flex:1;min-width:0} .mpx-shop-extras-root .ar-title {font-size:12px;font-weight:500;color:var(--text);margin-bottom:2px} .mpx-shop-extras-root .ar-sub {font-size:11px;color:var(--td)} .mpx-shop-extras-root .ar-cta {background:var(--amber);border:none;padding:9px 16px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--black);cursor:pointer;transition:background .18s;white-space:nowrap;flex-shrink:0} .mpx-shop-extras-root .ar-cta:hover {background:#f0b85a} /* ═══ PROCESSING / FAILED ══════════════════════════ */ .mpx-shop-extras-root .payment-failed{border:1px solid var(--red-b);background:var(--red-bg);padding:16px 18px;position:relative;overflow:hidden;margin-bottom:16px} .mpx-shop-extras-root .payment-failed::before {content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(220,80,80,.35),transparent)} .mpx-shop-extras-root .pf-title {font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:6px;display:flex;align-items:center;gap:7px} .mpx-shop-extras-root .pf-title::after {content:'';flex:1;height:1px;background:rgba(220,80,80,.2)} .mpx-shop-extras-root .pf-text {font-size:12px;color:var(--tm);line-height:1.55} .mpx-shop-extras-root .processing-state {text-align:center;padding:56px 20px} .mpx-shop-extras-root .proc-spinner {width:28px;height:28px;border:2px solid rgba(var(--gold-rgb),.15);border-top-color:var(--gold);border-radius:50%;animation:mpxShopExtrasSpin .7s linear infinite;margin:0 auto 14px} @keyframes mpxShopExtrasSpin{to{transform:rotate(360deg)}} .mpx-shop-extras-root .proc-title {font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--tm);margin-bottom:5px} .mpx-shop-extras-root .proc-sub {font-size:11px;color:var(--td)} /* ═══ PAID CONFIRM ═════════════════════════════════ */ .mpx-shop-extras-root .paid-confirm-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 20px 24px} .mpx-shop-extras-root .paid-check {width:54px;height:54px;background:var(--green-bg);border:1px solid var(--green-b);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px} /* ═══ DEMO NAV ════════════════════════════════════ */ .mpx-shop-extras-root .demo-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(var(--black-rgb),.97);border-top:1px solid var(--border);padding:9px 14px;display:flex;align-items:center;gap:5px;overflow-x:auto;z-index:1000;backdrop-filter:blur(14px)} .mpx-shop-extras-root .demo-nav::-webkit-scrollbar {height:0} .mpx-shop-extras-root .demo-lbl {font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--td);flex-shrink:0;padding-right:8px;border-right:1px solid var(--border);margin-right:2px} .mpx-shop-extras-root .demo-btn {padding:5px 10px;font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--border);background:transparent;color:var(--td);cursor:pointer;font-family:'Montserrat',sans-serif;transition:all .18s;flex-shrink:0} .mpx-shop-extras-root .demo-btn:hover {border-color:var(--border-s);color:var(--tm)} .mpx-shop-extras-root .demo-btn.on {border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.06)} .mpx-shop-extras-root .demo-nav, .mpx-shop-extras-root .mpx-shop-demo-simulate-wrap {display:none!important} .mpx-shop-extras-root[data-mpx-public-dev-tools="1"] .demo-nav {display:flex!important} .mpx-shop-extras-root[data-mpx-public-dev-tools="1"] .mpx-shop-demo-simulate-wrap {display:flex!important} .mpx-shop-extras-root.mpx-shop-api-live .demo-nav, .mpx-shop-extras-root.mpx-shop-api-live .mpx-shop-demo-simulate-wrap {display:none!important} .mpx-shop-extras-root.mpx-shop-api-live #v-empty .mpx-shop-static-catalog {display:none!important} .mpx-shop-extras-root .mpx-shop-paid-api {display:none} .mpx-shop-extras-root.mpx-shop-api-live .mpx-shop-paid-demo {display:none!important} .mpx-shop-extras-root.mpx-shop-api-live .mpx-shop-paid-api {display:block} .mpx-shop-extras-root.mpx-shop-api-live #v-paid .paid-confirm-head.mpx-shop-paid-api, .mpx-shop-extras-root.mpx-shop-api-live #v-paid .session-strip.mpx-shop-paid-api {display:flex} .mpx-shop-extras-root.mpx-shop-api-live #v-paid .paid-confirm-head.mpx-shop-paid-api {flex-direction:column;align-items:center;text-align:center} .mpx-shop-extras-root .mpx-shop-paid-catalog-section {margin-top:8px;margin-bottom:24px;padding-top:20px;border-top:1px solid var(--border)} .mpx-shop-extras-root .mpx-shop-paid-catalog-note {font-size:12px;color:var(--tm);line-height:1.75;margin:0 0 18px;max-width:520px} .mpx-shop-extras-root .mpx-shop-paid-catalog-empty {font-size:12px;color:var(--tm);line-height:1.75;margin:0 0 12px} .mpx-shop-extras-root .mpx-shop-paid-catalog-category {margin-bottom:22px} .mpx-shop-extras-root .mpx-shop-paid-catalog-category .sec-title {margin-bottom:12px} .mpx-shop-extras-root .cat-card.mpx-shop-catalog-readonly {cursor:default;pointer-events:none} .mpx-shop-extras-root .cat-card.mpx-shop-catalog-readonly:hover {border-color:var(--border);background:var(--surface);transform:none} .mpx-shop-extras-root .cat-card.mpx-shop-catalog-readonly:hover .cc-cta {gap:5px} .mpx-shop-extras-root .cat-card.mpx-shop-catalog-actionable {cursor:pointer;pointer-events:auto} .mpx-shop-extras-root .cat-card.mpx-shop-catalog-actionable:hover {border-color:var(--border-s);background:rgba(var(--gold-rgb),.04);transform:translateY(-1px)} .mpx-shop-extras-root .cc-cta.mpx-shop-catalog-cta-static {cursor:default;pointer-events:none;opacity:.92} .mpx-shop-extras-root .mpx-shop-generic-display-note {font-size:12px;color:var(--tm);line-height:1.75;margin:0 0 14px;max-width:520px} .mpx-shop-extras-root .mpx-shop-generic-display-item {border-color:var(--border);cursor:default;pointer-events:none} .mpx-shop-extras-root .mpx-shop-generic-display-item .ei-total {color:var(--tm)} .mpx-shop-extras-root .mpx-shop-retouch-hub-note {font-size:12px;color:var(--tm);line-height:1.75;margin:0 0 14px;max-width:520px} .mpx-shop-extras-root .mpx-shop-retouch-hub-item {border-color:var(--border-s);cursor:default;pointer-events:auto} .mpx-shop-extras-root .mpx-shop-retouch-hub-cta {margin-top:10px} .mpx-shop-extras-root .mpx-shop-retouch-hub-cta .pay-btn {width:100%;margin-top:0} .mpx-shop-extras-root .mpx-shop-generic-payable-note {font-size:12px;color:var(--tm);line-height:1.75;margin:0 0 14px;max-width:520px} .mpx-shop-extras-root .mpx-shop-generic-payable-item {border-color:var(--border-s);cursor:pointer;pointer-events:auto;transition:border-color .15s,background .15s} .mpx-shop-extras-root .mpx-shop-generic-payable-item:hover {border-color:var(--gold-d);background:rgba(var(--gold-rgb),.04)} .mpx-shop-extras-root .mpx-shop-generic-payable-item .ei-total {color:var(--gold-l)} /* 2026-09-30: the item's Pay button is a normal-size button on the right, not a full-width bar. */ .mpx-shop-extras-root .mpx-shop-generic-payable-cta {margin-top:14px;display:flex;justify-content:flex-end} .mpx-shop-extras-root .mpx-shop-generic-payable-cta .pay-btn {width:auto;min-width:220px;margin-top:0;padding:13px 28px} @media(max-width:460px){.mpx-shop-extras-root .mpx-shop-generic-payable-cta .pay-btn {width:100%;min-width:0}} .mpx-shop-extras-root .mpx-shop-approval-terms {font-size:12px;color:var(--tm);line-height:1.7;margin:6px 0 0} .mpx-shop-extras-root #mpx-shop-generic-pay-btn.mpx-shop-pay-slot-disabled {opacity:.45;cursor:not-allowed} .mpx-shop-extras-root #mpx-shop-api-os-note-generic.mpx-shop-pay-status-error {color:var(--red);background:var(--red-bg);border:1px solid var(--red-b);border-radius:4px;padding:8px 10px;margin-top:8px} .mpx-shop-extras-root #v-empty.mpx-shop-has-generic-payable .empty-state {display:none} .mpx-shop-extras-root .mpx-shop-extras-wrap-content.mpx-shop-hub-active .empty-state {display:none} .mpx-shop-extras-root .mpx-shop-hub-receipt-note {font-size:12px;color:var(--tm);line-height:1.75;margin:-4px 0 14px;max-width:520px} .mpx-shop-extras-root .mpx-shop-hub-paid-section .extra-item.item-paid {opacity:1} .mpx-shop-extras-root .mpx-shop-hub-catalog-section {margin-top:4px;padding-top:20px;border-top:1px solid var(--border)} .mpx-shop-extras-root .mpx-shop-nav-cta {font-size:10px;letter-spacing:.16em} .mpx-shop-extras-root #mpx-shop-pay-btn.mpx-shop-pay-slot-disabled {opacity:.45;cursor:not-allowed} .mpx-shop-extras-root .mpx-shop-stripe-mounts {margin-top:14px} .mpx-shop-extras-root .mpx-shop-stripe-mount {min-height:8px;margin-bottom:10px} /* 2026-09-30: payment views like the booking page — a card-width payment column, divider between wallet buttons and the card form. */ .mpx-shop-extras-root .mpx-shop-stripe-divider {display:flex;align-items:center;gap:10px;margin:4px 0 12px} .mpx-shop-extras-root .mpx-shop-stripe-divider::before,.mpx-shop-extras-root .mpx-shop-stripe-divider::after {content:'';flex:1;height:1px;background:rgba(var(--gold-rgb),.14)} .mpx-shop-extras-root .mpx-shop-stripe-divider span {font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--td);white-space:nowrap} @media(min-width:769px){ .mpx-shop-extras-root #v-pay-retouch .two-col,.mpx-shop-extras-root #v-pay-generic .two-col {grid-template-columns:minmax(0,1fr) 380px} } .mpx-shop-extras-root .mpx-shop-stripe-hint {font-size:11px;color:var(--td);line-height:1.5;margin:8px 0 0} .mpx-shop-extras-root .mpx-shop-stripe-form-err {font-size:11px;color:var(--red);line-height:1.5;margin:8px 0 0;padding:8px 10px;background:var(--red-bg);border:1px solid var(--red-b);border-radius:4px} .mpx-shop-extras-root #mpx-shop-api-os-note.mpx-shop-pay-status-error {color:var(--red);background:var(--red-bg);border:1px solid var(--red-b);border-radius:4px;padding:8px 10px;margin-top:8px} /* ═══ RESPONSIVE ══════════════════════════════════ */ @media(max-width:700px) { .mpx-shop-extras-root .two-col{grid-template-columns:1fr} .mpx-shop-extras-root .order-summary{position:static} .mpx-shop-extras-root .catalog-grid{grid-template-columns:1fr 1fr} .mpx-shop-extras-root .tiles-row{grid-template-columns:1fr 1fr} .mpx-shop-extras-root h1.serif{font-size:27px} .mpx-shop-extras-root .extras-pill .ep-label{display:none} } @media(max-width:768px){ .mpx-shop-extras-root .wrap{padding:0 16px} .mpx-shop-extras-root .mpx-shop-extras-scale-wrap{width:calc(100% + 32px);margin:0 -16px;padding:0 16px 120px} .mpx-shop-extras-root .topbar{padding:40px 0 0;margin:0 0 6px;width:auto} } @media(max-width:460px){ .mpx-shop-extras-root .catalog-grid {grid-template-columns:1fr} .mpx-shop-extras-root .tiles-row {grid-template-columns:1fr} .mpx-shop-extras-root .extra-item.item-paid .ei-head {padding-right:92px} } /* Client approval of extras logged by the photographer (Agreement § 22). */ .mpx-shop-extras-root .mpx-shop-approval-block{margin:0 0 24px} .mpx-shop-extras-root .mpx-shop-approval-card{border:1px solid var(--border-s);background:var(--surface2);padding:18px 20px;border-left:3px solid var(--gold)} .mpx-shop-extras-root .mpx-shop-approval-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:500} .mpx-shop-extras-root .mpx-shop-approval-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .mpx-shop-extras-root .mpx-shop-approval-item{font-size:15px;color:var(--text);font-weight:500} .mpx-shop-extras-root .mpx-shop-approval-amount{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);white-space:nowrap} .mpx-shop-extras-root .mpx-shop-approval-body, .mpx-shop-extras-root .mpx-shop-approval-exp, .mpx-shop-extras-root .mpx-shop-approval-queued{font-size:12px;color:var(--tm);line-height:1.7;margin-top:8px} .mpx-shop-extras-root .mpx-shop-approval-confirm{font-size:13px;color:var(--text);margin-top:12px} .mpx-shop-extras-root .mpx-shop-approval-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .mpx-shop-extras-root .mpx-shop-approval-actions .pay-btn{width:auto;min-width:140px;margin:0} .mpx-shop-extras-root .mpx-shop-approval-flash{font-size:13px;line-height:1.6;padding:12px 14px;margin-bottom:12px;border:1px solid var(--border)} .mpx-shop-extras-root .mpx-shop-approval-flash.ok{color:var(--green);border-color:var(--green-b);background:var(--green-bg)} .mpx-shop-extras-root .mpx-shop-approval-flash.warn{color:var(--amber);border-color:var(--amber-b);background:var(--amber-bg)} .mpx-shop-extras-root .mpx-shop-approval-flash.muted{color:var(--tm)} .mpx-shop-extras-root .mpx-shop-approval-history{margin-top:18px} .mpx-shop-extras-root .mpx-shop-approval-hrow{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:8px 0;border-bottom:1px solid var(--border);color:var(--tm)} .mpx-shop-extras-root .mpx-shop-approval-hstate{white-space:nowrap} /* ═══════════════════════════════════════════════════════════════ LIGHT THEME (Novo switcher → body.site-light) — cream / deep-gold. Dark stays default & byte-identical; here we only flip tokens + deepen accents so they read on cream (same recipe as the client portal). Semantic -bg tints stay (pale, fine on cream). ═══════════════════════════════════════════════════════════════ */ body.site-light .mpx-shop-extras-root{ --gold:#8C6026; --gold-l:#A9803E; --gold-d:#6E4A1C; --gold-rgb:140,96,38; --black:#F4EFE6; --black-rgb:244,239,230; --surface:#FBF7F0; --surface2:#F3EDE2; --surface3:#EBE3D5; --border:rgba(140,96,38,.22); --border-s:rgba(140,96,38,.42); --text:#221F1A; --text-rgb:34,31,26; --tm:rgba(34,31,26,.90); --td:rgba(34,31,26,.78); --hl-rgb:140,96,38; --green:#3E8F52; --green-b:rgba(62,143,82,.34); --green-bg:rgba(62,143,82,.12); --amber:#9C6410; --amber-b:rgba(156,100,16,.44); --amber-bg:rgba(156,100,16,.12); --red:#C0392B; --red-b:rgba(192,57,43,.34); --red-bg:rgba(192,57,43,.10); --blue:#3F63B8; --blue-b:rgba(63,99,184,.34); --blue-bg:rgba(63,99,184,.12); --purple:#6E52B8; --purple-b:rgba(110,82,184,.34); --purple-bg:rgba(110,82,184,.12); } /* ═══════════════════════════════════════════════════════════════ SITE HEADER (Novo) — Shop & Extras page (3962) only. Dark overlay at the top → white logo + burger; on scroll (.fixed) reverts to the dark default. Same pattern as the client portal / payment / reschedule. (This file is enqueued only on the Shop & Extras page, so it stays scoped.) ═══════════════════════════════════════════════════════════════ */ body.page-id-3962 .site-header:not(.fixed) .desktop-main-bar-left a, body.page-id-3962 .site-header:not(.fixed) .desktop-main-bar-left a span{color:#fff !important} body.page-id-3962 .site-header:not(.fixed) .butter-button{color:#fff !important} body.page-id-3962 .site-header:not(.fixed) .butter-button > div, body.page-id-3962 .site-header:not(.fixed) .butter-button::before, body.page-id-3962 .site-header:not(.fixed) .butter-button::after{box-shadow:0 0 0 3px inset !important}