@charset "UTF-8";
:root {
  --ink:#18372f;
  --text:#25352f;
  --muted:#7c8279;
  --paper:#fbfaf7;
  --line:#e6e7df;
  --green:#285c4e;
  --soft:#f0f1e9;
  --accent:#d4e2b4;
  --error:#a63e30;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--paper);
  font-synthesis:none
}


* {
  box-sizing:border-box
}

body {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

a:hover {
  text-decoration:underline
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.55;
  cursor:wait
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #7caa91;
  outline-offset:3px
}

input,select,textarea {
  border:1px solid #dcded5;
  border-radius:5px;
  background:#fff;
  color:var(--text);
  padding:12px 13px;
  max-width:100%;
  width:100%;
  min-width:0
}

textarea {
  resize:vertical;
  line-height:1.55
}

input[type=color] {
  padding:5px;
  height:45px;
  cursor:pointer
}

input[type=file] {
  font-size:13px
}

label {
  display:block;
  font-size:12px;
  line-height:1.5;
  font-weight:600
}

label input,label select,label textarea {
  margin-top:7px
}

h1,h2,h3,p {
  margin-top:0
}

h1 {
  font-weight:500;
  letter-spacing:-1.6px;
  font-size:42px;
  line-height:1.12;
  margin-bottom:16px
}

h2 {
  font-size:19px;
  line-height:1.35;
  font-weight:600
}

p {
  line-height:1.7
}

svg {
  flex-shrink:0
}

[hidden] {
  display:none!important
}

.small {
  font-size:12px
}

.muted {
  color:var(--muted)
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.2px;
  font-weight:700;
  color:#63806c;
  margin-bottom:15px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}


.announcement {
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:var(--ink);
  color:#eef0dd;
  font-size:9px;
  letter-spacing:1.3px
}

.announcement span {
  font-size:10px;
  letter-spacing:.2px;
  color:#bdc9b8
}

.site-header {
  height:88px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:26px;
  background:#fffefa
}

.wordmark {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:23px;
  letter-spacing:1.2px;
  font-weight:800;
  color:var(--ink)
}

.wordmark:hover {
  text-decoration:none
}

.wordmark>span {
  font-size:8px;
  letter-spacing:2px;
  writing-mode:vertical-rl;
  margin-left:1px
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:12px;
  height:100%
}

.site-header nav a {
  height:100%;
  display:flex;
  align-items:center;
  position:relative
}

.site-header nav a.active:after {
  content:'';
  position:absolute;
  height:2px;
  background:var(--green);
  bottom:0;
  width:100%
}

.header-caption {
  font-size:8px;
  letter-spacing:1.5px;
  color:#788375
}

.breadcrumbs {
  display:flex;
  gap:13px;
  font-size:11px;
  color:#81867d;
  margin:27px 0
}

.breadcrumbs strong {
  color:#385447;
  font-weight:400
}

.customizer-page {
  max-width:1440px;
  margin:auto;
  padding:0 5%
}

.customizer-layout {
  display:grid;
  grid-template-columns:minmax(0,1.23fr) minmax(340px,1fr);
  gap:64px;
  align-items:start
}

.preview-panel {
  position:sticky;
  top:20px;
  border-radius:8px;
  background:#eeefe7;
  overflow:hidden
}

.preview-top {
  position:absolute;
  top:23px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:2
}

.tag {
  font-size:8px;
  letter-spacing:1.2px;
  border:1px solid #d2d9c9;
  padding:7px 9px;
  color:#64735f;
  border-radius:3px
}

.guide-toggle {
  border:0;
  background:transparent;
  color:#61735f;
  font-size:10px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px
}

.guide-icon {
  font-size:16px
}

.product-stage {
  position:relative;
  width:100%;
  max-width:640px;
  aspect-ratio:4/5;
  margin:6px auto 0
}

.product-stage>img {
  width:100%;
  height:100%;
  display:block;
  user-select:none;
  pointer-events:none
}

.print-overlay {
  position:absolute;
  border:1px dashed #839b7c;
  box-sizing:content-box;
  margin:-1px 0 0 -1px
}

.print-overlay.hide-guide {
  border-color:transparent
}

.print-overlay .canvas-container {
  position:absolute!important;
  left:0;
  top:0
}

.area-label {
  position:absolute;
  top:calc(100% + 12px);
  width:100%;
  text-align:center;
  font-size:7px;
  letter-spacing:1.2px;
  color:#8b9b80;
  pointer-events:none
}

.hide-guide .area-label {
  visibility:hidden
}

.preview-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px;
  font-size:9px;
  color:#83907b;
  border-top:1px solid #e0e4d9
}

