/* PrintNest — ink & paper theme
   Palette: paper #FBF9F5 · ink navy #1E2A45 · marigold #F5A623 · magenta #E5397A */

:root {
  --paper: #FBF9F5;
  --ink: #1E2A45;
  --ink-soft: #55617D;
  --marigold: #F5A623;
  --magenta: #E5397A;
  --line: #E7E1D6;
  --card: #FFFFFF;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(30, 42, 69, 0.08);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.site-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 50; }

.header-inner {
  display: flex; align-items: center; gap: 24px; padding: 14px 20px;
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--marigold); color: var(--ink);
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  display: grid; place-items: center;
}
.logo-text { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.3px; }
.logo-text em { font-style: normal; color: var(--marigold); }

.search-form { flex: 1; display: flex; max-width: 520px; }
.search-form input {
  flex: 1; border: none; border-radius: 8px 0 0 8px;
  padding: 10px 14px; font-size: 15px; min-width: 0;
}
.search-form input:focus { outline: 3px solid var(--marigold); outline-offset: -1px; }
.search-form button {
  border: none; background: var(--marigold); color: var(--ink);
  padding: 0 18px; border-radius: 0 8px 8px 0; font-weight: 700; cursor: pointer;
}

.cart-link {
  margin-left: auto; text-decoration: none; font-weight: 600;
  position: relative; white-space: nowrap;
}
.cart-badge {
  background: var(--magenta); color: #fff; border-radius: 999px;
  font-size: 12px; padding: 1px 7px; margin-left: 4px;
}

