.backoffice-body { background: #e8eee9; color: #17333a; min-height: 100vh; }
.backoffice-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.backoffice-rail { background: #15373d; color: #eef2e9; display: flex; flex-direction: column; padding: 30px 24px 24px; }
.backoffice-mark { color: inherit; display: grid; gap: 5px; text-decoration: none; }
.backoffice-mark span { font: 600 1.45rem/1 Georgia, serif; letter-spacing: -.08em; }
.backoffice-mark small { color: #a5c1b0; font: .58rem 'IBM Plex Mono', monospace; letter-spacing: .18em; }
.rail-shop { border-bottom: 1px solid rgba(238,242,233,.18); border-top: 1px solid rgba(238,242,233,.18); display: grid; gap: 6px; margin: 54px 0 24px; padding: 18px 0; }
.rail-shop .eyebrow { color: #a5c1b0; margin: 0 0 3px; }
.rail-shop strong { font: 1.55rem/1.05 Georgia, serif; }
.rail-shop span:last-child { color: #b5c7c0; font: .68rem 'IBM Plex Mono', monospace; }
.rail-nav { display: grid; gap: 5px; }
.rail-nav a, .rail-logout, .rail-public-link { color: #c7d5ce; font: .7rem 'IBM Plex Mono', monospace; text-decoration: none; }
.rail-nav a { border-left: 2px solid transparent; padding: 12px 12px; }
.rail-nav a:hover, .rail-nav a.is-current { background: rgba(238,242,233,.08); border-left-color: #e6aa7e; color: #fff; }
.rail-public-link { border-top: 1px solid rgba(238,242,233,.18); margin-top: auto; padding: 20px 0; }
.rail-logout { background: none; border: 0; cursor: pointer; padding: 0; text-align: left; }
.backoffice-main { max-width: 1200px; padding: 54px clamp(24px, 5vw, 72px) 80px; width: 100%; }
.backoffice-mobilebar { display: none; }
.bo-kicker { color: #b05f3f; font: .68rem 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.bo-heading { align-items: end; display: flex; gap: 28px; justify-content: space-between; margin-bottom: 42px; }
.bo-heading h1 { color: #15373d; font: 500 clamp(2.7rem, 6vw, 5.8rem)/.88 Georgia, serif; letter-spacing: -.055em; margin: 9px 0 14px; max-width: 720px; }
.bo-heading p { color: #5a6d6f; line-height: 1.6; margin: 0; max-width: 600px; }
.bo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bo-stat-grid { border-bottom: 1px solid #bdcbc2; border-top: 1px solid #bdcbc2; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 34px; }
.bo-stat { border-right: 1px solid #bdcbc2; padding: 20px 22px; }
.bo-stat:last-child { border-right: 0; }
.bo-stat span { color: #617474; display: block; font: .64rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.bo-stat strong { color: #15373d; display: block; font: 500 2.8rem/1 Georgia, serif; margin-top: 13px; }
.bo-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr); }
.bo-sheet { background: #f7f7f0; border: 1px solid #cbd6ce; padding: 25px; }
.bo-sheet--accent { background: #d8e5d9; border-color: #a9c0ad; }
.bo-sheet__head { align-items: start; border-bottom: 1px solid #ccd7cf; display: flex; justify-content: space-between; margin-bottom: 8px; padding-bottom: 16px; }
.bo-sheet h2 { color: #15373d; font: 500 1.75rem/1 Georgia, serif; margin: 0; }
.bo-sheet h3 { color: #15373d; font: 500 1.25rem/1.1 Georgia, serif; margin: 0 0 6px; }
.bo-sheet p { color: #5a6d6f; line-height: 1.55; }
.bo-link { color: #a64e32; font: .68rem 'IBM Plex Mono', monospace; text-decoration: none; white-space: nowrap; }
.bo-list { display: grid; }
.bo-list-row { align-items: center; border-bottom: 1px solid #dbe2dc; display: flex; gap: 16px; justify-content: space-between; padding: 17px 0; }
.bo-list-row:last-child { border-bottom: 0; }
.bo-list-row > div:first-child { min-width: 0; }
.bo-list-row p, .bo-list-row span { color: #6a797a; display: block; font-size: .84rem; margin: 0; }
.bo-list-row strong { color: #15373d; font: 500 1.1rem Georgia, serif; }
.bo-menu-thumb { border-radius: 2px; float: left; height: 48px; margin: 0 13px 5px 0; object-fit: cover; width: 48px; }
.bo-tag { background: #edf0e8; color: #557062; font: .62rem 'IBM Plex Mono', monospace; padding: 7px 9px; white-space: nowrap; }
.bo-profile { display: grid; gap: 22px; grid-template-columns: 150px 1fr; }
.bo-profile__mark { align-items: center; background: #b9cfbe; display: flex; min-height: 150px; justify-content: center; overflow: hidden; }
.bo-profile__mark img { height: 100%; object-fit: cover; width: 100%; }
.bo-profile__mark span { color: #45665c; font: 5rem Georgia, serif; }
.bo-meta { display: grid; gap: 10px; }
.bo-meta span { color: #5a6d6f; font: .75rem 'IBM Plex Mono', monospace; }
.bo-form { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-form .field--wide { grid-column: 1 / -1; }
.bo-form label { color: #506766; display: grid; font: .68rem 'IBM Plex Mono', monospace; gap: 7px; }
.bo-form input, .bo-form textarea { background: #fbfbf5; border: 1px solid #bdcbc2; border-radius: 0; color: #15373d; font: inherit; padding: 12px; }
.bo-form input:focus, .bo-form textarea:focus { border-color: #a64e32; outline: 2px solid #e9c0a9; }
.bo-button { background: #15373d; border: 0; color: #fff; cursor: pointer; font: .68rem 'IBM Plex Mono', monospace; padding: 13px 17px; }
.bo-button--warm { background: #a64e32; }
.bo-form .bo-button { justify-self: start; }
.bo-note { background: #eef1e7; border-left: 3px solid #a64e32; color: #506766; font-size: .86rem; line-height: 1.55; padding: 13px 15px; }
.bo-redeem { max-width: 680px; }
.bo-redeem-code { letter-spacing: .08em; text-transform: uppercase; }
.bo-note { margin: 0 0 42px; }
.bo-layout-section { margin-top: 52px; }
.bo-layout-section__head { align-items: start; border-bottom: 1px solid #bdcbc2; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 22px; padding-bottom: 16px; }
.bo-layout-section__head h2 { color: #15373d; font: 500 2.1rem/1 Georgia, serif; margin: 7px 0 6px; }
.bo-layout-section__head p { color: #5a6d6f; line-height: 1.5; margin: 0; max-width: 520px; }
.bo-layout-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-slot { background: #fbfbf5; border: 1px solid #cbd6ce; display: flex; flex-direction: column; min-width: 0; }
.bo-slot__head { align-items: start; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 15px 16px 12px; }
.bo-slot__head h3 { color: #15373d; font: 500 1.25rem/1.05 Georgia, serif; margin: 5px 0 0; }
.bo-slot__preview { align-items: center; background: #dde6de; display: flex; justify-content: center; overflow: hidden; position: relative; width: 100%; }
.bo-slot__preview img { display: block; height: 100%; object-fit: cover; width: 100%; }
.bo-slot__empty { color: #74877f; font: .62rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.bo-slot__draft { background: #15373d; color: #f2f5ee; font: .56rem 'IBM Plex Mono', monospace; letter-spacing: .1em; padding: 5px 7px; position: absolute; right: 8px; text-transform: uppercase; top: 8px; }
.bo-slot__tools { align-items: center; display: flex; gap: 4px; }
.bo-slot__tools button { background: none; border: 1px solid #c3d0c7; color: #3f5c55; cursor: pointer; font: .78rem/1 'IBM Plex Mono', monospace; height: 30px; min-width: 30px; padding: 0 7px; }
.bo-slot__tools button:disabled { cursor: not-allowed; opacity: .35; }
.bo-slot__clear { border-color: transparent; color: #a64e32; font-size: .62rem; letter-spacing: .04em; min-height: 30px; padding: 0 4px; text-decoration: underline; }
.bo-slot__form { display: grid; gap: 11px; padding: 15px 16px 18px; }
.bo-slot__form label { color: #506766; display: grid; font: .64rem 'IBM Plex Mono', monospace; gap: 5px; }
.bo-slot__form input[type="text"], .bo-slot__form input[type="file"] { background: #fff; border: 1px solid #bdcbc2; border-radius: 0; color: #15373d; font: inherit; padding: 9px; width: 100%; }
.bo-slot__form input[type="file"] { color: #506766; font: .62rem 'IBM Plex Mono', monospace; padding: 7px; }
.bo-slot__form input:focus-visible { border-color: #a64e32; outline: 2px solid #e9c0a9; }
.bo-slot__actions { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: 2px; }
.bo-slot__active { align-items: center; display: flex !important; gap: 7px !important; }
.bo-slot__active input { accent-color: #a64e32; }
.bo-slot__form .bo-button { padding: 11px 15px; }
.bo-slot__tools button:focus-visible, .bo-slot__clear:focus-visible, .bo-slot__form .bo-button:focus-visible { outline: 3px solid #e3a984; outline-offset: 2px; }
.bo-collab { border-bottom: 1px solid #dbe2dc; display: grid; gap: 16px; grid-template-columns: 120px minmax(0, 1fr) auto; padding: 18px 0; }
.bo-collab:last-child { border-bottom: 0; }
.bo-collab__logo { align-items: center; background: #fff; border: 1px solid #dbe2dc; display: flex; height: 92px; justify-content: center; padding: 10px; }
.bo-collab__logo img { max-height: 68px; max-width: 100%; object-fit: contain; }
.bo-collab__form { display: grid; gap: 10px; }
.bo-collab__fields { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-collab__form label { color: #506766; display: grid; font: .64rem 'IBM Plex Mono', monospace; gap: 5px; }
.bo-collab__form input[type="text"], .bo-collab__form input[type="file"] { background: #fff; border: 1px solid #bdcbc2; border-radius: 0; color: #15373d; font: inherit; padding: 9px; width: 100%; }
.bo-collab__form input[type="file"] { color: #506766; font: .62rem 'IBM Plex Mono', monospace; padding: 7px; }
.bo-collab__form input:focus-visible { border-color: #a64e32; outline: 2px solid #e9c0a9; }
.bo-collab__actions { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.bo-collab .bo-slot__tools { align-self: start; }
@media (max-width: 820px) { .backoffice-shell { display: block; } .backoffice-rail { display: none; } .backoffice-main { padding: 18px 18px 56px; } .backoffice-mobilebar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 42px; } .backoffice-mobilebar a:last-child { color: #a64e32; font: .65rem 'IBM Plex Mono', monospace; } .bo-heading { align-items: start; display: block; } .bo-heading h1 { font-size: clamp(2.7rem, 15vw, 4.6rem); } .bo-actions { margin-top: 22px; } .bo-stat-grid, .bo-grid, .bo-profile, .bo-form, .bo-layout-grid, .bo-collab, .bo-collab__fields { grid-template-columns: 1fr; } .bo-stat { border-bottom: 1px solid #bdcbc2; border-right: 0; } .bo-stat:last-child { border-bottom: 0; } .bo-form .field--wide { grid-column: auto; } }
.shop-site { background: #f4f0e8; color: #17333a; min-height: 100vh; }
.shop-site__nav { align-items: center; border-bottom: 1px solid #d6d8cd; display: flex; justify-content: space-between; padding: 22px clamp(20px, 6vw, 88px); }
.shop-site__brand { color: #17333a; font: .72rem 'IBM Plex Mono', monospace; letter-spacing: .12em; text-decoration: none; }
.shop-site__nav nav { display: flex; gap: 26px; }
.shop-site__nav nav a { color: #587071; font: .68rem 'IBM Plex Mono', monospace; text-decoration: none; }
.shop-site__main { margin: 0 auto; max-width: 1240px; padding: 74px clamp(20px, 6vw, 88px) 110px; }
.shop-kicker { color: #a64e32; font: .64rem 'IBM Plex Mono', monospace; letter-spacing: .15em; text-transform: uppercase; }
.shop-hero { align-items: end; border-bottom: 1px solid #bdc8bd; display: flex; justify-content: space-between; margin-bottom: 42px; padding-bottom: 35px; }
.shop-hero h1 { font: 500 clamp(3.2rem, 8vw, 7.5rem)/.85 Georgia, serif; letter-spacing: -.065em; margin: 12px 0 20px; max-width: 760px; }
.shop-hero p { color: #5b6d6c; line-height: 1.6; max-width: 480px; }
.shop-hero__count { color: #a64e32; font: 500 4rem/.8 Georgia, serif; text-align: right; }
.shop-hero__count small { color: #5b6d6c; display: block; font: .62rem 'IBM Plex Mono', monospace; letter-spacing: .08em; margin-top: 10px; text-transform: uppercase; }
.shop-directory { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
.shop-tile { background: #f9f8f2; border: 1px solid #cbd4c9; color: #17333a; display: grid; grid-template-columns: .85fr 1fr; text-decoration: none; }
.shop-tile__visual { align-items: center; background: #c5d6c6; display: flex; justify-content: center; min-height: 280px; overflow: hidden; }
.shop-tile__visual img { height: 100%; object-fit: cover; width: 100%; }
.shop-tile__visual span { color: #5a7b6a; font: 7rem Georgia, serif; }
.shop-tile__body { display: flex; flex-direction: column; padding: 28px; }
.shop-tile h2 { font: 500 2rem/1 Georgia, serif; margin: 12px 0 10px; }
.shop-tile p { color: #637373; font-size: .88rem; margin: 0; }
.shop-arrow { color: #a64e32; font: .65rem 'IBM Plex Mono', monospace; margin-top: auto; padding-top: 32px; }
.shop-back { color: #a64e32; display: inline-block; font: .67rem 'IBM Plex Mono', monospace; margin-bottom: 54px; text-decoration: none; }
.shop-profile { align-items: center; display: grid; gap: clamp(30px, 7vw, 96px); grid-template-columns: minmax(250px, .7fr) 1fr; }
.shop-profile__visual { align-items: center; aspect-ratio: 1; background: #c5d6c6; display: flex; justify-content: center; overflow: hidden; }
.shop-profile__visual img { height: 100%; object-fit: cover; width: 100%; }
.shop-profile__visual span { color: #5a7b6a; font: 11rem Georgia, serif; }
.shop-profile__copy h1 { font: 500 clamp(3.8rem, 8vw, 8rem)/.82 Georgia, serif; letter-spacing: -.07em; margin: 16px 0 22px; }
.shop-profile__copy > p { color: #5b6d6c; font-size: 1.05rem; line-height: 1.65; max-width: 540px; }
.shop-facts { border-top: 1px solid #bdc8bd; display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 34px; padding-top: 18px; }
.shop-facts span { color: #5b6d6c; font: .72rem 'IBM Plex Mono', monospace; }
.shop-menu-section { margin-top: 92px; }
.shop-section-head { align-items: end; border-bottom: 1px solid #bdc8bd; display: flex; justify-content: space-between; padding-bottom: 17px; }
.shop-section-head h2 { font: 500 2.5rem/1 Georgia, serif; margin: 10px 0 0; }
.shop-menu-count { color: #5b6d6c; font: .68rem 'IBM Plex Mono', monospace; }
.shop-menu-list { display: grid; grid-template-columns: repeat(2, 1fr); }
.shop-menu-item { border-bottom: 1px solid #d0d8ce; display: flex; gap: 20px; justify-content: space-between; padding: 25px 18px 25px 0; }
.shop-menu-item h3 { font: 500 1.35rem/1 Georgia, serif; margin: 0 0 7px; }
.shop-menu-item p { color: #657574; font-size: .88rem; line-height: 1.5; margin: 0; max-width: 370px; }
.shop-menu-item strong { color: #a64e32; font: 500 1.05rem Georgia, serif; white-space: nowrap; }
.shop-empty { color: #657574; padding: 22px 0; }
.shop-banners { display: grid; gap: 18px; margin-top: 46px; }
.shop-banner { display: grid; gap: 9px; margin: 0; }
.shop-banner__link, .shop-gallery__link { display: block; }
.shop-banner__frame { aspect-ratio: 8 / 3; background: #dde6de; overflow: hidden; }
.shop-gallery__frame { aspect-ratio: 1; background: #dde6de; overflow: hidden; }
.shop-banner__frame img, .shop-gallery__frame img { display: block; height: 100%; object-fit: cover; width: 100%; }
.shop-banner__caption, .shop-gallery__caption { align-items: baseline; color: #5b6d6c; display: flex; font: .66rem 'IBM Plex Mono', monospace; gap: 10px; justify-content: space-between; letter-spacing: .04em; margin: 0; }
.shop-media__arrow { color: #a64e32; }
.shop-banner__link:focus-visible, .shop-gallery__link:focus-visible { outline: 3px solid #a64e32; outline-offset: 3px; }
.shop-gallery-section { margin-top: 68px; }
.shop-gallery { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
.shop-gallery__item { display: grid; gap: 8px; margin: 0; min-width: 0; }
.shop-gallery__caption { font-size: .62rem; }
@media (max-width: 760px) { .shop-site__nav { align-items: start; gap: 20px; } .shop-site__nav nav { gap: 12px; text-align: right; } .shop-site__main { padding-top: 48px; } .shop-hero { align-items: start; display: block; } .shop-hero h1 { font-size: clamp(3.3rem, 17vw, 5.2rem); } .shop-hero__count { font-size: 3.2rem; margin-top: 30px; text-align: left; } .shop-directory, .shop-profile, .shop-menu-list { grid-template-columns: 1fr; } .shop-tile { grid-template-columns: 1fr; } .shop-tile__visual { min-height: 190px; } .shop-profile__copy h1 { font-size: clamp(3.8rem, 18vw, 6.2rem); } .shop-menu-item { padding-right: 0; } .shop-banners { margin-top: 34px; } .shop-banner__frame { aspect-ratio: 16 / 9; } .shop-gallery-section { margin-top: 52px; } .shop-gallery { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; } }
.auth-shell { align-items: stretch; display: grid; gap: 0; grid-template-columns: minmax(270px, .75fr) minmax(360px, 1fr); margin: 0 auto; max-width: 980px; min-height: 650px; }
.auth-story { background: #15373d; color: #eef2e9; display: flex; flex-direction: column; padding: clamp(30px, 5vw, 58px); }
.auth-story__mark { font: 600 1.5rem/1 Georgia, serif; letter-spacing: -.08em; }
.auth-story .eyebrow { color: #a5c1b0; margin-top: auto; }
.auth-story h1 { font: 500 clamp(2.8rem, 5vw, 5rem)/.88 Georgia, serif; letter-spacing: -.05em; margin: 12px 0 18px; }
.auth-story p { color: #c4d3ca; line-height: 1.6; margin: 0; max-width: 320px; }
.auth-story__line { border-top: 1px solid rgba(238,242,233,.22); color: #a5c1b0; font: .65rem 'IBM Plex Mono', monospace; letter-spacing: .08em; margin-top: auto; padding-top: 18px; }
.auth-story--register { background: #a64e32; }
.auth-story--register .eyebrow, .auth-story--register .auth-story__line { color: #f6d9c7; }
.auth-story--register p { color: #f8e8dd; }
.auth-card--new { align-self: stretch; background: #fbfbf5; border: 1px solid #cbd4c9; border-left: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; margin: 0; max-width: none; padding: clamp(30px, 6vw, 70px); }
.auth-card__intro h2 { color: #15373d; font: 500 clamp(2.3rem, 4vw, 4rem)/.9 Georgia, serif; letter-spacing: -.05em; margin: 9px 0 15px; }
.auth-card__intro p { color: #657574; line-height: 1.55; margin: 0; max-width: 410px; }
.google-button { align-items: center; background: #fff; border: 1px solid #bdcbc2; color: #17333a; display: flex; font: .7rem 'IBM Plex Mono', monospace; gap: 12px; justify-content: center; margin-top: 27px; min-height: 48px; padding: 12px 16px; text-decoration: none; transition: border-color .18s, background .18s; }
.google-button:hover { background: #f1f5ef; border-color: #758f83; }
.google-button:focus-visible, .auth-card--new a:focus-visible, .auth-card--new button:focus-visible, .auth-card--new input:focus-visible { outline: 3px solid #e3a984; outline-offset: 3px; }
.google-button__icon { align-items: center; border: 1px solid #d6dcd6; border-radius: 50%; color: #4285f4; display: inline-flex; font: 600 1.05rem Arial, sans-serif; height: 23px; justify-content: center; width: 23px; }
.auth-divider { align-items: center; color: #81908b; display: flex; font: .61rem 'IBM Plex Mono', monospace; gap: 12px; margin: 26px 0 0; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { background: #d9e0d9; content: ''; flex: 1; height: 1px; }
.auth-card--new .form-stack { gap: 14px; margin-top: 20px; }
.auth-card--new .form-stack label { color: #506766; }
.auth-card--new .form-stack input { background: #fff; border-color: #bdcbc2; border-radius: 0; min-height: 45px; }
.auth-card--new .form-stack input:focus { border-color: #a64e32; outline: 3px solid #f1d3c1; }
.auth-card--new .button { border-radius: 0; margin-top: 4px; min-height: 48px; }
.field-hint { color: #778682; font: .64rem 'IBM Plex Mono', monospace; margin-top: -2px; }
.auth-card--new .form-foot { margin-bottom: 0; margin-top: 25px; padding-top: 18px; }
@media (max-width: 680px) { .auth-shell { display: block; min-height: auto; } .auth-story { min-height: 310px; } .auth-story .eyebrow { margin-top: 58px; } .auth-card--new { border-left: 1px solid #cbd4c9; padding: 32px 24px 38px; } }