.view-label {
  display:flex;
  gap:7px;
  align-items:center;
  letter-spacing:1px;
  white-space:nowrap;
  color:#526d53
}

.status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6f8d58
}

.preview-caption {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:15px 24px;
  background:#e8eadf;
  font-size:8px;
  letter-spacing:.6px;
  color:#879079
}

.design-panel {
  padding:7px 0 0
}

.design-panel h1 {
  font-size:38px;
  margin-bottom:12px
}

.product-description {
  font-size:12px;
  color:#85877e;
  line-height:1.8;
  max-width:390px;
  margin-bottom:18px
}

.config-section {
  border-top:1px solid var(--line);
  padding:23px 0
}

.section-heading {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:21px
}

.section-heading h2 {
  font-size:14px;
  margin:0;
  letter-spacing:.1px
}

.section-heading .small {
  margin-left:auto;
  font-size:10px
}

.step {
  font-size:8px;
  border:1px solid #cad3c4;
  border-radius:50%;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  color:#6f8768
}

.field-title {
  font-size:11px;
  font-weight:400;
  margin:17px 0 10px
}

.field-title strong {
  margin-left:10px;
  font-weight:500;
  color:#48613e
}

.color-options {
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  padding:2px
}

.swatch {
  background:var(--swatch);
  width:27px;
  height:27px;
  border:3px solid var(--paper);
  border-radius:50%;
  outline:1px solid transparent
}

.swatch.active {
  outline-color:#607355
}

.swatch:hover {
  outline-color:#b1b9a6
}

.config-section>select {
  font-size:11px;
  padding:11px 12px;
  background:transparent
}

.editor-tabs {
  display:flex;
  border-bottom:1px solid var(--line);
  margin-bottom:15px;
  gap:24px
}

.editor-tabs button {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  font-size:16px;
  color:#8d9484;
  padding:0 1px 11px;
  display:flex;
  align-items:center;
  gap:9px
}

.editor-tabs button span {
  font-size:11px
}

.editor-tabs button.active {
  border-color:#426744;
  color:#32573d
}

#text-input {
  background:#fffefa;
  min-height:76px;
  font-size:12px;
  padding:13px;
  resize:vertical
}

.text-settings {
  display:grid;
  grid-template-columns:1fr 68px;
  gap:12px;
  margin-top:12px
}

.text-settings label {
  font-size:10px;
  font-weight:400;
  color:#85907c
}

.text-settings select {
  font-size:11px;
  height:39px;
  padding:8px 11px;
  background:transparent
}

.text-settings input[type=color] {
  height:39px
}

.text-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:13px
}

.alignment {
  display:flex;
  gap:2px
}

.alignment button {
  background:transparent;
  border:0;
  border-radius:3px;
  width:29px;
  height:29px;
  color:#7e8a71;
  font-size:18px
}

.alignment button.active {
  background:#e9eddf;
  color:#365b3b
}

.alignment button:last-child {
  font-size:12px;
  border-left:1px solid #dce1d3;
  margin-left:4px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid var(--green);
  background:var(--green);
  color:#fff;
  border-radius:4px;
  padding:13px 21px;
  font-size:12px;
  line-height:1.5;
  font-weight:500;
  text-decoration:none
}

.button:hover {
  background:#204b3f;
  text-decoration:none
}

.button.secondary {
  color:var(--green);
  background:transparent
}

.small-button {
  font-size:10px;
  padding:8px 14px
}

.object-toolbar {
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line)
}

.object-toolbar button {
  border:0;
  background:transparent;
  padding:0;
  color:#7e8c73;
  font-size:9px
}

.object-toolbar button:last-child {
  margin-left:auto
}

.danger-text {
  color:#a15e4b!important
}

.editor-hint {
  font-size:9px;
  color:#98a08e;
  margin:11px 0 0;
  line-height:1.6
}