.cat-nav { background: #16203A; overflow-x: auto; }
.cat-nav-inner { display: flex; gap: 4px; padding: 0 20px; }
.cat-nav a {
  color: #C9D2E6; text-decoration: none; font-size: 13.5px;
  padding: 9px 12px; white-space: nowrap;
}
.cat-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

/* Signature: CMYK registration strip */
.cmyk-strip { display: flex; height: 5px; }
.cmyk-strip span { flex: 1; }
.cmyk-strip .c { background: #00AEEF; }
.cmyk-strip .m { background: #EC008C; }
.cmyk-strip .y { background: #FFF200; }
.cmyk-strip .k { background: #231F20; }

/* ---------- Flash messages ---------- */
.flash {
  margin: 14px 0 0; padding: 11px 16px; border-radius: 10px;
  background: #E6F4EA; border: 1px solid #B9E0C5; font-size: 14.5px;
}
.flash-info { background: #EAF1FD; border-color: #C4D6F5; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, #FFF6E8 0%, var(--paper) 100%); }
.hero-inner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px;
  align-items: center; padding: 56px 20px;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px;
  font-weight: 700; color: var(--magenta); margin-bottom: 10px;
}
.hero h1 {
  font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.12; margin-bottom: 16px;
}
.hero-accent {
  background: linear-gradient(120deg, var(--marigold) 0%, var(--magenta) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--ink-soft); font-size: 17px; margin-bottom: 24px; max-width: 46ch; }

.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-tile {
  border-radius: var(--radius); aspect-ratio: 1.2;
  display: grid; place-items: center; font-size: 44px;
  box-shadow: var(--shadow); text-decoration: none;
  transition: transform 0.15s ease;
}
.hero-tile:hover { transform: translateY(-3px) rotate(-1deg); }
.hero-tile:nth-child(2) { transform: rotate(2deg); }
.hero-tile:nth-child(3) { transform: rotate(-2deg); }

/* ---------- Sections ---------- */
.section { padding: 44px 20px; }
.section-tinted { background: #F3EEE4; }
.section-tinted .container { padding: 0; }
.section-title {
  font-family: var(--font-display); font-size: 27px; margin-bottom: 22px;
}

/* ---------- Category grid ---------- */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.cat-tile {
  border-radius: var(--radius); padding: 22px 20px; text-decoration: none;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.15s ease;
}
.cat-tile:hover { transform: translateY(-3px); }
.cat-icon { font-size: 34px; margin-bottom: 6px; }
.cat-name { font-weight: 700; font-size: 17px; }
.cat-tag { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Product cards ---------- */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.product-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex;
  flex-direction: column; transition: box-shadow 0.15s ease;
}
.product-card:hover { box-shadow: var(--shadow); }

.card-media {
  position: relative; aspect-ratio: 1.15; display: grid; place-items: center;
  text-decoration: none;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-emoji { font-size: 58px; }

.badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.4px;
}

.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-soft);
}
.card-body h3 { font-size: 15.5px; line-height: 1.35; font-weight: 600; }
.card-body h3 a { text-decoration: none; }
.card-body h3 a:hover { color: var(--magenta); }

.price { font-weight: 800; font-size: 17px; margin-top: auto; }
.price s { color: var(--ink-soft); font-weight: 400; font-size: 14px; margin-left: 6px; }
.discount { color: #1B8A4C; font-size: 13px; font-weight: 700; margin-left: 6px; }
.price-lg { font-size: 26px; margin: 10px 0 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-weight: 700; border-radius: 10px; font-size: 15px;
  background: var(--marigold); color: var(--ink); padding: 12px 22px;
  transition: filter 0.12s ease;
}
.btn:hover { filter: brightness(0.95); }
.btn-primary { background: var(--magenta); color: #fff; }
.btn-small { padding: 8px 14px; font-size: 13.5px; }
.btn-full { width: 100%; text-align: center; }
.btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--magenta); outline-offset: 2px;
}

/* ---------- Category / listing page ---------- */
.page-head { padding: 40px 0 34px; }
.page-head h1 { font-family: var(--font-display); font-size: 34px; }

.listing-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
  color: var(--ink-soft); font-size: 14.5px;
}
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form select {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; font-size: 14px;
}

.empty-state { color: var(--ink-soft); font-size: 16px; padding: 30px 0; }

/* ---------- Product detail ---------- */
.breadcrumbs { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 20px; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--magenta); }

.product-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.product-media {
  position: relative; border-radius: var(--radius); aspect-ratio: 1;
  display: grid; place-items: center; overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-emoji { font-size: 120px; }

/* Product gallery: carousel with arrows + dot indicators */
.product-gallery { display: grid; gap: 14px; }
.gallery-item[hidden] { display: none !important; }  /* the global
  `img { display:block }` reset would otherwise defeat [hidden] */
.product-media video.gallery-item {
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
.product-media:focus-visible { outline: 2px solid var(--magenta); }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: #333;
  font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0 0 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); z-index: 2;
  transition: background .15s;
}
.gallery-arrow:hover { background: #fff; }
.gallery-arrow.prev { left: 12px; }
.gallery-arrow.next { right: 12px; }
.gallery-dots {
  display: flex; gap: 10px; justify-content: center; align-items: center;
}
.gallery-dot {
  width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%;
  background: #C9D6D5; cursor: pointer; display: grid; place-items: center;
  transition: background .15s;
}
.gallery-dot.active { background: #1E6E64; }
.gallery-dot.video {
  width: auto; height: auto; background: none; color: #C9D6D5;
}
.gallery-dot.video.active { color: #1E6E64; }
.gallery-dot.video svg { display: block; }

.product-info h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.2; }
.product-desc { color: var(--ink-soft); margin: 14px 0 22px; max-width: 55ch; }

.add-form { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.add-form input[type="number"] {
  width: 74px; padding: 11px 10px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 15px;
}

.product-perks { list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-soft); }
.related-title { margin-top: 48px; }

/* ---------- Album editor chrome ---------- */
.editor-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 14px; margin: 0 0 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.editor-bar .customize-title { font-size: 20px; margin: 0; }
.editor-bar-right { display: flex; align-items: center; gap: 14px; }
.editor-price { font-weight: 800; font-size: 19px; }

.editor-pager {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 4px 0 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
.pg-btn {
  border: 1px solid var(--line); background: var(--card);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 14px;
}
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-label { font-weight: 700; font-size: 14px; }
.pg-sep { flex: 1; }
.view-toggle {
  display: flex; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
}
.view-toggle button {
  border: 0; background: var(--card); padding: 8px 12px;
  cursor: pointer; font-size: 13.5px;
}
.view-toggle button.active { background: var(--magenta); color: #fff; }
.zoom-ctl { display: flex; align-items: center; gap: 6px; }
.zoom-ctl button {
  width: 32px; height: 32px; border: 1px solid var(--line); background: var(--card);
  border-radius: 8px; cursor: pointer; font-size: 17px; line-height: 1;
}
.zoom-ctl span { font-size: 13px; min-width: 44px; text-align: center; }

.spread-wrap { margin: 0 auto 22px; width: 100%; transition: width .15s; }
.sp-hidden { display: none; }

/* ---- one-click album auto layout ---- */

/* the strip in the page that opens the wizard */
.auto-launch {
  display: flex; gap: 12px; align-items: center; margin: 0 0 18px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: linear-gradient(180deg, #fff8fb 0%, #ffffff 100%);
}
.auto-spark { font-size: 22px; line-height: 1; }
.auto-launch-text { display: flex; flex-direction: column; gap: 2px; }
.auto-launch-text small { color: #666; font-size: 12.5px; }
.auto-launch .btn { margin-left: auto; flex: 0 0 auto; }

/* the wizard itself */
body.auto-open { overflow: hidden; }
.auto-modal {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 20, 24, .62);
}
/* Same trap as `.slot-tools` further down: any rule of ours that sets
   `display` beats the browser's own [hidden] rule, because author styles
   win over the user-agent stylesheet. Without this the wizard is permanently
   on screen and both footer buttons show on every step. */
.auto-modal[hidden], .auto-foot .btn[hidden], .auto-foot .pg-btn[hidden],
.auto-step[hidden], .auto-head button[hidden],
.auto-steps[hidden] { display: none !important; }
.auto-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 620px;
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.auto-head {
  display: flex; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.auto-head h3 { margin: 0; font-size: 17px; }
.auto-head button {
  margin-left: auto; border: none; background: none; font-size: 17px;
  cursor: pointer; color: #666; line-height: 1;
}

.auto-steps {
  display: flex; gap: 6px; margin: 0; padding: 12px 16px 0;
  list-style: none; counter-reset: s;
}
.auto-steps li {
  flex: 1; font-size: 12px; color: #999; text-align: center;
  padding-top: 16px; position: relative; counter-increment: s;
}
.auto-steps li::before {
  content: counter(s); position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%;
  background: #e6e6e6; color: #777; font-size: 11px; line-height: 18px;
}
.auto-steps li.on { color: var(--magenta); font-weight: 700; }
.auto-steps li.on::before { background: var(--magenta); color: #fff; }
.auto-steps li.did::before { content: "✓"; background: #1e6e64; color: #fff; }

.auto-step { padding: 14px 16px 0; overflow-y: auto; }
.auto-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px dashed #cfd4da; border-radius: 12px; padding: 22px 16px;
  cursor: pointer; text-align: center; background: #fbfcfd;
}
.auto-drop.over { border-color: var(--magenta); background: #fff3f8; }
.auto-drop small { color: #666; font-size: 12.5px; }
.auto-drop-icon { font-size: 26px; }
/* Once there are photos to look at, the picker stops being the main event
   and gets out of the way — on a phone the thumbnails are what the customer
   wants the screen for. */
.auto-drop.compact { padding: 10px 14px; flex-direction: row; gap: 8px; }
.auto-drop.compact .auto-drop-icon { font-size: 17px; }
.auto-drop.compact strong { font-size: 13.5px; font-weight: 600; }
.auto-drop.compact small { display: none; }
.auto-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; margin: 12px 0 0; max-height: 30vh; overflow-y: auto;
}
.auto-thumb { position: relative; aspect-ratio: 1; }
.auto-thumb img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  display: block; background: #eee;
}
/* Inside the tile, not overhanging it. `.auto-thumbs` scrolls, and a
   scroll container clips on both axes whatever the overflow shorthand
   says — an overhanging button loses its corner on the last column. */
.auto-thumb-x {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: rgba(23, 23, 27, .78);
  color: #fff; font-size: 11px; cursor: pointer; line-height: 22px;
  padding: 0;
}
.auto-thumb-x:hover, .auto-thumb-x:focus { background: #b3261e; }
.auto-count { font-size: 13px; margin: 10px 0 0; }

.auto-q { font-weight: 700; margin: 0 0 10px; }

/* step 0 — auto or manual */
.auto-step-fork { padding-top: 18px; }
.auto-forks { display: flex; gap: 12px; flex-wrap: wrap; }
.auto-fork {
  flex: 1 1 210px; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 16px 14px; background: #fff; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
}
.auto-fork:hover, .auto-fork:focus-visible {
  border-color: var(--magenta); background: #fff8fb;
}
.auto-fork small { color: #666; font-size: 12.5px; line-height: 1.45; }
.auto-fork-icon { font-size: 24px; line-height: 1; }
.auto-fork em {
  font-style: normal; font-size: 11.5px; font-weight: 700; margin-top: auto;
  color: var(--magenta); text-transform: uppercase; letter-spacing: .4px;
}
.auto-picks { display: flex; gap: 10px; flex-wrap: wrap; }
.auto-pick {
  flex: 1 1 150px; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px; background: #fff; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.auto-pick.on { border-color: var(--magenta); background: #fff3f8; }
.auto-pick small { color: #666; font-size: 12px; }
.auto-pick em {
  font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--magenta); min-height: 15px;
}
/* little diagrams of what each density looks like */
.auto-mini {
  display: grid; gap: 3px; width: 56px; height: 26px; margin-bottom: 4px;
  background: #eef1f4; border-radius: 4px; padding: 3px;
}
.auto-mini i { background: #b9c2cb; border-radius: 2px; display: block; }
.auto-mini-more { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.auto-mini-bal { grid-template-columns: 1fr 1fr; }
.auto-mini-one { grid-template-columns: 1fr; }
.auto-pick.on .auto-mini { background: #ffe3ef; }
.auto-pick.on .auto-mini i { background: var(--magenta); }
.auto-quote { font-size: 13px; color: #333; margin: 12px 0 0; }

.auto-step-work { text-align: center; padding-top: 26px; }
.auto-spin {
  width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%;
  border: 3px solid #eee; border-top-color: var(--magenta);
  animation: auto-spin 0.9s linear infinite;
}
@keyframes auto-spin { to { transform: rotate(360deg); } }
.auto-work-line { font-weight: 600; margin: 0 0 12px; }
.auto-bar {
  height: 6px; border-radius: 4px; background: #eee; overflow: hidden;
}
.auto-bar span {
  display: block; height: 100%; width: 0; background: var(--magenta);
  transition: width .2s;
}
.auto-note { font-size: 12px; margin: 12px 0 0; }
.auto-status { font-size: 13px; padding: 10px 16px 0; margin: 0; }
.auto-ok { color: #1e6e64; font-weight: 600; }
.auto-warn { color: #8a6100; }
.auto-err { color: #b3261e; }

.auto-foot {
  display: flex; gap: 10px; align-items: center; padding: 14px 16px;
  margin-top: auto; border-top: 1px solid var(--line);
}
.auto-foot-gap { flex: 1; }

@media (max-width: 560px) {
  .auto-box { max-height: 96vh; }
  .auto-launch { flex-wrap: wrap; }
  .auto-launch .btn { margin-left: 0; width: 100%; }
  .auto-picks { flex-direction: column; }
  .auto-pick { flex-direction: row; text-align: left; gap: 10px; }
  .auto-pick .auto-mini { margin-bottom: 0; }
  .auto-pick em { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .auto-spin { animation-duration: 2.5s; }
}

.editor-thumbs {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px;
}
.editor-thumb {
  flex: 0 0 auto; width: 130px; border: 2px solid var(--line);
  border-radius: 10px; background: var(--card); cursor: pointer;
  padding: 4px; display: grid; gap: 4px;
}
.editor-thumb span { font-size: 12px; font-weight: 600; }
.editor-thumb.active { border-color: var(--magenta); }

/* mini spread inside a thumbnail: background + photo-slot placements */
.mini-spread {
  position: relative; width: 100%; aspect-ratio: 2 / 1;
  border-radius: 6px; overflow: hidden; background: #efeae2;
}
.mini-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.mini-slot {
  position: absolute; background: rgba(120, 130, 140, .5);
  border: 1px solid rgba(255, 255, 255, .8); overflow: hidden;
}
.mini-slot.filled { background: none; }
.mini-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Text tool */
.text-box {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; cursor: move; user-select: none;
  font-weight: 700; line-height: 1.15; z-index: 5;
  padding: 2px 6px; border: 1.5px dashed transparent; border-radius: 6px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .25);
}
.text-box.active { border-color: var(--magenta); }
.text-box[contenteditable="true"] {
  cursor: text; user-select: text; outline: none;
  background: rgba(255, 255, 255, .6);
}
.text-toolbar {
  position: fixed; z-index: 200; display: flex; gap: 6px; align-items: center;
  background: #222; padding: 6px 8px; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.text-toolbar button {
  border: 0; background: #444; color: #fff; border-radius: 6px;
  min-width: 30px; height: 28px; cursor: pointer; font-size: 13px;
}
.text-toolbar .tb-color {
  width: 22px; min-width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff;
}

/* Layout picker modal */
.layout-modal[hidden], .text-toolbar[hidden] { display: none !important; }
.layout-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .5);
  display: grid; place-items: center; padding: 20px;
}
.layout-modal-box {
  background: var(--card); border-radius: var(--radius);
  max-width: 720px; width: 100%; max-height: 80vh; overflow: auto;
  padding: 18px 20px;
}
.layout-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.layout-modal-head h3 { font-size: 18px; }
.layout-modal-head button {
  border: 0; background: none; font-size: 18px; cursor: pointer;
}
.layout-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.layout-item {
  border: 2px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 6px; cursor: pointer; display: grid; gap: 6px;
}
.layout-item:hover { border-color: var(--magenta); }
.layout-item img {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 6px;
}
.layout-item span { font-size: 13px; font-weight: 600; }

/* Album text previews on the product page */
.prev-text {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; font-weight: 700; line-height: 1.15;
  pointer-events: none; z-index: 5;
}

/* ---------- Album theme picker ---------- */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.theme-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  color: inherit; display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.theme-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.theme-cover {
  aspect-ratio: 4 / 3; background: #F4EFE7;
  display: grid; place-items: center; overflow: hidden;
}
.theme-cover img { width: 100%; height: 100%; object-fit: cover; }
.theme-cover-fallback { font-size: 54px; }
.theme-body { padding: 14px 16px 18px; display: grid; gap: 6px; }
.theme-body h3 { font-size: 17px; }
.theme-meta { font-size: 13px; color: var(--ink-soft); }
.theme-body .btn { justify-self: start; margin-top: 4px; }
/* Theme strip on the product page */
.theme-strip {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.theme-mini {
  width: 92px; text-decoration: none; color: inherit; text-align: center;
  display: grid; gap: 6px;
}
.theme-mini-cover {
  display: grid; place-items: center; aspect-ratio: 1;
  border: 2px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #F4EFE7; font-size: 30px; transition: border-color .15s;
}
.theme-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.theme-mini:hover .theme-mini-cover { border-color: var(--magenta); }
.theme-mini-name { font-size: 13px; font-weight: 600; }

.theme-chip {
  display: inline-block; font-size: 13px; font-weight: 600;
  background: #FDEAF2; color: var(--magenta);
  border-radius: 999px; padding: 4px 12px; vertical-align: middle;
  margin-left: 8px;
}

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 30px; align-items: start; }

.cart-row {
  display: grid; grid-template-columns: 72px 1fr auto auto auto;
  gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
}
.cart-thumb {
  width: 72px; height: 72px; border-radius: 10px; display: grid;
  place-items: center; font-size: 30px; text-decoration: none; overflow: hidden;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info h3 { font-size: 15.5px; }
.cart-info h3 a { text-decoration: none; }
.qty-form { display: flex; gap: 8px; align-items: center; }
.qty-form input { width: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.cart-line-total { font-weight: 800; }
.remove-btn {
  border: none; background: transparent; cursor: pointer; font-size: 16px;
  color: var(--ink-soft); padding: 6px;
}
.remove-btn:hover { color: var(--magenta); }

.cart-summary {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  position: sticky; top: 130px;
}
.cart-summary h2 { font-family: var(--font-display); font-size: 21px; margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; padding: 7px 0; color: var(--ink-soft); }
.summary-total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px;
  font-weight: 800; font-size: 19px; color: var(--ink);
}
.cart-summary .btn { margin-top: 14px; }
.continue-link { display: block; text-align: center; margin-top: 14px; font-size: 14px; }

/* ---------- Trust row ---------- */
.trust-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.trust-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.trust-item span { font-size: 26px; }
.trust-item p { font-size: 14px; color: var(--ink-soft); }
.trust-item strong { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C9D2E6; margin-top: 40px; }
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 30px; padding: 44px 20px 30px; font-size: 14px;
}
.footer-logo { font-family: var(--font-display); font-size: 22px; color: #fff; margin-bottom: 8px; }
.footer-logo em { font-style: normal; color: var(--marigold); }
.site-footer h4 { color: #fff; margin-bottom: 10px; font-size: 14px; letter-spacing: 0.5px; }
.site-footer a { display: block; color: #C9D2E6; text-decoration: none; padding: 3px 0; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center;
  padding: 16px; font-size: 13px;
}
.footer-bottom a { display: inline; color: #C9D2E6; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Info / legal / FAQ pages ---------- */
.info-page { max-width: 820px; }
.info-head { margin-bottom: 26px; }
.info-head h1 { font-family: var(--font-display); font-size: 30px; }
.info-head p { margin-top: 8px; }

.legal h1 { font-family: var(--font-display); font-size: 30px; margin-bottom: 6px; }
.legal h2 {
  font-size: 19px; margin: 26px 0 8px; padding-top: 6px;
}
.legal p, .legal li { color: var(--ink-soft); line-height: 1.7; }
.legal ul { margin: 8px 0 8px 20px; display: grid; gap: 6px; }
.legal a { color: var(--magenta); }

.faq-group { margin-bottom: 26px; }
.faq-group-title {
  font-size: 18px; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}
.faq-item {
  border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 10px; background: var(--card); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "＋"; color: var(--magenta); font-size: 20px; flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 16px 16px; }
.faq-answer p { color: var(--ink-soft); line-height: 1.7; margin: 0; }

.info-cta {
  margin-top: 30px; padding: 24px; text-align: center;
  background: #FDEAF2; border-radius: var(--radius);
}
.info-cta p { margin-bottom: 12px; font-weight: 600; }

/* Checkout discounts */
.summary-discount { color: #1E8E5A; }
.wallet-toggle {
  display: flex; gap: 10px; align-items: center; margin-top: 16px;
  padding: 12px 14px; border: 1.5px dashed var(--magenta);
  border-radius: 10px; background: #FDEAF2; cursor: pointer; font-size: 14.5px;
}

/* Refer & Earn */
.refer-hero { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.refer-hero h1 { font-family: var(--font-display); font-size: 30px; }
.refer-hero p { margin-top: 10px; }
.refer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 30px;
}
.refer-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; background: var(--card);
}
.refer-card h2 { font-size: 18px; margin-bottom: 12px; }
.invite-row { display: flex; gap: 8px; }
.invite-row input {
  flex: 1; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; background: #faf7f2;
}
.share-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wallet-card { text-align: center; display: grid; align-content: start; gap: 6px; }
.wallet-balance {
  font-family: var(--font-display); font-size: 40px; color: var(--magenta);
}
.refer-stats { display: flex; justify-content: center; gap: 22px; margin-top: 10px; }
.refer-stats strong { font-size: 20px; }
.refer-subhead { font-size: 20px; margin: 24px 0 12px; }
.refer-steps { margin-left: 20px; display: grid; gap: 8px; color: var(--ink-soft); }
.wallet-history { display: grid; gap: 8px; max-width: 560px; }
.wallet-txn {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px;
}
.wallet-txn .credit { color: #1E8E5A; font-weight: 700; }
.wallet-txn .debit { color: var(--ink-soft); font-weight: 700; }
@media (max-width: 700px) { .refer-grid { grid-template-columns: 1fr; } }

/* My Account */
.account-page { max-width: 900px; }
.account-title { font-family: var(--font-display); font-size: 28px; margin-bottom: 18px; }
.account-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.account-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 26px; font-weight: 800;
  color: var(--magenta); border: 2px solid var(--magenta); background: #FDEAF2;
}
.account-head h2 { font-size: 20px; }
.account-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.account-tile {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 22px 16px; text-decoration: none;
  color: inherit; text-align: center; display: grid; gap: 6px;
  transition: box-shadow .15s, transform .15s;
}
.account-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.account-ic { font-size: 30px; }
.account-tile span:not(.account-ic) { font-weight: 700; }
.account-tile small { color: var(--ink-soft); }
.account-logout { margin-top: 24px; }

/* Address book */
.address-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.address-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; background: var(--card);
}
.address-card.is-default { border-color: var(--magenta); }
.addr-badge {
  position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700;
  background: #FDEAF2; color: var(--magenta); padding: 3px 10px; border-radius: 999px;
}
.address-card h3 { font-size: 17px; margin-bottom: 6px; }
.address-card p { color: var(--ink-soft); line-height: 1.5; }
.addr-actions { display: flex; gap: 8px; margin-top: 14px; }
.address-add {
  display: grid; place-items: center; text-decoration: none; color: var(--magenta);
  font-weight: 700; border-style: dashed; min-height: 120px;
}
.field-wide { grid-column: 1 / -1; }

/* Saved designs */
.design-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.design-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--card);
}
.design-thumb { display: block; aspect-ratio: 1; background: #f4efe7; }
.design-thumb img { width: 100%; height: 100%; object-fit: cover; }
.design-body { padding: 12px 14px 16px; }
.design-body h3 { font-size: 15px; }
.design-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Checkout — address select + summary */
.checkout-layout {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start;
}
.co-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.co-block-title { font-size: 18px; }
.co-dot { color: var(--magenta); }
.addr-select { display: grid; gap: 12px; }
.addr-option {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 16px;
  cursor: pointer; background: var(--card);
}
.addr-option.chosen { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(229,57,122,.10); }
.addr-option input { margin-top: 4px; }
.addr-option-body { display: grid; gap: 3px; }
.addr-option-body strong { font-size: 15.5px; }
.addr-option-body span { color: var(--ink-soft); font-size: 14px; }
.addr-edit-link { justify-self: start; color: var(--magenta); font-size: 13px; margin-top: 4px; }

.co-summary-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; background: var(--card); position: sticky; top: 16px;
  display: grid; gap: 10px;
}
.btn-block { width: 100%; }
.co-or { text-align: center; position: relative; color: var(--ink-soft); font-size: 13px; }
.co-or span { background: var(--card); padding: 0 10px; position: relative; z-index: 1; }
.co-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }

/* Two-type payment buttons (Continue to Payment / Share Payment Link) */
.co-paybtn {
  text-transform: uppercase; letter-spacing: .6px; font-weight: 800;
  font-size: 15px; padding: 14px 12px; border-radius: 8px;
}
.co-sharebtn {
  text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
  font-size: 14px; padding: 12px; border-radius: 8px;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line);
}
.co-sharebtn:hover { border-color: var(--magenta); color: var(--magenta); }
.trust-mini { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--ink-soft); text-align: center; margin: 4px 0; }
.co-cart-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
/* Checkout summary lines — a thumbnail per item, so the customer can see
   on the last page before paying that this is the design they made. */
.co-line {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: var(--ink-soft);
}
.co-line-thumb {
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--wash, #F4F1EA);
  display: grid; place-items: center;
  flex: none;
}
.co-line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-line-icon { font-size: 20px; line-height: 1; }
.co-line-text { min-width: 0; }
/* keep "× 2" together — it was breaking between the sign and the number
   and landing on a line of its own */
.co-line-text .muted { white-space: nowrap; }
.co-line-price { font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 420px) {
  .co-line { grid-template-columns: 32px 1fr auto; gap: 8px; }
  .co-line-thumb { width: 32px; height: 32px; }
}

.share-link-box { background: #FDEAF2; border-radius: 12px; padding: 14px; margin: 10px 0; display: grid; gap: 8px; }
@media (max-width: 820px) { .checkout-layout { grid-template-columns: 1fr; } }

/* Share payment link page */
.sharepay-card {
  max-width: 430px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  display: grid; gap: 12px; box-shadow: var(--shadow);
}
.sharepay-brand { text-align: center; display: grid; gap: 2px; }
.sharepay-logo { font-size: 24px; font-weight: 800; color: var(--ink); }
.sharepay-logo em { font-style: normal; color: var(--magenta); }
.sharepay-logo sup { font-size: 11px; font-weight: 600; }
.sharepay-since { font-size: 11px; letter-spacing: 2px; color: var(--ink-soft); }
.sharepay-timer {
  width: 120px; height: 120px; margin: 4px auto 0; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--magenta) 1turn, #eee 0turn);
  box-shadow: 0 0 0 3px #f0e6ef;
}
.sharepay-timer span {
  /* the "donut hole": an inner disc that turns the pie into a ring and
     gives the countdown number a clean background to sit on */
  width: 98px; height: 98px; border-radius: 50%;
  background: var(--card, #fff);
  display: grid; place-items: center;
  font-size: 25px; font-weight: 800; color: var(--magenta);
  font-variant-numeric: tabular-nums;
}
.sharepay-amount {
  background: #FDEAF2; border-radius: 12px; padding: 16px; text-align: center;
  display: grid; gap: 4px;
}
.sharepay-amount span { color: var(--ink-soft); font-size: 13px; }
.sharepay-amount strong { font-size: 30px; color: var(--magenta); }
.sharepay-linkhead { display: flex; justify-content: space-between; font-size: 13px; }
.sharepay-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sharepay-actions .btn { padding: 10px; font-size: 13px; color: #fff; }
.sp-sms { background: #F5A623; } .sp-share { background: #7A5CFF; } .sp-wa { background: #25D366; }
.sharepay-waiting { text-align: center; color: var(--ink-soft); font-size: 14px; }
.sharepay-waiting .dots i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--magenta); margin: 0 2px; animation: spb 1s infinite alternate;
}
.sharepay-waiting .dots i:nth-child(2) { animation-delay: .2s; }
.sharepay-waiting .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes spb { from { opacity: .3; } to { opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; gap: 12px; }
  .search-form { order: 3; flex-basis: 100%; max-width: none; }
  .hero-inner { grid-template-columns: 1fr; padding: 40px 20px; }
  .product-layout, .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cart-row { grid-template-columns: 60px 1fr; grid-auto-rows: auto; }
  .cart-row .qty-form, .cart-line-total { grid-column: 2; }
}

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

/* ---------- Customiser & frame preview ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.customize-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.customize-title { font-family: var(--font-display); font-size: 27px; }

.orient-toggle { display: flex; gap: 10px; margin: 10px 0 20px; }
.orient-btn {
  padding: 10px 30px; border-radius: 8px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.orient-btn.active {
  border-color: #2D9CDB; color: #2D9CDB;
  box-shadow: 0 0 0 3px rgba(45, 156, 219, 0.15);
}

.editor-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.editor-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.toolbar-spacer { flex: 1; }
.tool-btn {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; font-size: 17px; cursor: pointer;
}
.tool-btn:hover { background: #F3EEE4; }

.editor-canvas {
  background: #F5EFDD;             /* the beige stage from the reference */
  display: grid; place-items: center;
  padding: 52px 40px 86px;         /* room for the gizmo + rotate handle */
  min-height: 440px;
}

/* The frame stage: real artwork with the photo window positioned inside.
   Shared by the customiser and the product preview. */
.art-frame {
  position: relative; width: 100%;
  aspect-ratio: 10 / 14;        /* sensible default until JS sets the real one */
  background: transparent;      /* round/shaped frames show the stage */
}
.art-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
  filter: drop-shadow(0 14px 24px rgba(30, 42, 69, 0.30)); /* hugs the shape */
}
.art-window {
  position: absolute; overflow: hidden; background: #fff;
  touch-action: none; cursor: grab;
}
.art-window:active { cursor: grabbing; }
.art-window img.photo {
  position: absolute; left: 50%; top: 50%; width: 100%; height: auto;
  transform-origin: center center; will-change: transform;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.frame-stage .art-window { cursor: default; }

/* Transform gizmo (Printshoppy-style selection handles) */
.gizmo-wrap { position: relative; width: min(480px, 88vw); max-width: 100%; }
.gizmo {
  position: absolute; inset: -26px;
  border: 1.5px solid #7BC7E8; border-radius: 2px;
  pointer-events: none; z-index: 5;
}
.gz-handle {
  /* 32px invisible hit area with a 15px visual square in the middle —
     easy to grab with mouse or thumb */
  position: absolute; width: 32px; height: 32px;
  background: transparent; border: none;
  pointer-events: auto; touch-action: none;
  display: grid; place-items: center;
}
.gz-handle::after {
  content: ""; width: 15px; height: 15px;
  background: #fff; border: 1.5px solid #7BC7E8; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(30, 42, 69, 0.18);
}
.gz-handle:hover::after { border-color: #2D9CDB; transform: scale(1.15); }
.gz-handle.tl { left: -16px;  top: -16px;    cursor: nwse-resize; }
.gz-handle.tr { right: -16px; top: -16px;    cursor: nesw-resize; }
.gz-handle.bl { left: -16px;  bottom: -16px; cursor: nesw-resize; }
.gz-handle.br { right: -16px; bottom: -16px; cursor: nwse-resize; }
.gz-rotate {
  position: absolute; left: 50%; bottom: -58px; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1.5px solid #7BC7E8; color: #2D9CDB;
  display: grid; place-items: center; font-size: 19px;
  pointer-events: auto; touch-action: none; cursor: grab;
  box-shadow: 0 2px 8px rgba(30, 42, 69, 0.15);
}
.gz-rotate:hover { border-color: #2D9CDB; }
.gz-rotate:active { cursor: grabbing; }
.gz-readout {
  position: absolute; left: 50%; top: -44px; transform: translateX(-50%);
  background: #17171B; color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; pointer-events: none;
  white-space: nowrap;
}
body.gz-dragging { user-select: none; -webkit-user-select: none; }
body.gz-dragging * { cursor: inherit; }

/* Frame model swatches */
.customize-options {
  display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start;
}
.style-swatches {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 34px;
}
.style-swatch {
  width: 54px; height: 54px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--line); position: relative;
  background-size: cover; background-position: center; padding: 0;
}
.style-swatch.active {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(229, 57, 122, 0.2);
}
.style-swatch span {
  position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  font-size: 11px; color: var(--ink-soft); white-space: nowrap;
}

.select-photo-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: none; cursor: pointer; z-index: 5;
  background: linear-gradient(135deg, #2D9CDB 0%, #1B7FBF 100%);
  color: #fff; font-weight: 700; font-size: 14.5px;
  padding: 13px 24px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(45, 156, 219, 0.38);
  transition: transform .12s ease, box-shadow .12s ease;
}
.select-photo-overlay::before { content: "📷"; font-size: 18px; }
.select-photo-overlay:hover {
  transform: translate(-50%, -50%) translateY(-1px);
  box-shadow: 0 8px 22px rgba(45, 156, 219, 0.48);
}
.select-photo-overlay[hidden] { display: none !important; }

.editor-tip {
  padding: 12px 16px; font-size: 13.5px; color: var(--ink-soft);
  border-top: 1px solid var(--line); text-align: center;
}

/* Product page: frame preview stage */
.frame-stage {
  background: #ECEBE9; border-radius: var(--radius);
  display: grid; place-items: center; padding: 44px 20px;
  position: relative; min-height: 420px;
}
.frame-stage .frame-box { cursor: default; }
.edit-again { position: absolute; top: 14px; right: 14px; background: #fff; }

/* Size pills */
.field-label { font-weight: 700; margin-bottom: 8px; letter-spacing: 0.3px; }
.muted { color: var(--ink-soft); font-weight: 400; }
.small { font-size: 13.5px; margin-top: 10px; }

.size-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.size-pill input { position: absolute; opacity: 0; pointer-events: none; }
.size-pill span {
  display: inline-block; padding: 10px 26px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  font-weight: 600; font-size: 15px;
}
.size-pill input:checked + span {
  border-color: #2D9CDB; color: #2D9CDB;
  box-shadow: 0 0 0 3px rgba(45, 156, 219, 0.15);
}
.size-pill input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 2px; }

.sel-meta { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }

.btn-cta {
  background: var(--marigold); color: var(--ink); font-size: 16px;
  padding: 14px 30px; border-radius: 10px;
}
.buy-form { margin: 6px 0 22px; }

/* ---------- Checkout ---------- */
.checkout-form {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 700; }
.field input, .field textarea, .field select {
  padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 9px;
  font-size: 15px; font-family: inherit; background: #fff;
  width: 100%; height: 46px; line-height: 1.3; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.field textarea { height: auto; }
.field select {
  cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(229, 57, 122, .12);
}
.field.has-error input, .field.has-error textarea,
.field.has-error select { border-color: #D93A3A; }
.field small { font-size: 12px; }

/* Carded form (address / edit account) */
.form-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.form-card .field-grid { gap: 16px 18px; }
.form-error { color: #D93A3A; font-size: 14px; margin: 12px 0 4px; }
.checkout-form .btn { margin-top: 16px; }
.checkout-form .muted { margin-top: 14px; }
@media (max-width: 700px) { .field-grid { grid-template-columns: 1fr; } }

.success-page { text-align: center; }
.success-mark {
  width: 72px; height: 72px; margin: 0 auto 14px;
  display: grid; place-items: center;
}
.success-ring {
  stroke: var(--success, #16a34a); stroke-width: 3;
  stroke-dasharray: 158; stroke-dashoffset: 158;
  animation: success-ring 0.5s ease-out forwards;
}
.success-tick {
  stroke: var(--success, #16a34a); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: success-tick 0.35s 0.4s ease-out forwards;
}
@keyframes success-ring { to { stroke-dashoffset: 0; } }
@keyframes success-tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .success-ring, .success-tick { animation: none; stroke-dashoffset: 0; }
}
.success-lead { margin-left: auto; margin-right: auto; }
.success-summary { max-width: 460px; margin: 26px auto; text-align: left; position: static; }
.paid-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #e7f6ec; color: #15803d;
  font-weight: 600; font-size: 13px;
  padding: 3px 10px; border-radius: 999px;
}
.success-page .btn-cta { margin-top: 8px; display: inline-block; }

/* ---------- Header account links ---------- */
.header-links { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.header-links a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.header-links a:hover { color: var(--marigold); }
.header-links .cart-link { margin-left: 0; }

/* ---------- OTP login card ---------- */
.otp-card {
  max-width: 480px; margin: 24px auto 34px;
  background: #F0FAF8; border: 1.5px solid #9FD8CE; border-radius: 14px;
  padding: 34px 36px 30px;
}
.otp-title {
  text-align: center; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: #6B7280; font-size: 21px;
  border-bottom: 1px solid #C8C2B4; padding-bottom: 16px; margin-bottom: 22px;
}
.otp-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.req { color: #D93A3A; }
.phone-group { display: flex; border: 1.5px solid #D5D0C4; border-radius: 8px; overflow: hidden; background: #fff; }
.phone-prefix {
  background: #F3F1EA; padding: 12px 14px; font-weight: 700;
  border-right: 1.5px solid #D5D0C4;
}
.phone-group input {
  flex: 1; border: none; padding: 12px 14px; font-size: 16px; min-width: 0;
}
.phone-group input:focus { outline: none; }
.phone-group:focus-within { border-color: #2D9CDB; }
.btn-otp {
  width: 100%; margin-top: 18px; background: #2D9CDB; color: #fff;
  text-transform: uppercase; letter-spacing: 1px; padding: 13px;
}
.otp-input {
  width: 100%; border: 1.5px solid #D5D0C4; border-radius: 8px;
  padding: 12px 14px; font-size: 20px; letter-spacing: 8px; text-align: center;
  background: #fff;
}
.otp-sent { margin-bottom: 14px; font-size: 14.5px; }
.resend-form { display: flex; justify-content: center; gap: 22px; margin-top: 16px; }
.link-btn {
  background: none; border: none; color: #2D9CDB; cursor: pointer;
  font-size: 13.5px; text-decoration: underline; padding: 0;
}
.login-trust { margin-top: 10px; }

/* ---------- My orders ---------- */
.orders-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.order-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px;
}
.order-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.order-card-head h2 { font-size: 18px; }
.status-pill {
  padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: #EEE9DC; color: var(--ink);
}
.status-pill.status-confirmed { background: #DCEBFB; color: #1B5FA8; }
.status-pill.status-in_production { background: #FFF0CC; color: #8A6100; }
.status-pill.status-shipped { background: #E4DAFB; color: #5A34B0; }
.status-pill.status-delivered { background: #DCF3E3; color: #1B7A3D; }
.status-pill.status-cancelled { background: #FBDcDC; color: #A82626; }

.tracker {
  list-style: none; display: flex; margin: 20px 0 6px; padding: 0;
}
.tracker li {
  flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-soft);
  position: relative; padding-top: 22px;
}
.tracker .dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #E4DFD2; border: 3px solid #E4DFD2;
}
.tracker li::before {
  content: ""; position: absolute; top: 7px; left: -50%; width: 100%;
  height: 3px; background: #E4DFD2;
}
.tracker li:first-child::before { display: none; }
.tracker li.done .dot, .tracker li.done::before { background: #1B8A4C; border-color: #1B8A4C; }
.tracker li.current .dot { background: #fff; border-color: #1B8A4C; }
.tracker li.current::before { background: #1B8A4C; }
.tracker li.current { color: var(--ink); font-weight: 700; }

.cancelled-note { color: #A82626; font-weight: 700; margin: 14px 0 4px; }
.order-items { list-style: none; margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.order-items li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 14.5px; padding: 4px 0; color: var(--ink-soft);
}
.order-items li span { color: var(--ink); font-weight: 600; }

@media (max-width: 860px) {
  .header-links { order: 2; }
  .tracker li { font-size: 10.5px; }
}


/* ---------- Secure-checkout chrome (Printshoppy-style) ---------- */
.checkout-header {
  background: #fff; border-bottom: 2px solid #E8ECF3;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px; padding: 16px 34px;
}
.co-logo {
  font-family: var(--font-display); font-size: 26px; color: var(--ink);
  text-decoration: none; display: flex; flex-direction: column; line-height: 1;
  width: fit-content;
}
.co-logo em { font-style: normal; color: var(--marigold); display: inline; }
.co-logo span {
  font-family: var(--font-body); font-size: 9px; letter-spacing: 3px;
  color: var(--ink-soft); margin-top: 4px; text-align: center;
}
.progress-wrap {
  position: relative; width: min(560px, 42vw); height: 24px;
  background: #E4E7EC; border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: #4CAF50; border-radius: 999px;
}
.progress-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.secure-note {
  justify-self: end; color: #6B7280; font-size: 14.5px; white-space: nowrap;
}
@media (max-width: 800px) {
  .checkout-header { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 14px 16px; }
  .progress-wrap { width: 100%; }
  .secure-note { justify-self: center; }
}

.co-page { max-width: 1180px; }
.co-heading {
  border-bottom: none; text-align: center; margin: 8px 0 22px;
}

/* Refine the OTP card to the mint reference look */
.otp-card {
  background: linear-gradient(160deg, #EAF9F5 0%, #F4FCFA 100%);
  border-color: #7ECEC0;
  box-shadow: 0 4px 18px rgba(126, 206, 192, 0.25);
}

/* ---------- Trust columns ---------- */
.trust-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 34px; margin-top: 44px; align-items: start;
}
.trust-col h3 {
  text-align: center; font-weight: 500; font-size: 19px;
  color: #1F2937; margin-bottom: 16px;
}
.info-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 9px;
  padding: 15px 18px; margin-bottom: 12px;
  font-size: 15.5px; color: #1F2937;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
}
.ir-icon { font-size: 22px; }
.ir-arrow { margin-left: auto; color: #9CA3AF; font-size: 20px; }
@media (max-width: 860px) { .trust-cols { grid-template-columns: 1fr; gap: 22px; } }

/* My orders page polish */
.orders-head { flex-direction: column; align-items: center; }
.orders-sub { margin-top: -12px; margin-bottom: 18px; }
.order-card {
  border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
}
.order-items li {
  background: #FAFAF7; border: 1px solid #EFECE4; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 8px;
}
.order-items { border-top: none; padding-top: 4px; }

/* Error pages (404 / 403 / 400). 500 is standalone and carries its own
   styles, because a 500 may mean the database is the thing that broke. */
.errpage { max-width: 520px; margin: 40px auto; text-align: center; }
.errpage-code {
  font-size: 54px; font-weight: 800; color: var(--brand, #E8547F);
  margin: 0 0 6px; line-height: 1;
}
.errpage h1 { font-size: 24px; margin: 0 0 10px; }
.errpage-actions { margin-top: 22px; display: flex; gap: 14px;
                   justify-content: center; align-items: center;
                   flex-wrap: wrap; }

/* Order lines carry the customer's own design.
   Declared AFTER the two earlier .order-items li rules so the grid wins
   over their flex layout without needing !important. */
.order-items li {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
}
.oi-thumb {
  width: 48px; height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #FFF;
  border: 1px solid #EFECE4;
  display: grid; place-items: center;
}
.oi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oi-icon { font-size: 22px; line-height: 1; }
/* Scoped to beat the older `.order-items li span` rule, which is more
   specific than a bare class and would otherwise decide these for us —
   it was making the quantity render as dark as the product name. */
.order-items li .oi-text { min-width: 0; color: var(--ink); font-weight: 600; }
.order-items li .oi-qty {
  color: var(--ink-soft); font-weight: 500;
  white-space: nowrap;                    /* never orphan the "x 3" */
}
.order-items li .oi-price {
  color: var(--ink); font-weight: 700; white-space: nowrap;
}

@media (max-width: 520px) {
  .order-items li { grid-template-columns: 38px 1fr auto; gap: 10px; }
  .oi-thumb { width: 38px; height: 38px; }
  .oi-icon { font-size: 18px; }
}


/* ---------- Payment methods ---------- */
.pay-methods { display: grid; gap: 10px; margin-bottom: 6px; }
.pay-method {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 13px 15px; cursor: pointer; background: #fff;
}
.pay-method:has(input:checked) {
  border-color: #2D9CDB; box-shadow: 0 0 0 3px rgba(45, 156, 219, 0.12);
}
.pay-method input { margin-top: 4px; }
.pay-method small { color: var(--ink-soft); }
.pay-method-only { cursor: default;
  border-color: #2D9CDB; box-shadow: 0 0 0 3px rgba(45, 156, 219, 0.12); }
.pay-card { max-width: 440px; margin-inline: auto; }


/* ---------- Plain canvas / acrylic / album ---------- */
.plain-canvas {
  position: relative; overflow: hidden; background: #EDEDEA;
  touch-action: none; cursor: grab;
  width: min(420px, 82vw);
  box-shadow: 0 12px 26px rgba(30, 42, 69, 0.25);
}
.plain-canvas:active { cursor: grabbing; }
.plain-canvas img.photo {
  position: absolute; left: 50%; top: 50%; width: 100%; height: auto;
  transform-origin: center center; will-change: transform;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
/* acrylic sheen + thick clear edge */
.acrylic { border-radius: 6px; }
.acrylic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.35),
              inset 0 0 22px rgba(255, 255, 255, 0.18);
  background: linear-gradient(115deg, rgba(255,255,255,0.28) 0%,
              rgba(255,255,255,0) 28%);
}

.album-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}
.album-page-title { font-weight: 700; margin-bottom: 8px; }
.album-canvas { width: 100%; background: #fff; border: 1px solid var(--line); }
.album-tools { display: flex; gap: 8px; margin-top: 10px; }

.album-stage { padding: 26px; }
.album-preview-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px; width: 100%;
}
.album-thumb { width: 100%; cursor: default; box-shadow: 0 4px 12px rgba(30,42,69,0.18); }
.page-no {
  position: absolute; left: 8px; bottom: 6px; z-index: 2;
  background: rgba(23,23,27,0.75); color: #fff; font-size: 11px;
  padding: 2px 8px; border-radius: 999px;
}


/* ---------- Album spreads (background + detected slots) ---------- */
.spread {
  position: relative; width: 100%; margin-bottom: 26px;
  box-shadow: 0 10px 24px rgba(30, 42, 69, 0.22); overflow: hidden;
  background: #fff;
}
.spread-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.slot {
  position: absolute; overflow: hidden; background: rgba(255,255,255,0.85);
  outline: 2px dashed rgba(45, 156, 219, 0.65); outline-offset: -2px;
  touch-action: none; cursor: grab;
}
.slot:active { cursor: grabbing; }
.slot.active { outline: 2.5px solid var(--magenta); z-index: 3; }
.slot img.photo {
  position: absolute; left: 50%; top: 50%; width: 100%; height: auto;
  transform-origin: center center; will-change: transform;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.slot-pick {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: none; background: #2D9CDB; color: #fff; font-weight: 700;
  padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  white-space: nowrap;
}
.slot-tools {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  display: flex; gap: 4px; background: rgba(23, 23, 27, 0.82);
  padding: 4px; border-radius: 8px;
}
.slot-tools button {
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: transparent; color: #fff; font-size: 14px; cursor: pointer;
}
.slot-tools button:hover { background: rgba(255, 255, 255, 0.18); }
.slot-static { outline: none; background: #fff; cursor: default; }
.spread-preview-list { width: 100%; }


/* ---------- Fast-load / responsive refinements ---------- */
img { content-visibility: auto; }          /* skip offscreen image work */
.art-frame, .plain-canvas, .spread { contain: layout paint; }

@media (max-width: 640px) {
  .art-frame, .plain-canvas.acrylic { width: min(100%, 92vw); }
  .editor-canvas { padding: 30px 12px 70px; min-height: 320px; }
  .album-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .slot-tools button { width: 32px; height: 32px; }   /* touch targets */
  .size-pill span { padding: 10px 18px; }
  .customize-title { font-size: 22px; }
}
@media (max-width: 420px) {
  .album-grid { grid-template-columns: 1fr; }
}
/* keep interactions crisp during pan/zoom on mobile */
.art-window, .plain-canvas, .slot { will-change: transform; }


/* ---------- Shape templates (wall clocks, cut-outs) ---------- */
.shape-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.shape-tab {
  padding: 8px 18px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--ink-soft);
}
.shape-tab.active { background: #2D9CDB; color: #fff; border-color: #2D9CDB; }

/* ---- Frame model picker: a clean, scalable swatch grid ---- */
.shape-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.shape-cell {
  border: 1.5px solid var(--line); border-radius: 12px;
  background: #faf8f4; cursor: pointer; padding: 8px 6px 30px;
  position: relative; display: block; overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.shape-cell:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
/* the frame thumbnail sits on a soft tile so transparent PNGs read clearly */
.shape-cell img {
  width: 100%; height: 66px; object-fit: contain; display: block;
}
.shape-cell .swatch-color {
  display: block; width: 100%; height: 66px; border-radius: 8px;
}
/* the label is pinned to a footer strip so it can never overlap the frame,
   and long names ellipsize instead of breaking the layout */
.shape-cell span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5px 6px; font-size: 11px; line-height: 1.2;
  color: var(--ink-soft); text-align: center;
  background: #fff; border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shape-cell.active {
  border-color: var(--magenta); border-width: 2px;
  box-shadow: 0 0 0 3px rgba(229, 57, 122, 0.15);
}
.shape-cell.active span { color: var(--magenta); font-weight: 600; }

/* shaped canvas: photo masked to silhouette, face overlay on top */
.plain-canvas.shaped {
  background: transparent; box-shadow: none;
  filter: drop-shadow(0 12px 22px rgba(30, 42, 69, 0.22));
}
.plain-canvas.shaped::after { display: none; }   /* no acrylic sheen */
.shape-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; z-index: 3;
}
@media (max-width: 640px) {
  .shape-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}


/* ---------- Canvas editor v2 (clean two-column) ---------- */
.editor-layout {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px;
  align-items: start; margin-top: 8px;
}
.editor-side .eyebrow { margin-bottom: 12px; }
.editor-main {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.editor-main .editor-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fff;
}
.editor-main .editor-canvas {
  position: relative; background: #F5EFDD;
  display: grid; place-items: center; padding: 40px 20px; min-height: 420px;
}
/* the stage: a fixed aspect box that clips the photo to shape or rectangle */
.canvas-clip {
  position: relative; width: min(440px, 82vw); aspect-ratio: 4 / 5;
  filter: drop-shadow(0 12px 24px rgba(30, 42, 69, 0.24));
}
.canvas-photo {
  position: absolute; inset: 0; overflow: hidden; background: #fff;
  touch-action: none;
}
.canvas-photo.acrylic { border-radius: 8px; }
.canvas-photo img.photo {
  position: absolute; left: 50%; top: 50%; width: 100%; height: auto;
  transform-origin: center center; will-change: transform;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.canvas-clip .shape-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; z-index: 3;
}
.canvas-clip { cursor: grab; }
.canvas-clip:active { cursor: grabbing; }
.select-photo-cta {
  position: absolute; z-index: 5; border: 2px dashed #B9B2A0;
  background: rgba(255,255,255,0.92); color: var(--ink);
  padding: 16px 26px; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.select-photo-cta span { font-size: 20px; }
.editor-main .editor-tip {
  text-align: center; padding: 12px; color: var(--ink-soft);
  font-size: 13px; background: #fff; border-top: 1px solid var(--line);
}

/* shape picker in the side column */
.editor-side .shape-tabs { flex-wrap: wrap; }
.editor-side .shape-grid {
  grid-template-columns: repeat(3, 1fr); gap: 10px;
}
/* The frame model picker scales to any number of frames: a tidy 2-wide
   grid that scrolls inside its own box past a few rows, so a shop with 20
   frames doesn't push the whole editor down the page. */
.editor-side .frame-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 360px; overflow-y: auto;
  padding: 10px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #faf8f4;
  scrollbar-width: thin;
}
/* Each frame is a card: a portrait thumbnail (frames are taller than wide)
   with its label on a clean footer strip below — the label can never
   overlap the frame or the next row, and long names ellipsize. */
.editor-side .frame-grid .style-swatch {
  width: 100%; height: auto; aspect-ratio: auto;
  display: block; position: relative;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 8px 8px 28px; background: #fff; overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.editor-side .frame-grid .style-swatch:hover {
  border-color: var(--ink-soft); transform: translateY(-1px);
}
.editor-side .frame-grid .style-swatch img {
  width: 100%; height: 84px; object-fit: contain; display: block;
}
.editor-side .frame-grid .style-swatch span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5px 6px; margin: 0;
  font-size: 11px; line-height: 1.2; text-align: center;
  color: var(--ink-soft); background: #fff;
  border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-side .frame-grid .style-swatch.active {
  border-color: var(--magenta); border-width: 2px;
  box-shadow: 0 0 0 3px rgba(229, 57, 122, 0.15);
}
.editor-side .frame-grid .style-swatch.active span {
  color: var(--magenta); font-weight: 600;
}
.editor-side .frame-grid .style-swatch .swatch-color {
  width: 100%; height: 84px; border-radius: 6px; display: block;
}

/* ---- Mobile frame picker: bottom sheet instead of an inline grid ----
   On desktop the sidebar has room, so the grid above just renders in
   place and everything below is inert (trigger hidden, sheet chrome
   hidden, backdrop never shown). Under the mobile breakpoint the same
   grid gets promoted into an overlay sheet, and a compact trigger row
   takes its place inline — same pattern as the app's frame picker. */
.frame-trigger { display: none; }
.frame-sheet-backdrop,
.frame-sheet-handle,
.frame-sheet-header { display: none; }

@media (max-width: 860px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-side .shape-grid { grid-template-columns: repeat(4, 1fr); }

  /* On mobile, the "Save & Select Size" button belongs at the END of the
     flow (after the frame options and photo editor), like the album's
     "Save album" — not squeezed under the title before the customer has
     done anything. Let the title sit alone at the top and pin the button
     to the bottom of the viewport as a reachable action bar. */
  .customize-top { margin-bottom: 14px; }
  .customize-top #saveBtn {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    width: 100%; border-radius: 0;
    padding: 15px 16px; font-size: 16px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }
  /* Keep the last controls clear of the fixed bar so nothing hides
     behind it. */
  .editor-layout { padding-bottom: 72px; }

  .frame-trigger {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px; margin-bottom: 20px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    font: inherit; text-align: left; cursor: pointer;
  }
  .frame-trigger-swatch {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    background-color: #eee; background-size: cover; background-position: center;
    border: 1px solid var(--line);
  }
  .frame-trigger-label { flex: 1; font-weight: 600; }
  .frame-trigger-chevron { color: var(--ink-soft); }

  .frame-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .frame-sheet-handle {
    display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--line); margin: 10px auto 4px;
  }
  .frame-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 12px; font-weight: 700;
  }
  .frame-sheet-close {
    border: none; background: none; font-size: 22px; line-height: 1;
    color: var(--ink-soft); cursor: pointer; padding: 4px 8px;
  }
  .frame-sheet-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
    background: #fff; border-radius: 16px 16px 0 0;
    max-height: 75vh; overflow-y: auto;
    transform: translateY(100%); transition: transform .25s ease;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  }
  .frame-sheet.open .frame-sheet-backdrop { opacity: 1; pointer-events: auto; }
  .frame-sheet.open .frame-sheet-panel { transform: translateY(0); }

  /* The panel itself scrolls now, so the grid's own scroll box is
     redundant — and its fixed max-height would just clip more rows. */
  .frame-sheet-panel .frame-grid {
    max-height: none; overflow-y: visible; border: none; background: none;
    padding: 0 16px 16px; margin-bottom: 0;
  }
}
@media (max-width: 480px) {
  .editor-side .shape-grid { grid-template-columns: repeat(3, 1fr); }
}


/* CTA must obey the hidden attribute even with display:flex */
.select-photo-cta[hidden] { display: none !important; }

/* Branded "Select photo" button (used as the empty-state CTA fallback) */
#selectOverlay.select-photo-cta {
  background: linear-gradient(135deg, #2D9CDB 0%, #1B7FBF 100%);
  color: #fff; border: none;
  box-shadow: 0 6px 16px rgba(45, 156, 219, 0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
#selectOverlay.select-photo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(45, 156, 219, 0.45);
}
#selectOverlay.select-photo-cta span { filter: grayscale(0.1); }


/* Frame model picker: same clean grid as shapes */
.frame-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-width: 380px; }
.frame-grid .shape-cell img {
  height: 64px;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) 0 0/16px 16px,
    linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%) 8px 8px/16px 16px;
  border-radius: 6px;
}
.swatch-color {
  width: 100%; height: 64px; border-radius: 6px; display: block;
  border: 1px solid var(--line);
}


/* Frame editor inside the two-column layout */
.editor-main .editor-canvas { padding: 52px 40px 80px; }
.editor-main .gizmo-wrap { }   /* gizmo positions itself; stage centers it */
.editor-side .frame-grid { max-width: 100%; grid-template-columns: repeat(2, 1fr); }
.editor-side .orient-toggle { display: flex; gap: 8px; }
.editor-side .orient-toggle .orient-btn { flex: 1; }
@media (max-width: 860px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-side .frame-grid { grid-template-columns: repeat(4, 1fr); }
  .editor-main .art-frame { width: min(100%, 92vw); }
  .editor-main .editor-canvas { padding: 40px 16px 70px; }
}
@media (max-width: 480px) {
  .editor-side .frame-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   HOMEPAGE v34 — offer carousel, conversion hero, product cards
   ========================================================================= */

/* ---------- Offer / announcement carousel ---------- */
.offer-carousel {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.offer-track { position: relative; }

.offer-slide {
  display: grid;
  align-items: center;
  min-height: 200px;
  padding: 26px 64px;
  text-decoration: none;
  position: relative;
  isolation: isolate;
}
/* IMPORTANT: beat the global `img{display:block}` / grid display so the
   `hidden` attribute actually hides an inactive slide. */
.offer-slide[hidden] { display: none !important; }

.offer-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.offer-slide.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
              rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.35) 48%,
              rgba(0, 0, 0, 0) 78%);
}

.offer-copy { max-width: 640px; margin: 0 auto; width: 100%; }
.offer-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.2; font-weight: 700;
}
.offer-sub { font-size: 15.5px; opacity: 0.92; margin-top: 8px; }
.offer-actions {
  margin-top: 16px; display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.offer-code {
  border: 1.5px dashed currentColor; border-radius: 8px;
  padding: 6px 12px; font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.6px;
}
.offer-btn {
  background: var(--marigold); color: var(--ink);
  padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 15px;
}
.offer-slide:hover .offer-btn { filter: brightness(0.94); }

.offer-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.85); color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer; z-index: 3;
  display: grid; place-items: center;
}
.offer-arrow:hover { background: #fff; }
.offer-arrow.prev { left: 12px; }
.offer-arrow.next { right: 12px; }

.offer-dots {
  position: absolute; bottom: 12px; left: 0; right: 0; z-index: 3;
  display: flex; gap: 7px; justify-content: center;
}
.offer-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255, 255, 255, 0.45); cursor: pointer;
  transition: width 0.18s ease, background 0.18s ease;
}
.offer-dot.active { background: #fff; width: 22px; border-radius: 999px; }

/* ---------- Hero (order-first) ---------- */
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.hero .btn-ghost { border-color: rgba(30, 42, 69, 0.25); }

.hero-points {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 14px; color: var(--ink-soft);
}

.hero-steps { display: grid; gap: 12px; align-content: center; }
.hero-step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 14px 54px;
  position: relative; box-shadow: var(--shadow);
}
.hero-step strong { display: block; font-size: 15.5px; }
.hero-step small { color: var(--ink-soft); font-size: 13.5px; }
.hero-step-n {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--magenta); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}

/* ---------- Section headings ---------- */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.section-head .section-title { margin-bottom: 2px; }
.section-sub { color: var(--ink-soft); font-size: 14.5px; }

/* ---------- Product card extras ---------- */
.badge-save {
  left: auto; right: 10px; background: #1B8A4C;
}
.price-from {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--ink-soft);
}
.card-note { font-size: 12.5px; color: var(--ink-soft); }
.btn-card { width: 100%; text-align: center; margin-top: 10px; }
.product-card:hover { box-shadow: 0 6px 20px rgba(30, 42, 69, 0.13); }
.product-card:hover .card-media img { transform: scale(1.04); }
.card-media img { transition: transform 0.25s ease; }
.card-media { overflow: hidden; }

/* ---------- Refer strip ---------- */
.refer-strip { background: #FFF3DC; border-top: 1px solid var(--line); }
.refer-strip-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 26px 20px; flex-wrap: wrap;
}
.refer-strip h3 { font-family: var(--font-display); font-size: 22px; }
.refer-strip p { color: var(--ink-soft); font-size: 14.5px; max-width: 62ch; }

/* ---------- Homepage responsive ---------- */
@media (max-width: 860px) {
  .offer-slide { min-height: 168px; padding: 22px 46px 34px; }
  .offer-arrow { width: 32px; height: 32px; font-size: 20px; }
  .offer-arrow.prev { left: 6px; }
  .offer-arrow.next { right: 6px; }
  .offer-slide.has-image::after {
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.68) 100%);
  }
  .hero-cta-row .btn { flex: 1 1 100%; text-align: center; }
  .hero-steps { grid-template-columns: 1fr; margin-top: 24px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-body { padding: 12px 12px 14px; }
  .card-body h3 { font-size: 14.5px; }
  .price { font-size: 16px; }
  .refer-strip-inner .btn { width: 100%; text-align: center; }
}

@media (max-width: 380px) {
  .product-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover .card-media img { transform: none; }
}

/* =========================================================================
   ALBUM EDITOR v34 — mobile action bar + finger gestures
   ========================================================================= */

/* Size selector inside the editor action bar */
.editor-actions { display: flex; align-items: center; gap: 12px; }
.ed-size { display: flex; align-items: center; gap: 7px; }
.ed-size-lbl {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--ink-soft);
}
.ed-size select {
  -webkit-appearance: none; appearance: none;
  height: 42px; padding: 0 34px 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2355617D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
              no-repeat right 12px center;
  font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
  max-width: 190px;
}
.editor-hint .hint-touch { display: none; }

/* `.slot-tools { display: flex }` above would beat the [hidden] attribute,
   so every slot showed its zoom / rotate buttons all the time and they sat
   on top of the ＋ Photo button. Keep them hidden until a slot is picked. */
.slot-tools[hidden] { display: none !important; }

/* Touch behaviour: swiping over an unselected slot scrolls the page;
   once a slot is selected the finger drives the photo instead. */
.slot { touch-action: pan-y; }
.slot.active { touch-action: none; }

/* Bigger, friendlier upload button */
.slot-pick {
  padding: 11px 16px; font-size: 13.5px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 860px) {
  /* --- Save / size / price pinned to the bottom of the screen ---
     The bar is 10 + 42 (size row) + 8 + 50 (save button) + 10 tall, so
     reserve that much page padding and hang the photo tools above it. */
  .album-editor-page {
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px));
  }

  .editor-bar { position: static; padding: 10px 12px; }
  .editor-bar .customize-title { font-size: 18px; }

  .editor-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(30, 42, 69, 0.16);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: 1fr auto; gap: 8px 10px;
    align-items: center;
  }
  .ed-size { grid-column: 1; }
  .ed-size select { max-width: none; width: 100%; }
  .editor-price { grid-column: 2; justify-self: end; font-size: 18px; }
  .btn-save-album {
    grid-column: 1 / -1; width: 100%; text-align: center;
    padding: 14px 18px; font-size: 16px;
  }

  .editor-hint .hint-desktop { display: none; }
  .editor-hint .hint-touch { display: inline; }

  /* --- photo tools float above the action bar, never clipped --- */
  .spread { contain: none; }                 /* allow a fixed child */
  .slot.active .slot-tools {
    position: fixed; top: auto; right: auto;
    left: 50%; transform: translateX(-50%);
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    z-index: 150; gap: 8px; padding: 8px 10px; border-radius: 16px;
    background: rgba(23, 23, 27, 0.92);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  }
  .slot-tools button { width: 44px; height: 44px; font-size: 19px; }

  .slot-pick { padding: 13px 18px; font-size: 14px; }

  /* the page-management row wraps to comfortable full-width rows */
  .editor-pager { gap: 8px; }
  .pg-btn { padding: 10px 14px; font-size: 14px; }
  .pg-sep { flex-basis: 100%; height: 0; }
  .view-toggle, .zoom-ctl { flex: 1 1 auto; }
  .view-toggle button { flex: 1; padding: 10px 12px; }
  .zoom-ctl { justify-content: flex-end; }
  .zoom-ctl button { width: 40px; height: 40px; }

  .editor-thumb { width: 108px; }
}

/* On a phone the text toolbar must clear the fixed action bar too */
@media (max-width: 860px) {
  .text-toolbar { z-index: 160; }
}

/* =========================================================================
   CART DESIGN PREVIEW v35
   The cart used to show the raw upload. It now shows the composed design,
   so `cover` would crop the frame away — `contain` keeps the whole piece
   visible and lets the category colour letterbox it.
   ========================================================================= */
.cart-thumb { width: 84px; height: 84px; }
.cart-thumb .cart-design-img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
}
.design-thumb img { object-fit: contain; background: #F3F4F7; }

@media (max-width: 640px) {
  .cart-thumb { width: 68px; height: 68px; }
}


/* =========================================================================
   RESPONSIVE PASS v36 — every page, 320px and up

   Root cause of the sideways scrolling: a `1fr` grid track is really
   `minmax(auto, 1fr)`, so it refuses to shrink below its own content's
   minimum width. On a 360px phone the two-column product grid gave each
   card ~150px, but the "Customise now" button needed ~175px — so the
   tracks grew, the grid outgrew the container, and the whole page
   (header included) could be dragged sideways. Everything below either
   gives those tracks a real zero minimum or shrinks what set the floor.
   ========================================================================= */

/* `clip`, not `hidden`: `hidden` would make <html> a scroll container and
   break the sticky header. */
html, body { overflow-x: clip; }

.product-grid, .cat-grid, .design-grid, .shape-grid, .frame-grid,
.album-grid, .related-grid { min-width: 0; }
.product-card, .cat-tile, .card-body, .cart-info, .order-card { min-width: 0; }
.card-body h3, .cart-info h3, .card-note, .order-items li { overflow-wrap: anywhere; }

/* A missing media file used to spill its alt text across the badge. The alt
   text stays in the markup for screen readers; it just is not painted over
   the artwork any more. */
.card-media img, .product-media img, .cart-thumb img, .design-thumb img {
  font-size: 0; overflow: hidden;
}

/* v35 grew the thumbnail to 84px but the row still reserved 72px for it */
.cart-row { grid-template-columns: 84px minmax(0, 1fr) auto auto auto; }

@media (max-width: 860px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-card { padding: 10px 10px; font-size: 13.5px; }
  .card-emoji { font-size: 46px; }
  .cart-row { grid-template-columns: 68px minmax(0, 1fr); }
  .cart-row .qty-form, .cart-line-total { grid-column: 2; }

  /* --- album editor: a shorter bottom bar leaves more room for photos ---
     8 + 40 (size row) + 6 + 44 (save) + 8 = 106px tall. */
  .album-editor-page { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  .editor-actions {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px 10px;
  }
  .ed-size select { height: 40px; font-size: 14.5px; }
  .ed-size-lbl { font-size: 11px; }
  .editor-price { font-size: 17px; }
  .btn-save-album { padding: 12px 16px; font-size: 15px; }
  .slot.active .slot-tools { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
  .editor-hint { font-size: 13px; line-height: 1.5; }
}

/* Phone header: the four account links get their own full-width row and are
   allowed to wrap, instead of running off the right-hand edge. */
@media (max-width: 600px) {
  .container { padding: 0 14px; }
  .section { padding: 32px 14px; }
  .hero-inner { padding: 32px 14px; }

  .header-inner { gap: 10px 12px; padding: 10px 14px; }
  .logo-mark { width: 32px; height: 32px; font-size: 20px; border-radius: 8px; }
  .logo-text { font-size: 20px; }
  .header-links {
    order: 2; flex-basis: 100%; margin-left: 0; flex-wrap: wrap;
    justify-content: flex-start; gap: 6px 16px;
  }
  .header-links a { font-size: 13px; }
  .search-form button { padding: 0 14px; }

  .cat-nav-inner { padding: 0 14px; }
  .cat-nav { scrollbar-width: none; -ms-overflow-style: none; }
  .cat-nav::-webkit-scrollbar { display: none; }

  .editor-bar { padding: 10px; }
  .breadcrumbs { font-size: 12.5px; }
  .page-head h1 { font-size: 27px; }
  .section-title { font-size: 23px; }
}

/* Small phones (Galaxy S8, Z Fold cover screen, 320px devices). Two columns
   still beat one — a single column makes people scroll past four screens to
   see six products — so the card contents shrink instead of the grid. */
@media (max-width: 400px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-body { padding: 10px 10px 12px; }
  .card-body h3 { font-size: 14px; }
  .card-note { font-size: 11.5px; }
  .price { font-size: 15px; }
  .btn-card { font-size: 12.5px; padding: 10px 6px; }
  .footer-inner { grid-template-columns: 1fr; }
  .header-links a { font-size: 12.5px; }
  .logo-text { font-size: 19px; }
}

/* Landscape phones: the bottom bar collapses to a single row so the photo
   still gets most of a 400px-tall viewport. */
@media (max-width: 860px) and (max-height: 520px) {
  .editor-actions { grid-template-columns: minmax(0, 1fr) auto auto; }
  .btn-save-album { grid-column: 3; width: auto; padding: 10px 14px; }
  .album-editor-page { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .slot.active .slot-tools { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* `will-change: transform` on the slot itself turned every slot into the
   containing block for its `position: fixed` zoom toolbar — so on a phone
   the floating toolbar centred itself on the slot (half of it off-screen)
   instead of on the viewport. The transform is applied to the photo inside
   the slot, which is where the hint actually belongs. */
.art-window, .plain-canvas, .slot { will-change: auto; }
.art-window img.photo, .plain-canvas img.photo, .slot img.photo { will-change: transform; }

/* Two badges on a ~140px card used to sit on top of each other. On small
   cards the discount drops to the opposite corner instead. */
@media (max-width: 480px) {
  .badge { font-size: 10.5px; padding: 2px 7px; }
  .badge-save { top: auto; bottom: 8px; right: 8px; }
}

/* Shape overlay colour picker (clock hands / border recolour) */
.overlay-colors { margin-top: 4px; }
.overlay-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.overlay-swatch {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform .1s ease, border-color .1s ease;
}
.overlay-swatch:hover { transform: scale(1.08); }
.overlay-swatch.on {
  border-color: var(--magenta);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--magenta);
}

/* ---- Size-wise + 3D framed preview (product page) ---- */
.size-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.size-room {
  position: relative; width: 100%; max-width: 520px;
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: #f3f1ec; border-radius: 14px;
  perspective: 1100px;               /* enables the 3D tilt */
  overflow: hidden;                  /* keep the frame inside the box */
}
/* In 3D mode, dragging must SPIN the frame — not select the photo or drag
   its "ghost" image. Kill text selection and native image dragging so the
   pointer stays a clean grab cursor with no blue highlight. */
.size-room.is-3d, .size-room.is-3d * {
  user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none;
}
.size-room.is-3d img { pointer-events: none; }
.size-scaler {
  position: relative;
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  display: grid; place-items: center;
  width: 62%; height: 78%;
}
.size-room .art-frame {
  transition: box-shadow .2s ease;
  transform-style: preserve-3d;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  max-width: 100%; max-height: 100%;
}
.size-room.is-3d { cursor: grab; background: linear-gradient(135deg,#efece5,#e4ded3); }
.size-room.is-3d.grabbing { cursor: grabbing; }
.size-room.is-3d .art-frame {
  box-shadow: 26px 30px 50px rgba(0,0,0,.34);
}
/* The photo/overlay/window are the FRONT face. Hiding their backface means
   when the frame turns past 90° they disappear and the back panel shows,
   instead of the photo bleeding through mirror-flipped (the blue tint). */
.size-room.is-3d #previewArt,
.size-room.is-3d #previewWindow,
.size-room.is-3d #previewImg {
  backface-visibility: hidden;
}
/* a tiny hint that appears in 3D mode */
.size-room.is-3d::before {
  content: "Drag to spin · turn past halfway to see the back";
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--ink-soft);
  background: rgba(255,255,255,.85); padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; pointer-events: none; z-index: 3;
}

/* real frame thickness: a thin slab sitting a little behind the face,
   dark wood edge — only visible when the frame turns. */
.size-room.is-3d .art-frame::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,#3a2c1e,#241a10 55%,#120c07);
  transform: translateZ(-10px);
}
/* the BACK of the frame: kraft backing board + a hanging hook, shown once
   the frame is rotated past 90°. It's the mirror position of the face. */
.size-room.is-3d .art-frame::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 20%, #8a8a8a 0 7px, transparent 8px),
    repeating-linear-gradient(45deg,#c7bda6 0 6px,#c0b69f 6px 12px);
  transform: translateZ(-12px) rotateY(180deg);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 6px #7a6f57;
}

/* moving contact shadow on the floor while it spins */
/* Real uploaded back photo (from admin). When present it becomes the rear
   face — pre-rotated 180° so it reads correctly once the frame turns — and
   the drawn CSS backing is suppressed. */
.size-room.is-3d .frame-back-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
  transform: translateZ(-12px) rotateY(180deg);
  backface-visibility: hidden;
}
.size-room.is-3d .art-frame[data-back]::after { display: none; }

.size-room.is-3d .dim-label { opacity: 0; transition: opacity .2s; }
.size-room.is-3d .size-scaler::after {
  content: ""; position: absolute; left: 50%; bottom: -6%;
  width: 62%; height: 8%; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.28), transparent 70%);
  filter: blur(3px); z-index: -1;
}

/* dimension labels, like "8 inch" across the top and side */
.dim-label {
  position: absolute; color: var(--ink-soft); font-size: 13px;
  font-weight: 600; letter-spacing: .3px; pointer-events: none;
}
.dim-top { top: 8%; left: 50%; transform: translateX(-50%); }
.dim-side {
  left: 8%; top: 50%; transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

.preview-3d-btn {
  position: absolute; right: 12px; bottom: 12px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--magenta); background: #fff; color: var(--ink);
  font-weight: 800; font-size: 13px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .12s ease;
}
.preview-3d-btn:hover { transform: scale(1.08); }
.preview-3d-btn[aria-pressed="true"] {
  background: var(--magenta); color: #fff;
}
@media (max-width: 560px) {
  .size-room { max-width: 100%; }
  .preview-3d-btn { width: 40px; height: 40px; }
}

/* Customer order tracker — cancelled/unpaid 2-step + tracking box */
.tracker-bad li.current .dot { background: #c0392b; border-color: #c0392b; }
.tracker-bad li.current { color: #c0392b; font-weight: 700; }
.track-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px; border-radius: 10px;
  background: #eef4ff; color: var(--ink); font-size: 14px;
}
.track-link {
  font-weight: 600; color: var(--magenta); white-space: nowrap;
  text-decoration: none;
}
.track-link:hover { text-decoration: underline; }