@layer reset, base, components, pages, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, a { touch-action: manipulation; }
  img { max-width: 100%; display: block; }
  button { cursor: pointer; }
}
@layer base {
  :root { --paper:#f8f6f1; --white:#fffefb; --ink:#20332e; --green:#183d35; --green-light:#e6ede4; --muted:#6f7771; --line:#dedfd5; --sand:#ece6d9; --orange:#ba7959; --red:#a54235; --radius:16px; --shadow:0 16px 50px #183d3510; }
  html { scroll-behavior:smooth; scroll-padding-top:100px; }
  body { font-family: 'Inter','Segoe UI',Arial,sans-serif; font-size:15px; line-height:1.6; color:var(--ink); background:var(--paper); }
  a { color:inherit; text-decoration:none; }
  h1, h2, .serif { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.045em; line-height:1.06; }
  h1 { font-size:clamp(42px,5.8vw,78px); }
  h2 { font-size:clamp(32px,4vw,50px); }
  h3 { font-weight:550; font-size:20px; line-height:1.35; letter-spacing:-.02em; }
  p { color:var(--muted); }
  small, .small { font-size:12px; }
  :focus-visible { outline:3px solid #c18e5a; outline-offset:4px; }
  ::selection { background:#d6e4d9; }
  .skip-link { position:fixed; top:-100px; left:20px; background:white; padding:10px 20px; z-index:100; }
  .skip-link:focus { top:10px; }
  [hidden] { display:none !important; }
}
@layer components {
  .wrap { width:min(1220px,calc(100% - 80px)); margin-inline:auto; }
  .narrow { max-width:820px; margin-inline:auto; }
  .demo-bar { background:var(--green); color:#e7eee8; font-size:11px; letter-spacing:.035em; padding:7px 18px; text-align:center; }
  .demo-bar button { color:inherit; background:none; border:0; text-decoration:underline; font-size:11px; margin-left:8px; padding:0; }
  .header { background:#f8f6f1f7; position:sticky; top:0; z-index:30; border-bottom:1px solid #dedfd588; backdrop-filter:blur(14px); }
  .nav { display:flex; min-height:78px; align-items:center; gap:28px; }
  .logo { font-family:Georgia,serif; font-size:30px; letter-spacing:-1.4px; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
  .logo .icon { width:28px; height:28px; stroke-width:1.3; }
  .logo span { display:inline-block; font-family:'Segoe UI',sans-serif; font-size:9px; letter-spacing:2.8px; margin-left:2px; margin-top:7px; text-transform:uppercase; }
  .nav-links { display:flex; gap:28px; margin:auto; align-items:center; font-size:13px; }
  .nav-links a { color:#66716a; padding:25px 0; border-bottom:2px solid transparent; }
  .nav-links a:hover, .nav-links a.active { color:var(--green); border-bottom-color:var(--green); }
  .nav-actions { display:flex; align-items:center; gap:17px; }
  .lang { padding:7px 4px; border:0; background:none; font-size:12px; color:var(--muted); }
  .icon { width:20px; height:20px; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
  .btn { display:inline-flex; gap:10px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; padding:13px 21px; background:var(--green); color:white; font-size:13px; font-weight:550; line-height:1.4; transition:background .2s,transform .2s; text-align:center; }
  .btn:hover { background:#265449; transform:translateY(-1px); }
  .btn.secondary { background:transparent; color:var(--green); border-color:#bec9bd; }
  .btn.secondary:hover { background:var(--green-light); }
  .btn.white { background:var(--white); color:var(--green); }
  .btn.ghost { padding:9px 0; color:var(--ink); background:none; border:0; }
  .btn.danger { background:var(--red); }
  .btn.sm { padding:9px 14px; font-size:12px; }
  .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
  .btn.full { width:100%; }
  .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--ink); }
  .icon-btn.liked { color:#b25849; background:#fcf0e9; border-color:#e9c3b6; }
  .icon-btn.liked svg { fill:#b2584920; }
  .mobile-toggle { display:none; }
  .eyebrow { text-transform:uppercase; letter-spacing:2.3px; font-size:10px; font-weight:650; color:var(--green); margin-bottom:20px; display:block; }
  .eyebrow.light { color:#b7cdbf; }
  .subheading { font-size:16px; line-height:1.8; max-width:560px; margin-top:23px; }
  .actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:30px; }
  .pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--white); padding:5px 11px; font-size:11px; border-radius:100px; white-space:nowrap; }
  .pill.green { color:var(--green); background:#e6eee5; border-color:transparent; }
  .pill.amber { color:#89642e; background:#f4e9d1; border-color:transparent; }
  .pill.red { color:var(--red); background:#fae7e2; border-color:transparent; }
  .section { padding:86px 0; }
  .section-top { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; }
  .section-top p { max-width:400px; font-size:14px; }
  .section-top h2 { max-width:640px; }
  .photo { position:relative; background:#e5dfd4; overflow:hidden; aspect-ratio:1; border-radius:12px; }
  .photo img { width:100%; height:100%; object-fit:cover; transition:transform .45s; }
  .photo.delivered-photo img { object-fit:contain; }
  .photo.delivered-photo:hover img { transform:none; }
  .photo:hover img { transform:scale(1.025); }
  .photo .photo-label { position:absolute; bottom:12px; left:12px; background:#fffffff0; border-radius:5px; padding:4px 9px; font-size:10px; letter-spacing:.03em; color:var(--ink); }
  .photo .sample-mark { position:absolute; top:10px; left:10px; font-size:9px; color:white; background:#183d3560; backdrop-filter:blur(4px); padding:2px 6px; border-radius:4px; }
  .grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
  .card { border:1px solid var(--line); background:var(--white); border-radius:var(--radius); padding:26px; }
  .card p { font-size:13px; margin-top:10px; }
  .muted { color:var(--muted); }
  .inline-note { font-size:12px; color:var(--muted); display:flex; align-items:flex-start; gap:8px; margin-top:16px; line-height:1.6; }
  .inline-note .icon { width:15px; height:15px; margin-top:2px; }
  .notice { padding:14px 18px; border:1px solid #d6dfd1; background:#edf2e9; border-radius:9px; color:#526548; font-size:12px; display:flex; align-items:flex-start; gap:10px; margin-bottom:24px; }
  .notice.warning { border-color:#e9d4ae; background:#fbf3e2; color:#8d6b32; }
  .notice.error { border-color:#e7b9ad; background:#fff1ec; color:var(--red); }
  .notice .icon { width:17px; height:17px; margin-top:1px; }
  .tabs { display:flex; gap:6px; flex-wrap:wrap; }
  .tabs button, .chip { padding:8px 15px; border-radius:100px; border:1px solid var(--line); color:var(--muted); background:transparent; font-size:12px; }
  .tabs button.active, .chip.active { color:white; border-color:var(--green); background:var(--green); }
  .tabs button:hover, .chip:hover { border-color:var(--green); }
  .style-card { border:1px solid transparent; border-radius:14px; padding:8px; text-align:left; background:transparent; position:relative; width:100%; }
  .style-card:hover { border-color:#bec9bd; background:var(--white); }
  .style-card.selected { border:2px solid var(--green); padding:7px; background:var(--white); }
  .style-card h3 { font-size:15px; margin:14px 4px 2px; }
  .style-card p { font-size:11px; margin:0 4px 10px; }
  .style-card .selected-check { position:absolute; right:18px; top:18px; background:var(--green); color:white; border-radius:50%; padding:5px; }
  .style-card .selected-check svg { width:14px; height:14px; }
  .faq { border-top:1px solid var(--line); }
  .faq details { border-bottom:1px solid var(--line); padding:22px 0; }
  summary { cursor:pointer; font-size:14px; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:20px; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:'+'; font-size:20px; color:var(--muted); font-weight:400; line-height:1; }
  details[open] summary::after { content:'−'; }
  details p { font-size:13px; line-height:1.8; margin-top:16px; max-width:700px; }
  .footer { border-top:1px solid var(--line); padding:48px 0 25px; }
  .footer-top { display:flex; gap:50px; justify-content:space-between; }
  .footer-brand { max-width:310px; }
  .footer-brand p { font-size:12px; margin-top:16px; }
  .footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; }
  .footer-links strong { font-size:11px; font-weight:650; display:block; margin-bottom:12px; }
  .footer-links a { display:block; font-size:12px; color:var(--muted); margin:8px 0; }
  .footer-bottom { margin-top:45px; border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; gap:16px; font-size:10px; color:#8c928c; }
  .page-title { padding:54px 0 35px; }
  .page-title h1 { font-size:clamp(40px,4vw,56px); }
  .page-title .eyebrow { margin-bottom:13px; }
  .page-title p { margin-top:15px; max-width:580px; font-size:14px; }
  .page-content { padding-bottom:80px; min-height:50vh; }
  label.field { display:block; font-size:12px; font-weight:600; margin-bottom:19px; }
  .field input, .field select, .field textarea { display:block; width:100%; padding:12px 14px; border:1px solid #cfd4c9; border-radius:7px; color:var(--ink); background:var(--white); margin-top:7px; min-width:0; }
  .field textarea { resize:vertical; min-height:120px; }
  .field small { display:block; font-weight:400; color:var(--muted); margin-top:6px; }
  .check-label { display:flex; align-items:flex-start; gap:10px; font-size:12px; color:var(--muted); cursor:pointer; }
  input[type=checkbox] { accent-color:var(--green); width:17px; height:17px; flex-shrink:0; margin:2px 0 0; }
  .empty { text-align:center; padding:60px 24px; border:1px dashed #c7cfc1; border-radius:var(--radius); background:#ffffff44; }
  .empty .icon { width:36px; height:36px; color:#8c9a89; margin-bottom:20px; }
  .empty p { max-width:400px; margin:12px auto 22px; font-size:13px; }
  .text-link { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
  .table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--white); }
  table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; }
  th { color:var(--muted); font-weight:500; background:#f2f2eb; }
  td, th { padding:17px 20px; border-bottom:1px solid var(--line); white-space:nowrap; }
  tr:last-child td { border-bottom:0; }
  dialog { width:min(560px,calc(100vw - 32px)); border:0; border-radius:18px; padding:32px; color:var(--ink); background:var(--paper); max-height:90dvh; overflow:auto; box-shadow:0 30px 120px #0003; }
  dialog::backdrop { background:#112b2477; backdrop-filter:blur(6px); }
  dialog h2 { font-size:36px; padding-right:30px; }
  dialog p { font-size:13px; margin:15px 0 22px; }
  .modal-close { position:absolute; top:18px; right:18px; }
  dialog.wide { width:min(940px,calc(100vw - 32px)); }
  .modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
  #toast { position:fixed; bottom:28px; left:50%; transform:translate(-50%,20px); padding:13px 22px; border-radius:10px; background:var(--green); color:white; max-width:calc(100% - 36px); font-size:13px; box-shadow:var(--shadow); opacity:0; pointer-events:none; z-index:100; transition:.2s; }
  #toast.show { opacity:1; transform:translate(-50%,0); }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .divider { height:1px; background:var(--line); margin:24px 0; }
}
@layer pages {
  .hero { padding:68px 0 62px; display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:center; }
  .hero h1 em { color:#758c70; font-weight:400; }
  .hero-copy { padding-bottom:10px; }
  .hero .subheading { max-width:410px; font-size:15px; }
  .hero .actions { margin-top:30px; }
  .hero-meta { display:flex; gap:22px; margin-top:28px; color:var(--muted); font-size:11px; }
  .hero-meta span { display:flex; align-items:center; gap:6px; }
  .hero-meta .icon { width:13px; height:13px; }
  .hero-art { position:relative; padding:24px 0; }
  .hero-mosaic { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; position:relative; }
  .hero-mosaic .photo { border-radius:9px; }
  .hero-mosaic .photo:nth-child(3n+2) { transform:translateY(-24px); }
  .hero-mosaic .photo:nth-child(3n) { transform:translateY(12px); }
  .hero-tag { position:absolute; bottom:-8px; left:25px; display:flex; gap:11px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:11px; padding:12px 18px; box-shadow:var(--shadow); transform:rotate(-3deg); }
  .hero-tag .icon { width:28px; height:28px; }
  .hero-tag strong { display:block; font-size:12px; font-weight:550; }
  .hero-tag small { color:var(--muted); font-size:10px; }
  .sample-caption { font-size:9px; text-align:right; color:#8a9188; margin-top:25px; }
  .feature-strip { padding:23px 0; border-block:1px solid var(--line); display:flex; justify-content:space-around; align-items:center; gap:25px; font-size:12px; color:#69786b; }
  .feature-strip span { display:flex; gap:10px; align-items:center; }
  .feature-strip .icon { width:17px; height:17px; }
  .product-card { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:24px; background:#eeeade; border-radius:16px; align-items:center; }
  .product-card.personal { background:#e5eadf; }
  .product-card h3 { font-family:Georgia,serif; font-weight:400; font-size:32px; letter-spacing:-.04em; }
  .product-card .eyebrow { margin-bottom:14px; font-size:9px; letter-spacing:1.8px; }
  .product-card p { margin:12px 0 20px; font-size:12px; }
  .product-card .photo { border-radius:8px; }
  .product-card .btn { font-size:11px; padding:11px 14px; }
  .steps-section { background:#ecefe5; }
  .steps-section .grid-3 { margin-top:40px; gap:48px; }
  .step-number { color:#8a9a82; font-family:Georgia,serif; font-size:38px; display:block; margin-bottom:15px; }
  .steps-section h3 { font-size:17px; }
  .steps-section p { font-size:13px; max-width:300px; margin-top:12px; }
  .editorial-band { background:var(--green); color:white; border-radius:18px; padding:48px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:45px; }
  .editorial-band p { color:#bed0c1; font-size:14px; margin-top:20px; }
  .editorial-band .photo { max-width:300px; margin:auto; transform:rotate(4deg); border:10px solid #f8f6f1; border-radius:2px; }
  .product-hero { padding:55px 0 65px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
  .product-hero h1 { font-size:clamp(44px,5vw,68px); }
  .product-hero-photos { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-bottom:25px; }
  .product-hero-photos .photo:last-child { transform:translateY(28px); }
  .price-card { padding:32px; }
  .price-card.highlight { border-color:#80957a; background:#eff2e9; }
  .price-card .price { font-family:Georgia,serif; font-size:56px; letter-spacing:-3px; line-height:1.3; margin-top:20px; }
  .price-card .price small { font-family:'Segoe UI',sans-serif; font-size:12px; letter-spacing:0; color:var(--muted); }
  .benefits { list-style:none; padding:20px 0 25px; display:grid; gap:12px; font-size:13px; }
  .benefits li { display:flex; align-items:start; gap:9px; }
  .benefits .icon { width:16px; height:16px; margin-top:2px; color:#67815d; }
  .filters { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; margin-bottom:28px; }
  .stepper { display:flex; justify-content:center; align-items:center; gap:15px; padding:26px 0; border-bottom:1px solid var(--line); }
  .stepper button { border:0; background:none; display:flex; gap:9px; align-items:center; color:#92998e; font-size:12px; }
  .stepper .step-circle { width:25px; height:25px; border:1px solid #ccd1c5; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
  .stepper button.active { color:var(--green); }
  .stepper .active .step-circle { color:white; background:var(--green); border-color:var(--green); }
  .stepper .done .step-circle { background:var(--green-light); color:var(--green); }
  .stepper .step-line { width:65px; height:1px; background:var(--line); }
  .workbench { display:grid; grid-template-columns:1fr 315px; gap:38px; padding:38px 0 80px; align-items:start; }
  .workbench h1 { font-size:42px; margin:10px 0 15px; }
  .workbench h2 { font-size:30px; }
  .workbench .grid-3 { gap:12px; }
  .workbench .intro { margin-bottom:25px; font-size:13px; }
  .summary-card { position:sticky; top:104px; padding:22px; background:#efefe7; border:1px solid var(--line); border-radius:13px; }
  .summary-card .photo { max-width:100%; margin-bottom:20px; }
  .summary-card h3 { font-size:16px; }
  .summary-row { display:flex; align-items:start; justify-content:space-between; gap:15px; font-size:12px; padding:10px 0; }
  .summary-row span:first-child { color:var(--muted); }
  .summary-row.total { border-top:1px solid var(--line); margin-top:12px; padding-top:17px; font-size:18px; font-weight:550; }
  .summary-row.total span { color:var(--ink); }
  .wizard-nav { display:flex; justify-content:space-between; margin-top:30px; border-top:1px solid var(--line); padding-top:24px; gap:20px; }
  .upload-zone { border:1.5px dashed #aebba6; background:#f0f2e9; border-radius:14px; padding:38px 24px; text-align:center; }
  .upload-zone.dragover { border-color:var(--green); background:#dde9db; }
  .upload-zone > .icon { width:30px; height:30px; color:#7b9272; margin-bottom:12px; }
  .upload-zone h3 { font-size:18px; }
  .upload-zone p { font-size:12px; margin:8px 0 20px; }
  .upload-list { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0; }
  .upload-item { position:relative; }
  .upload-item .photo { border-radius:8px; }
  .upload-item .icon-btn { position:absolute; right:5px; top:5px; width:25px; height:25px; }
  .upload-item .icon-btn .icon { width:13px; height:13px; }
  .upload-item small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
  .upload-tips { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:25px 0; }
  .upload-tips h4 { font-size:12px; margin-bottom:8px; }
  .upload-tips p { font-size:11px; }
  .choice { display:flex; flex-wrap:wrap; gap:9px; margin:12px 0 25px; }
  .checkout-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:start; }
  .payment-logo { color:#153e8c; font-weight:800; font-style:italic; font-size:25px; letter-spacing:-1px; margin-bottom:18px; }
  .payment-button { width:100%; padding:15px; background:#ffc439; color:#153e8c; font-size:14px; border:0; border-radius:7px; font-weight:650; }
  .payment-button:hover { background:#f3b925; }
  .payment-outcomes { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
  .payment-outcomes summary { font-size:11px; color:var(--muted); }
  .payment-outcomes .actions { margin-top:15px; gap:8px; }
  .payment-outcomes .btn { font-size:10px; }
  .progress-card { padding:45px; max-width:720px; margin:auto; text-align:center; }
  .progress-ring { width:84px; height:84px; border-radius:50%; border:1px solid #ccdac4; margin:5px auto 26px; display:grid; place-items:center; background:#eaf0e3; }
  .progress-ring .icon { width:33px; height:33px; color:#718c64; }
  .progress-card h1 { font-size:42px; }
  .progress-card > p { max-width:500px; margin:18px auto 30px; font-size:13px; }
  .progress-list { text-align:left; margin:25px 0; }
  .progress-step { display:flex; gap:15px; align-items:center; padding:17px 0; border-bottom:1px solid var(--line); opacity:.45; }
  .progress-step:last-child { border:0; }
  .progress-step.current, .progress-step.complete { opacity:1; }
  .progress-step .step-dot { width:27px; height:27px; border-radius:50%; background:#e8ebdf; display:grid; place-items:center; font-size:11px; }
  .progress-step.current .step-dot { background:var(--green); color:white; }
  .progress-step h3 { font-size:13px; }
  .progress-step p { font-size:11px; margin-top:3px; }
  .gallery-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-bottom:28px; }
  .gallery-item { position:relative; }
  .gallery-item .photo { border-radius:12px; }
  .gallery-item > .icon-btn { position:absolute; top:10px; right:10px; z-index:2; }
  .gallery-item .select-photo { position:absolute; top:13px; left:13px; z-index:2; filter:drop-shadow(0 1px 3px #0003); }
  .gallery-item .caption { display:flex; justify-content:space-between; align-items:center; padding:12px 2px 18px; gap:8px; font-size:12px; }
  .photo-button { width:100%; padding:0; border:0; background:none; display:block; text-align:left; }
  .gallery-bottom { margin-top:25px; display:flex; justify-content:space-between; align-items:center; gap:15px; flex-wrap:wrap; }
  .project-card { padding:14px; background:var(--white); border:1px solid var(--line); border-radius:14px; }
  .project-card .photo { border-radius:9px; }
  .project-card h3 { font-size:16px; margin-top:17px; }
  .project-card .project-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:6px; }
  .project-card .actions { margin:18px 0 3px; justify-content:space-between; }
  .dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:30px; }
  .stat { border:1px solid var(--line); border-radius:12px; padding:22px; background:var(--white); }
  .stat small { color:var(--muted); font-size:11px; }
  .stat strong { display:block; font-family:Georgia,serif; font-size:34px; font-weight:400; margin:5px 0; }
  .legal { padding-top:20px; }
  .legal h3 { margin:30px 0 12px; font-size:18px; }
  .legal p, .legal li { font-size:14px; color:var(--muted); line-height:1.9; }
  .admin-layout { display:grid; grid-template-columns:190px 1fr; gap:34px; }
  .admin-nav { display:grid; gap:6px; align-content:start; position:sticky; top:104px; }
  .admin-nav a { padding:11px 14px; border-radius:7px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:9px; }
  .admin-nav a.active { background:var(--green-light); color:var(--green); }
  .admin-main { min-width:0; }
  .admin-main .grid-4 { gap:13px; }
  .admin-main .stat { padding:17px; }
  .admin-main h2 { font-size:29px; margin-bottom:22px; }
  .admin-list { display:grid; gap:12px; }
  .admin-style-row { display:grid; grid-template-columns:65px 1fr auto; gap:18px; align-items:center; border:1px solid var(--line); background:var(--white); border-radius:10px; padding:12px; }
  .admin-style-row h3 { font-size:14px; }
  .admin-style-row p { font-size:11px; }
  .connection { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
  .connection h3 { font-size:14px; }
  .connection p { font-size:12px; margin-top:5px; }
  .menu-open .nav-links { display:flex; }
  .image-crop { overflow:hidden; background:#e9e4d8; border-radius:10px; max-width:100%; margin:18px 0; }
  .image-crop img { width:100%; height:100%; object-fit:cover; }
  .loading { padding:80px 20px; text-align:center; font-family:Georgia,serif; font-size:28px; }
}
@layer responsive {
  @media (min-width:1500px) { .hero { padding:90px 0 84px; } }
  @media (max-width:1080px) {
    .wrap { width:calc(100% - 48px); }
    .nav { gap:18px; }
    .nav-links { gap:18px; font-size:12px; }
    .nav-actions { gap:10px; }
    .nav .btn { padding:11px 14px; }
    .hero { gap:35px; }
    .hero h1 { font-size:60px; }
    .product-card { gap:18px; padding:20px; }
    .product-card h3 { font-size:28px; }
    .workbench { grid-template-columns:1fr 275px; gap:25px; }
    .admin-layout { grid-template-columns:150px 1fr; gap:22px; }
    .admin-main .grid-4 { grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:760px) {
    .wrap { width:calc(100% - 36px); }
    .nav { min-height:66px; justify-content:space-between; flex-wrap:wrap; gap:0; }
    .logo { font-size:27px; }
    .logo .icon { width:24px; }
    .logo span { font-size:8px; letter-spacing:2px; }
    .nav-actions { margin-left:auto; gap:11px; }
    .nav-actions > .btn { display:none; }
    .mobile-toggle { display:inline-flex; margin-left:10px; }
    .nav-links { display:none; order:3; flex-basis:100%; flex-direction:column; gap:0; align-items:stretch; padding:7px 0 15px; }
    .nav-links a { padding:11px 3px; border-bottom:0; }
    .demo-bar { font-size:9px; padding:7px 12px; letter-spacing:0; }
    .demo-bar button { font-size:9px; }
    .hero { grid-template-columns:1fr; gap:28px; padding:45px 0 30px; }
    .hero h1 { font-size:57px; max-width:500px; }
    .hero .subheading { font-size:14px; max-width:470px; }
    .hero-copy { padding:0; }
    .hero-art { padding-top:35px; }
    .hero-mosaic { gap:10px; }
    .hero-tag { bottom:6px; left:10px; padding:9px 12px; }
    .hero-tag .icon { width:23px; }
    .hero-tag strong { font-size:10px; }
    .hero-tag small { font-size:9px; }
    .feature-strip { display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:10px; padding:20px 0; }
    .section { padding:52px 0; }
    .section-top { align-items:start; flex-direction:column; gap:17px; margin-bottom:25px; }
    .section-top p { font-size:13px; }
    h2 { font-size:36px; }
    .grid-2, .grid-3, .grid-4 { gap:16px; }
    .grid-2 { grid-template-columns:1fr; }
    .grid-3, .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .product-card { grid-template-columns:1fr 1fr; gap:22px; }
    .product-card h3 { font-size:30px; }
    .steps-section .grid-3 { grid-template-columns:1fr; gap:30px; }
    .step-number { font-size:30px; margin-bottom:8px; }
    .steps-section p { max-width:none; margin-top:8px; }
    .editorial-band { padding:30px; grid-template-columns:1fr; gap:30px; }
    .editorial-band .photo { max-width:230px; }
    .footer { padding-top:35px; }
    .footer-top { flex-direction:column; gap:30px; }
    .footer-links { gap:20px; }
    .footer-bottom { font-size:9px; flex-wrap:wrap; margin-top:30px; }
    .product-hero { padding:40px 0; grid-template-columns:1fr; gap:35px; }
    .product-hero h1 { font-size:48px; }
    .product-hero-photos { gap:12px; }
    .price-card { padding:25px; }
    .page-title { padding-top:35px; }
    .page-title h1 { font-size:42px; }
    .workbench { grid-template-columns:1fr; padding-top:26px; padding-bottom:30px; }
    .summary-card { position:static; }
    .summary-card .photo { max-width:120px; float:right; margin-left:18px; }
    .summary-card .divider { clear:both; }
    .workbench .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .workbench h1 { font-size:36px; }
    .stepper { gap:8px; padding:20px 0; }
    .stepper button { font-size:10px; padding:0; gap:5px; }
    .stepper .step-line { width:20px; }
    .stepper .step-circle { width:23px; height:23px; }
    .checkout-grid { grid-template-columns:1fr; gap:22px; }
    .progress-card { padding:28px 19px; }
    .progress-card h1 { font-size:34px; }
    .upload-zone { padding:28px 15px; }
    .upload-list { grid-template-columns:repeat(3,1fr); gap:9px; }
    .gallery-toolbar { align-items:flex-start; }
    .gallery-toolbar .actions { margin-top:0; }
    .gallery-item .caption { font-size:10px; }
    .gallery-item .icon-btn { width:29px; height:29px; }
    .gallery-item .icon-btn svg { width:15px; }
    .gallery-item .select-photo { left:8px; top:8px; }
    .dashboard-stats { gap:9px; }
    .dashboard-stats .stat { padding:13px; }
    .stat strong { font-size:26px; }
    .stat small { font-size:10px; }
    .admin-layout { grid-template-columns:1fr; }
    .admin-nav { position:static; display:flex; overflow:auto; padding-bottom:8px; gap:5px; }
    .admin-nav a { white-space:nowrap; padding:9px; font-size:11px; }
    .admin-nav .icon { width:15px; }
    .admin-main .grid-4 { grid-template-columns:repeat(2,1fr); }
    .admin-style-row { grid-template-columns:50px 1fr; gap:12px; }
    .admin-style-row .btn { grid-column:2; justify-self:start; }
    .modal-grid { grid-template-columns:1fr; gap:20px; }
    .modal-grid > .photo { max-width:260px; margin:auto; width:100%; }
    dialog { padding:26px 22px; }
    dialog h2 { font-size:31px; }
    .connection { align-items:start; }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; animation:none !important; } }
}