.upload-zone {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  min-height:150px;
  gap:10px;
  border:1px dashed #a8b69b;
  border-radius:5px;
  background:#f1f3ea;
  cursor:pointer;
  text-align:center;
  padding:20px
}

.upload-zone strong {
  font-size:12px
}

.upload-zone span:last-of-type {
  font-size:10px;
  font-weight:400;
  color:#849077
}

.upload-zone input {
  font-size:10px;
  border:0;
  padding:0;
  background:transparent;
  max-width:230px
}

.upload-symbol {
  font-size:26px;
  color:#5b7e54
}

.primary-button {
  display:flex;
  justify-content:space-between;
  width:100%;
  padding:15px 19px;
  font-size:12px;
  background:var(--ink)
}

.primary-button span {
  font-size:19px;
  line-height:1
}

.save-note {
  text-align:center;
  font-size:9px;
  color:#9b9f91;
  line-height:1.8;
  margin:12px 0 0
}

.benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  border-top:1px solid var(--line);
  margin:58px 0 0;
  padding:32px 0 42px
}

.benefits>div {
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:10px
}

.benefits>div>span {
  grid-row:1/3;
  color:#839377;
  font-size:26px
}

.benefits strong {
  font-size:11px;
  font-weight:500
}

.benefits p {
  font-size:10px;
  color:#9b9e91;
  margin:8px 0 0
}

.site-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:29px 5%;
  border-top:1px solid var(--line);
  font-size:9px;
  color:#929b88
}

.footer-brand {
  font-weight:700;
  letter-spacing:1.2px;
  color:#536b50
}


.notice {
  padding:13px 16px;
  background:#edf1e7;
  border:1px solid #d4dfc9;
  border-radius:4px;
  font-size:12px;
  line-height:1.7;
  margin:15px 0;
  color:#4c6f45;
  overflow-wrap:anywhere
}

.notice.error {
  background:#fff0ec;
  border-color:#f1c9be;
  color:var(--error)
}

.notice.success {
  margin:16px 5%
}

.content {
  max-width:1280px;
  margin:38px auto 70px;
  padding:0 5%;
  min-height:55vh
}

.content.narrow {
  max-width:850px
}

.content h1 {
  font-size:34px;
  margin-top:16px
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:24px
}

.page-heading h1,.page-heading h2 {
  margin-bottom:0
}

.page-heading h2 {
  margin-top:24px
}

.back-link {
  font-size:12px;
  color:#718469
}

.admin-nav {
  display:flex;
  align-items:center;
  gap:28px;
  padding:15px 5%;
  background:#f0f2e9;
  font-size:12px;
  border-bottom:1px solid var(--line)
}

.admin-nav form {
  margin-left:auto
}

.link-button {
  border:0;
  background:transparent;
  color:var(--green);
  font-size:inherit;
  padding:0
}

.table-wrap {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fffefa
}

table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:12px
}

th {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#8b9581;
  background:#f1f3eb;
  font-weight:500
}

td,th {
  padding:16px;
  border-bottom:1px solid var(--line)
}

tr:last-child td {
  border-bottom:0
}

.table-actions {
  min-width:210px
}

.table-actions a,.table-actions form {
  display:inline-block;
  margin:4px 12px 4px 0;
  font-size:11px
}

.admin-card {
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px
}

.stack-form {
  display:flex;
  flex-direction:column;
  gap:20px
}

.stack-form label {
  font-size:12px;
  font-weight:400
}

.stack-form .button {
  align-self:flex-start
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.variant-thumb {
  width:45px;
  height:55px;
  object-fit:contain;
  background:var(--soft);
  border-radius:4px
}

.tiny-swatch {
  display:inline-block;
  vertical-align:middle;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--swatch);
  margin-right:7px;
  border:1px solid #ddd
}

.image-preview {
  max-height:240px;
  width:180px;
  object-fit:contain;
  background:var(--soft);
  border-radius:5px
}

.login-wrap {
  max-width:440px;
  margin:70px auto;
  padding:0 25px;
  min-height:55vh
}

.login-wrap h1 {
  font-size:32px
}

.login-wrap>p {
  font-size:12px
}

.login-wrap .stack-form {
  margin:28px 0
}

.area-config {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
  gap:36px;
  align-items:start
}

.area-preview {
  background:var(--soft);
  padding:20px;
  border-radius:6px
}

.admin-stage {
  position:relative;
  width:100%;
  max-width:500px;
  aspect-ratio:4/5;
  margin:auto
}

.admin-stage>img {
  display:block;
  width:100%;
  height:100%
}

.admin-stage .canvas-container {
  position:absolute!important;
  left:0;
  top:0
}

.catalog {
  max-width:1300px;
  margin:65px auto;
  padding:0 5%;
  min-height:65vh
}

.catalog h1 {
  font-size:54px
}

.catalog>p {
  font-size:13px
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin:34px 0 70px
}

.product-card:hover {
  text-decoration:none
}

.card-image {
  aspect-ratio:4/4.5;
  position:relative;
  border-radius:6px;
  background:var(--soft);
  overflow:hidden
}

.card-image img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .3s
}

.product-card:hover img {
  transform:scale(1.03)
}

.card-image .tag {
  position:absolute;
  left:16px;
  top:16px;
  background:#f4f5ec
}

.card-copy {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px
}

.card-copy h2 {
  font-size:18px;
  margin:0
}

.card-copy span {
  font-size:22px;
  color:#6a845e
}

.product-card>p {
  font-size:12px;
  color:#8a947f;
  margin:9px 0
}

.empty-state {
  padding:80px 0;
  min-height:55vh
}

.order-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 1fr;
  gap:50px;
  align-items:start
}

.order-preview {
  position:relative;
  background:var(--soft);
  border-radius:8px;
  width:100%;
  max-width:500px;
  aspect-ratio:4/5
}

.order-preview>img {
  width:100%;
  height:100%;
  display:block
}

.order-preview .order-overlay {
  position:absolute;
  overflow:hidden
}

.order-overlay .canvas-container {
  position:absolute!important;
  left:0;
  top:0
}

.order-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:25px 0
}

.order-summary dt,.order-summary dd {
  padding:13px 0;
  margin:0;
  border-bottom:1px solid var(--line);
  font-size:12px
}

.order-summary dt {
  color:var(--muted)
}

.order-summary dd {
  text-align:right
}

.order-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.order-confirm {
  font-size:46px;
  color:#6d8b54;
  margin-bottom:20px
}

code {
  background:#edf0e6;
  border-radius:3px;
  padding:3px 5px;
  font-size:11px;
  overflow-wrap:anywhere
}


@media(min-width:1500px) {
  .customizer-layout {
  gap:90px
}

.customizer-page {
  padding:0 65px
}


}


@media(max-width:1050px) {
  .header-caption {
  display:none
}

.customizer-layout {
  gap:35px;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,1fr)
}

.design-panel h1 {
  font-size:32px
}

.preview-top {
  left:15px;
  right:15px;
  top:15px
}

.preview-top .tag {
  font-size:6px;
  padding:6px
}

.preview-bottom {
  padding:15px
}

.preview-bottom>span:last-child {
  font-size:8px;
  max-width:145px
}

.preview-caption {
  padding:14px;
  font-size:7px
}

.product-grid {
  grid-template-columns:repeat(2,1fr)
}


}


@media(max-width:760px) {
  .announcement {
  font-size:7px;
  letter-spacing:.7px;
  height:28px
}

.announcement span {
  display:none
}

.site-header {
  height:72px;
  padding:0 5%;
  gap:12px
}

.wordmark {
  font-size:18px;
  gap:4px
}

.wordmark svg {
  width:22px
}

.wordmark>span {
  font-size:6px
}

.site-header nav {
  gap:17px;
  font-size:10px
}

.site-header nav a:first-child {
  display:none
}

.breadcrumbs {
  margin:20px 0;
  font-size:10px
}

.customizer-layout {
  grid-template-columns:1fr;
  gap:30px
}

.preview-panel {
  position:relative;
  top:0
}

.product-stage {
  max-width:440px;
  margin-top:0
}

.preview-top {
  top:18px
}

.preview-top .tag {
  font-size:7px
}

.preview-bottom {
  font-size:9px
}

.preview-bottom>span:last-child {
  max-width:none;
  font-size:8px
}

.preview-caption {
  font-size:7px
}

.design-panel h1 {
  font-size:34px
}

.product-description {
  max-width:100%
}

.config-section {
  padding:22px 0
}

.benefits {
  grid-template-columns:1fr;
  gap:22px;
  margin-top:28px
}

.benefits>div {
  grid-template-columns:32px 1fr
}

.site-footer {
  flex-wrap:wrap;
  gap:15px;
  font-size:8px
}

.site-footer span:last-child {
  display:none
}

.content {
  margin-top:26px
}

.content h1 {
  font-size:28px
}

.page-heading {
  align-items:flex-start;
  flex-wrap:wrap
}

.page-heading .button {
  font-size:10px;
  padding:10px 13px
}

.admin-card {
  padding:20px
}

.admin-nav {
  gap:18px;
  font-size:10px
}

.area-config,.order-layout {
  grid-template-columns:1fr;
  gap:25px
}

.area-preview {
  padding:12px
}

.form-grid {
  gap:13px
}

.catalog {
  margin-top:40px
}

.catalog h1 {
  font-size:40px
}

.product-grid {
  gap:18px
}

.card-copy h2 {
  font-size:15px
}

.card-image .tag {
  font-size:6px;
  padding:5px;
  left:8px;
  top:8px
}

.product-card>p {
  font-size:10px
}

.order-preview {
  max-width:440px;
  margin:auto
}

.order-summary {
  margin-top:15px
}

.order-confirm {
  font-size:34px
}


}


@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  transition:none!important
}


}



/* Casio cover customizer */
.font-settings { grid-template-columns:minmax(0,1fr) 100px; }
.font-settings input { font-size:12px; height:39px; padding:8px 10px; }
.machine-picker { margin:0 0 18px; padding:13px; border:1px solid #dce3ef; border-radius:5px; min-width:0; }
.machine-picker legend { font-size:10px; color:#637796; padding:0 5px; }
.machine-options { display:flex; gap:17px; flex-wrap:wrap; }
.machine-options label { display:flex; gap:7px; align-items:center; font-weight:400; font-size:11px; cursor:pointer; }
.machine-options input { width:auto; margin:0; padding:0; accent-color:#224e91; }
.machine-picker .editor-hint { margin-bottom:0; }
.palette-heading { display:flex; justify-content:space-between; gap:10px; margin:15px 0 10px; font-size:10px; color:#7c8493; }
.palette-heading strong { margin-left:5px; color:#354a68; font-weight:500; }
.palette-heading .link-button { font-size:9px; }
:root { --casio-super-black:#1e2022; --casio-nova-white:#f4f5f7; --casio-glacier-green:#a2d0c1; --casio-aura-pink:#f3b2c3; }
.design-palette { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; }
.ink-swatch.recommended { border-bottom:3px solid #2d6155; }
.laser-preview-hint { display:flex; gap:9px; align-items:flex-start; font-size:11px; line-height:1.6; color:#637796; margin:0 0 17px; }
.laser-preview-hint[hidden] { display:none; }
#laser-tone-swatch { flex:0 0 22px; height:22px; border-radius:50%; border:1px solid #cbd2dd; }
.laser-admin-config { border:1px solid #dce3ef; border-radius:5px; padding:15px; }
.laser-admin-config .laser-auto-label { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.laser-auto-label input { width:auto; }
.ink-swatch { border:1px solid #dce3ef; padding:6px 4px; border-radius:5px; background:#fff; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:9px; color:#74839a; }
.ink-swatch>span:first-child { width:23px; height:23px; border-radius:50%; border:1px solid #d7dce5; }
.ink-swatch.active { border-color:#426aab; background:#f0f5fe; color:#234d8f; box-shadow:0 0 0 1px #426aab; }
.logo-mode-label { margin-top:15px; font-size:10px; font-weight:400; color:#7c8493; }
.logo-mode-label select { font-size:11px; }
.photo-count-options { display:flex; gap:8px; margin:10px 0 18px; }
.photo-count-options button { flex:1; padding:9px; border:1px solid #d5deea; border-radius:5px; background:#fff; color:#52657c; }
.photo-count-options [aria-pressed="true"],.frame-choice[aria-pressed="true"] { border-color:#2d6155; background:#f0f8f4; box-shadow:0 0 0 1px #2d6155; }
.frame-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 18px; }
.frame-choice { display:flex; align-items:center; flex-direction:column; gap:5px; border:1px solid #d5deea; border-radius:6px; padding:12px; background:white; color:#52657c; font-size:11px; }
.frame-mini { width:62px; height:100px; display:flex; flex-direction:column; gap:4px; background:#fffdf7; border:1px solid #deded8; padding:5px 5px 14px; }
.frame-mini.film { background:#20252c; border-left:4px dashed #a8b2ba; border-right:4px dashed #a8b2ba; padding:5px 4px 14px; }
.frame-mini>span { flex:1; min-height:0; display:grid; place-items:center; background:linear-gradient(135deg,#bad9ce,#718e9a); color:white; font-size:10px; }
.photo-upload-button { width:100%; margin-top:8px; }
.photo-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:10px 0; }
.photo-slot { position:relative; font-size:10px; color:#637796; }
.photo-slot img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block; margin-bottom:4px; }
.photo-slot button { position:absolute; top:3px; right:3px; border:0; background:#ffffffee; border-radius:50%; width:23px; height:23px; color:#314158; }
.photo-slot .photo-move { right:auto; left:3px; }
.photobooth-builder button:disabled { opacity:.45; cursor:not-allowed; }
#photobooth-message.error { color:#a43030; }
.photo-slot .photo-select { position:static; display:block; width:100%; height:auto; border-radius:4px; padding:0; background:transparent; }
.photo-slot .photo-select[aria-pressed="true"] { outline:2px solid #2d6155; outline-offset:2px; }
#photo-transform label { font-size:11px; color:#637796; }
#photo-angle, #photo-size { margin-top:7px; padding:9px; width:100%; border:1px solid #d5deea; border-radius:5px; }
.layout-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0 0 12px; }
.layout-choices[hidden] { display:none; }
.layout-choice { padding:10px 5px; border:1px solid #d5deea; border-radius:6px; background:white; color:#52657c; display:flex; align-items:center; flex-direction:column; gap:9px; font-size:10px; }
.layout-choice[aria-pressed="true"] { border-color:#2d6155; background:#f0f8f4; box-shadow:0 0 0 1px #2d6155; }
.layout-mini { display:block; position:relative; width:60px; height:120px; border:1px dashed #bac9cf; background:#f7f9fa; overflow:hidden; }
.layout-mini>span { position:absolute; display:grid; place-items:center; background:linear-gradient(135deg,#b1d6c7,#7295a3); color:white; font-size:10px; border:1px solid #ffffffcc; }
.layout-choice strong { line-height:1.4; }
.font-preview { font-size:21px; white-space:nowrap; }
.font-admin-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.font-rename { display:flex; gap:6px; }
.font-rename input { font-size:11px; padding:7px; max-width:170px; }
.admin-nav { flex-wrap:wrap; }
:root { --ink:#17315c; --green:#224e91; --text:#26334a; --muted:#7c8493; --soft:#f1f4f9; --line:#e1e6ef; --paper:#fbfcfe; }
.casio-wordmark { color:#173b76; font-size:29px; letter-spacing:0; font-weight:900; gap:12px; }
.casio-wordmark>span { writing-mode:horizontal-tb; font-size:8px; letter-spacing:1.4px; line-height:1.7; max-width:65px; border-left:1px solid #cbd4e4; padding-left:12px; }
.preview-panel { background:#fff; border:1px solid #e3e8f0; }
.preview-caption { background:#f2f5fa; color:#71819c; }
.preview-bottom { border-color:#e1e6ef; color:#8190a7; }
.print-overlay { border-color:#688cc0; }
.area-label { color:#6381b2; }
.eyebrow { color:#5a77a7; }
.swatch.active { outline-color:#28599c; }
.tag { color:#5b73a1; border-color:#d0daec; background:#f9fbff; }
.config-section:first-of-type { margin-top:22px; }
.save-section { padding-bottom:0; }
.order-preview { background:#fff; border:1px solid #e4e9f2; }
@media(max-width:760px) { .casio-wordmark { font-size:22px; gap:8px; } .casio-wordmark>span { font-size:6px; max-width:48px; padding-left:8px; } .site-header nav { gap:14px; font-size:9px; } .announcement { font-size:6px; letter-spacing:.4px; } }

.picture-frame-mini {width:84px;height:126px;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 0 0/12px 12px;border:0;}
.picture-frame-mini img {width:100%;height:100%;object-fit:contain;}