/* ==========================================================================
   FreeThinkBox (freethinkbox.com) — 90/10 Calm-Surface Bento Design System
   Supports seamless switching between Dark Teal (default) & Soft White
   ========================================================================== */

:root,
[data-theme="dark-teal"] {
  --bg-outer: #0D0F12;
  --bg-win: #15181B;
  --border-win: #20282C;
  --bg-well: #0D0F12;
  --bg-card: #1B2024;
  --bg-card-hover: #20262B;
  --bg-input: #0D0F12;
  --border-card: #253036;
  --border-subtle: #20282C;
  --border-outline-btn: #2E3A3F;
  --text-main: #F2F6F6;
  --text-sub: #A9B4B6;
  --text-muted: #8E9A9C;
  --pill-bg: #133333;
  --pill-border: #255858;
  --pill-text: #8CECE6;
  --accent-1: #7CE8E2;
  --accent-2: #5CD1C8;
  --accent-3: #8EE3F5;
  --accent-ink: #082223;
  --accent-text: #7CE8E2;
  --shadow-win: 0 24px 60px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.16);
  --overlay-bg: rgba(9, 12, 14, 0.76);
  --sheet-paper: #F5F8F7;
  --sheet-card: #FFFFFF;
  --sheet-border: #E1EBE9;
  --sheet-ink: #111618;
  --sheet-muted: #5C7072;
}

[data-theme="soft-white"] {
  --bg-outer: #ECEEED;
  --bg-win: #F5F8F7;
  --border-win: #D5E2E0;
  --bg-well: #ECF2F1;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F9FCFB;
  --bg-input: #F3F8F7;
  --border-card: #E1EBE9;
  --border-subtle: #DCE7E5;
  --border-outline-btn: #C5D6D4;
  --text-main: #111618;
  --text-sub: #4A5D5F;
  --text-muted: #687D7F;
  --pill-bg: #E3F6F4;
  --pill-border: #BFE9E5;
  --pill-text: #0F5250;
  --accent-1: #7CE8E2;
  --accent-2: #5CD1C8;
  --accent-3: #8EE3F5;
  --accent-ink: #082223;
  --accent-text: #0F8A83;
  --shadow-win: 0 20px 50px rgba(13, 55, 55, 0.08);
  --shadow-card: 0 6px 20px rgba(13, 55, 55, 0.04);
  --overlay-bg: rgba(17, 22, 24, 0.48);
  --sheet-paper: #F5F8F7;
  --sheet-card: #FFFFFF;
  --sheet-border: #E1EBE9;
  --sheet-ink: #111618;
  --sheet-muted: #5C7072;
}

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

html, body {
  min-height: 100vh;
  background: var(--bg-outer);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body {
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

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

/* Main App Window Shell */
.win {
  width: 100%;
  max-width: 1396px;
  min-height: calc(100vh - 36px);
  background: var(--bg-win);
  border-radius: 26px;
  border: 1px solid var(--border-win);
  box-shadow: var(--shadow-win);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Top Navigation Bar */
.top-nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.logo-badge {
  background: var(--accent-1);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 13.5px;
  padding: 7px 12px;
  border-radius: 10px;
  letter-spacing: -0.01em;
}

.brand-text b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.brand-text small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-well);
  border: 1px solid var(--border-card);
  padding: 4px;
  border-radius: 999px;
}

.nav-tab {
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.nav-tab:hover {
  color: var(--text-main);
}

.nav-tab.active {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.nav-tab .tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
  margin-right: 6px;
  vertical-align: middle;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-pill-btn {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.nav-pill-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.edit-catalog-btn {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.edit-catalog-btn:hover,
.edit-catalog-btn.active {
  border-color: var(--pill-border);
  background: var(--pill-bg);
  color: var(--pill-text);
}

.edit-catalog-btn .edit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-1);
}

/* Theme Switcher Pill */
.theme-switcher {
  height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 999px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
}

.theme-opt {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.theme-opt.active {
  background: var(--pill-bg);
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
}

/* Views Container */
.view-panel {
  display: none;
  flex: 1;
}

.view-panel.active {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   VIEW 1: HOME / SHOP CATALOG HUB (Bento 2-Column Layout)
   ========================================================================== */

.hub-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 415px;
  gap: 22px;
  padding: 22px 28px 24px;
  align-items: stretch;
}

.hub-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.hero-block {
  position: relative;
}

.top-pill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  font-size: 11.5px;
  font-weight: 600;
}

.inline-edit-chip {
  border: 1px dashed var(--border-outline-btn);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inline-edit-chip:hover {
  border-color: var(--pill-border);
  color: var(--pill-text);
  background: var(--pill-bg);
}

.hero-h1 {
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 12px 0 10px;
  font-weight: 700;
}

.hero-h1 em {
  font-style: normal;
  color: var(--accent-text);
}

.hero-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-sub);
  max-width: 680px;
}

.funnel-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.funnel-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-sub);
}

.funnel-arrow {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
}

/* Editable Product Cards Grid */
.product-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  flex: 1;
}

.product-cards-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.bento-card:hover {
  border-color: var(--pill-border);
}

.bento-card.featured-card {
  border-color: var(--pill-border);
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 10% Colour Rule: small 38px pastel icon circle */
.icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--accent-ink);
  font-weight: 700;
  flex: none;
}

.card-badges-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.card-badge.solid {
  background: var(--accent-1);
  color: var(--accent-ink);
}

.card-badge.subtle {
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
}

.card-quick-edit {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-card);
  background: var(--bg-well);
  color: var(--text-muted);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.card-quick-edit:hover {
  border-color: var(--pill-border);
  color: var(--pill-text);
  background: var(--pill-bg);
}

.bento-card h3 {
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-main);
}

.bento-card h3 small {
  display: block;
  font-size: 11.5px;
  color: var(--accent-text);
  font-weight: 600;
  margin-top: 3px;
}

.bento-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sub);
  flex: 1;
}

.card-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.meta-mini-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-1);
  color: var(--accent-ink);
  border-color: var(--accent-1);
}

.btn-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-outline-btn);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--pill-border);
  background: var(--pill-bg);
  color: var(--pill-text);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-ghost:hover {
  color: var(--accent-text);
}

/* Right-Hand Recessed Bento Well (Oceania Creatives Funnel) */
.hub-right {
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.well-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.well-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
}

.well-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ws-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  box-shadow: var(--shadow-card);
}

.ws-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ws-card-body h3 {
  font-size: 13.8px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.ws-card-body small {
  font-size: 11.2px;
  color: var(--accent-text);
  font-weight: 600;
}

.ws-card-body p {
  font-size: 11.8px;
  line-height: 1.48;
  color: var(--text-sub);
  margin: 2px 0 6px;
}

.ws-card-body .btn {
  align-self: flex-start;
  padding: 7px 12px;
  font-size: 11.5px;
}

/* ==========================================================================
   VIEW 2: FREE 26-PAGE TASTER INTERACTIVE SHOWCASE
   ========================================================================== */

.taster-view {
  padding: 22px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.section-header-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.section-header-bar h1 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-header-bar .sub {
  font-size: 13.5px;
  color: var(--text-sub);
  margin-top: 4px;
}

.header-pills-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Featured 4-Column Spread Row (matching Mockup 22) */
.featured-spread-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.95fr;
  gap: 14px;
}

.spread-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.spread-card:hover,
.spread-card.active {
  border-color: var(--pill-border);
}

.spread-label {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.spread-label span {
  font-size: 10.5px;
  color: var(--pill-text);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.spread-img-box {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: var(--bg-well);
  border-radius: 12px;
  padding: 8px;
}

.spread-img-box img {
  max-height: 290px;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.spread-img-box.double img {
  max-width: calc(50% - 4px);
}

/* Interactive 26-Page Inspector + Thumbnail Strip */
.taster-explorer-well {
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
  align-items: center;
}

.inspector-preview {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.inspector-preview img {
  width: 122px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  flex: none;
}

.inspector-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inspector-info h3 {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.inspector-info p {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.45;
}

.page-nav-btns {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.thumb-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thumb-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}

.thumb-strip {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 6px;
}

.pg-thumb-btn {
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.12s ease;
}

.pg-thumb-btn img {
  width: 100%;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
}

.pg-thumb-btn span {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.pg-thumb-btn.active,
.pg-thumb-btn:hover {
  border-color: var(--accent-1);
  background: var(--pill-bg);
}

.pg-thumb-btn.active span {
  color: var(--pill-text);
}

/* ==========================================================================
   VIEW 3: 115-PAGE WORKBOOK & OCEANIA CREATIVES BRIDGE (Mockup 21 + Modules)
   ========================================================================== */

.workbook-view {
  padding: 20px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.modules-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.module-pill-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.module-pill-card .m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-text);
}

.module-pill-card h4 {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.module-pill-card p {
  font-size: 11.2px;
  color: var(--text-sub);
  line-height: 1.4;
}

/* Bridge Two-Page Spread (Page 34 & Page 115) */
.bridge-spread-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
}

.paper-page {
  background: var(--sheet-paper);
  color: var(--sheet-ink);
  border: 1px solid var(--sheet-border);
  border-radius: 18px;
  padding: 22px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.paper-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #0F9F96;
  text-transform: uppercase;
}

.paper-page h2 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111618;
}

.paper-sub {
  font-size: 12px;
  color: var(--sheet-muted);
}

.paper-box {
  background: var(--sheet-card);
  border: 1px solid var(--sheet-border);
  border-radius: 13px;
  padding: 11px 14px;
}

.paper-box b {
  font-size: 12.2px;
  display: block;
  margin-bottom: 6px;
  color: #111618;
}

.paper-input {
  width: 100%;
  border: 1px dashed #B9CECC;
  background: #F8FBFA;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #111618;
}

.tier-3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tier-input-card {
  background: #F5F8F7;
  border: 1px solid #E1EBE9;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #5C7072;
}

.tier-input-card input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F5250;
  margin-top: 3px;
  outline: none;
}

.paper-callout {
  background: #15181B;
  color: #F2F6F6;
  border-radius: 13px;
  padding: 12px 15px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
}

.paper-callout p {
  font-size: 11.8px;
  line-height: 1.45;
  color: #C9D3D4;
  flex: 1;
}

.paper-callout p b {
  color: #FFFFFF;
}

.paper-foot {
  font-size: 10px;
  color: #7D9193;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #E1EBE9;
  padding-top: 8px;
}

.bridge-step-card {
  background: #FFFFFF;
  border: 1px solid #E1EBE9;
  border-radius: 13px;
  padding: 11px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.bridge-step-card h3 {
  font-size: 13.5px;
  color: #111618;
}

.bridge-step-card small {
  font-size: 11px;
  color: #0F9F96;
  font-weight: 600;
}

.bridge-step-card p {
  font-size: 11.8px;
  color: #5C7072;
  line-height: 1.42;
  margin-top: 3px;
}

.flow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.flow-tags span {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #E3F6F4;
  color: #0F5250;
  font-weight: 600;
}

.qr-box {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 8px;
  background: repeating-conic-gradient(#111618 0 25%, #fff 0 50%) 0 0 / 11px 11px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px #E1EBE9;
}

/* ==========================================================================
   VIEW 4: 192-PAGE 2027 PRINT JOURNAL & CHRISTMAS EDITION SPRINT
   ========================================================================== */

.journal-view {
  padding: 20px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.journal-top-showcase {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
}

.journal-spec-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.size-selector-pills {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.size-pill {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--bg-well);
  color: var(--text-sub);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.size-pill.active {
  background: var(--pill-bg);
  border-color: var(--pill-border);
  color: var(--pill-text);
}

.sprint-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}

.sprint-bar-item {
  border-radius: 999px;
  padding: 9px 16px;
  display: flex;
  justify-content: space-between;
}

.sprint-well {
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.15fr;
  gap: 12px;
  flex: 1;
}

.sprint-col-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sprint-col-card.ready-highlight {
  background: linear-gradient(160deg, #68DCD5, #4BB8B2);
  color: #082223;
  border: none;
}

.sprint-col-card .wk-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-text);
}

.sprint-col-card.ready-highlight .wk-label,
.sprint-col-card.ready-highlight .wk-date,
.sprint-col-card.ready-highlight h3,
.sprint-col-card.ready-highlight ul {
  color: #082223;
}

.sprint-col-card .wk-date {
  font-size: 11px;
  color: var(--text-muted);
}

.sprint-col-card h3 {
  font-size: 14.5px;
  font-weight: 700;
}

.sprint-col-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11.8px;
  line-height: 1.42;
  color: var(--text-sub);
}

.sprint-col-card li {
  display: flex;
  gap: 7px;
}

.sprint-col-card li::before {
  content: '○';
  color: var(--accent-2);
  font-weight: 700;
}

.sprint-col-card.ready-highlight li::before {
  content: '●';
  color: #082223;
}

/* ==========================================================================
   MODALS / DRAWERS:
   1. CATALOG STUDIO / EDIT PRODUCTS MANAGER
   2. SELF-SERVE CHECKOUT & FULL CREATIVE OS INVITE CODE
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-backdrop.open {
  display: flex;
}

.modal-dialog {
  width: 100%;
  max-width: 1120px;
  max-height: 86vh;
  background: var(--bg-win);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-dialog.checkout-dialog {
  max-width: 880px;
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 15px;
  cursor: pointer;
}

/* Catalog Studio Layout */
.studio-body {
  display: grid;
  grid-template-columns: 310px 1fr;
  flex: 1;
  min-height: 520px;
  overflow: hidden;
}

.studio-sidebar {
  background: var(--bg-well);
  border-right: 1px solid var(--border-subtle);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.studio-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  padding: 3px;
  border-radius: 12px;
}

.studio-mode-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 9px;
  cursor: pointer;
}

.studio-mode-tab.active {
  background: var(--pill-bg);
  color: var(--pill-text);
}

.studio-item-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.studio-list-row {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.studio-list-row.active {
  border-color: var(--accent-1);
  background: var(--pill-bg);
}

.studio-list-row .sl-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.studio-list-row .sl-title {
  font-size: 12.2px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-list-row .sl-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}

.studio-form-pane {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

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

.field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-input,
.field-select,
.field-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text-main);
  outline: none;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--accent-1);
}

.field-textarea {
  min-height: 68px;
  resize: vertical;
  line-height: 1.45;
}

.Toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

.toggle-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.toggle-check input {
  width: 15px;
  height: 15px;
  accent-color: #7CE8E2;
}

.studio-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-well);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Checkout & Invite Code Modal */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  padding: 20px 24px;
}

.invite-pass-card {
  background: linear-gradient(135deg, #68DCD5 0%, #4BB8B2 100%);
  color: #082223;
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-code-box {
  background: #082223;
  color: #7CE8E2;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 1220px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
  .product-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   CREATIVE STUDIO ILLUSTRATIONS & VISUAL DENSITY ENHANCEMENTS
   ========================================================================== */
.hero-art-grid {
  display: grid;
  grid-template-columns: 1.28fr 0.92fr;
  gap: 16px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.hero-art-panel {
  background: var(--bg-well);
  border: 1px solid var(--pill-border);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-art-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-art-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pill-text);
  letter-spacing: 0.02em;
}

.card-art-banner {
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  padding: 6px 8px;
  margin-bottom: 2px;
  overflow: hidden;
}

.card-art-banner svg {
  width: 100%;
  height: 68px;
  display: block;
}

.visual-journey-banner {
  background: var(--bg-card);
  border: 1px solid var(--pill-border);
  border-radius: 18px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  align-items: center;
  box-shadow: var(--shadow-card);
}

.visual-journey-banner svg {
  width: 100%;
  height: auto;
  display: block;
}

.edition-preview-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.edition-preview-card {
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edition-preview-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  border: 1px solid var(--border-card);
}

.edition-preview-card span {
  font-size: 9.8px;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Admin-Gated Catalog Studio, Footer Bar & Adjustable Stripe Payment Styles
   ========================================================================== */

body:not(.ftb-admin-mode) .admin-only {
  display: none !important;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-well);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-left b {
  color: var(--text-sub);
  font-weight: 700;
}

.footer-sep {
  opacity: 0.45;
}

.footer-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.2px;
  font-weight: 700;
  color: var(--teal);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
}

.studio-admin-toggle {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10.4px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.studio-admin-toggle:hover,
body.ftb-admin-mode .studio-admin-toggle {
  color: var(--teal);
  border-color: var(--pill-border);
  background: var(--pill-bg);
}

.studio-mode-tabs {
  grid-template-columns: repeat(4, 1fr);
}

.payment-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.payment-mode-card {
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s ease;
}

.payment-mode-card strong {
  font-size: 11.5px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-mode-card span {
  font-size: 10.3px;
  color: var(--text-muted);
  line-height: 1.35;
}

.payment-mode-card.active {
  border-color: var(--teal);
  background: var(--pill-bg);
  box-shadow: 0 0 0 1px var(--pill-border);
}

.payment-mode-card.active strong {
  color: var(--teal);
}

.stripe-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
}

.stripe-price-table th,
.stripe-price-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.stripe-price-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-card);
}

.stripe-price-table tr:last-child td {
  border-bottom: none;
}

.stripe-price-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  color: var(--teal);
  background: var(--pill-bg);
  padding: 2px 6px;
  border-radius: 5px;
}

.locked-pdf-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.locked-pdf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
}

.locked-pdf-row b {
  color: var(--text-main);
  font-weight: 600;
}

.locked-pdf-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 194, 107, 0.14);
  color: var(--amber);
  border: 1px solid rgba(245, 194, 107, 0.35);
  white-space: nowrap;
}

.unlocked-pdf-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--teal);
  border: 1px solid var(--pill-border);
  text-decoration: none;
  white-space: nowrap;
}

.unlocked-pdf-badge:hover {
  background: var(--teal-cta);
  color: #fff;
}

.hex-token-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.8px;
  word-break: break-all;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-well);
  border: 1px solid var(--pill-border);
  color: var(--teal);
  line-height: 1.45;
}

.locked-pdf-list {
  max-height: 158px;
  overflow-y: auto;
  padding-right: 4px;
}


/* ==========================================================================
   MINIMALISTIC, BREATHABLE UI STYLES (Hub, Checkout & Edit Shop)
   ========================================================================== */

.clean-card-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 4px 0 8px;
  padding: 0;
  font-size: 12px;
  color: var(--text-sub);
}

.clean-card-bullets li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.clean-card-bullets li::before {
  content: "•";
  color: var(--accent-text);
  font-weight: 800;
}

.modal-dialog {
  max-width: 720px;
  border-radius: 22px;
}

.modal-dialog.checkout-dialog {
  max-width: 640px;
}

.clean-modal-header {
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.clean-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.clean-modal-header h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.clean-tab-bar {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-well);
  border: 1px solid var(--border-card);
  padding: 4px;
  border-radius: 999px;
}

.clean-tab-bar .studio-mode-tab {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.clean-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 14px;
  cursor: pointer;
}

.clean-studio-pane,
.clean-checkout-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.clean-control-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.clean-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.clean-input {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--text-main);
  font-family: inherit;
  outline: none;
}

.clean-input:focus {
  border-color: var(--accent-1);
}

.clean-pill-row,
.clean-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clean-choice-pill,
.clean-picker-pill {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-sub);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}

.clean-choice-pill.active,
.clean-picker-pill.active {
  background: var(--pill-bg);
  border-color: var(--pill-border);
  color: var(--pill-text);
}

.clean-two-col {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  align-items: end;
}

.clean-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.clean-prod-edit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clean-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  margin-top: 2px;
}

.clean-checkbox-row input {
  width: 15px;
  height: 15px;
  accent-color: #7CE8E2;
}

.clean-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.clean-status-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-text);
}

.clean-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clean-card-heading {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-text);
}

.clean-included-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--text-main);
}

.clean-included-list li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.clean-included-list li::before {
  content: "✓";
  color: var(--accent-text);
  font-weight: 800;
}

.clean-ready-note {
  font-size: 12.5px;
  color: var(--text-sub);
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.clean-checkout-footer {
  display: flex;
  justify-content: flex-end;
}

.clean-pay-btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 14.5px;
}

.clean-confirm-banner {
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13.5px;
}

.clean-download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.clean-download-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  text-decoration: none;
  font-size: 12px;
  transition: all 0.14s ease;
}

.clean-download-btn:hover {
  border-color: var(--pill-border);
  background: var(--pill-bg);
}

.clean-download-btn b {
  color: var(--accent-text);
  font-size: 11.5px;
  white-space: nowrap;
}

.clean-invite-card {
  background: var(--bg-card);
  border: 1px solid var(--pill-border);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.clean-invite-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--accent-text);
}

.clean-invite-sub {
  font-size: 12.5px;
  color: var(--text-sub);
  margin-top: 2px;
}

.clean-invite-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   2027 CANVA BRAND HERITAGE REFRESH:
   1. Authentic FreeThinkBox Open-Box Logo & Manifesto
   2. 2027 3-Part Creative System Strip
   3. Oceania Creatives Wayfinding Compass / OC Pasifika Bird Crest
   4. 8-Step Artist Journey Map Strip
   ========================================================================== */

.top-nav {
  min-height: 64px;
  padding: 8px 24px;
}

.logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 11px;
}

.ftb-box-logo-svg {
  flex: none;
  display: block;
}

.hub-grid {
  grid-template-columns: 1fr 390px;
  gap: 16px;
  padding: 14px 24px 16px;
}

.hub-left {
  gap: 11px;
}

.hero-art-grid {
  grid-template-columns: 1.25fr 0.95fr;
  gap: 14px;
  padding: 13px 18px;
  border-radius: 18px;
}

.hero-h1 {
  font-size: 29px;
  line-height: 1.1;
  margin: 7px 0 5px;
}

.hero-manifesto {
  font-size: 12.8px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.42;
  margin-bottom: 4px;
  padding-left: 10px;
  border-left: 2.5px solid var(--accent-1);
}

.hero-sub {
  font-size: 12px;
  line-height: 1.42;
  color: var(--text-sub);
}

.hero-art-panel {
  padding: 8px 10px;
  border-radius: 14px;
  gap: 4px;
}

/* 2027 3-Part Creative System Strip */
.pillars-3-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pillar-sys-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 15px;
  padding: 9px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.pillar-sys-card:hover {
  border-color: var(--pill-border);
  transform: translateY(-1px);
}

.pillar-sys-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}

.pillar-sys-num.accent-coral {
  background: rgba(244, 166, 152, 0.16);
  border-color: rgba(244, 166, 152, 0.45);
  color: #F4A698;
}

[data-theme="soft-white"] .pillar-sys-num.accent-coral {
  background: #FFF0EC;
  border-color: #F2B8AD;
  color: #B84A39;
}

.pillar-sys-body {
  flex: 1;
  min-width: 0;
}

.pillar-sys-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.pillar-sys-top b {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.pillar-sys-top span {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
}

.pillar-sys-body p {
  font-size: 10.8px;
  line-height: 1.35;
  color: var(--text-sub);
  margin-top: 2px;
}

/* Compact Product Cards Grid to fit cleanly alongside 3-Part System & 8-Step Journey */
.product-cards-grid {
  gap: 10px;
}

.bento-card {
  padding: 12px 13px;
  border-radius: 17px;
  gap: 6px;
}

.bento-card .icon-circle {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.card-art-banner {
  padding: 4px 6px;
  margin-bottom: 0;
}

.card-art-banner svg {
  height: 44px;
}

.bento-card h3 {
  font-size: 13.5px;
}

.bento-card p {
  font-size: 11.2px;
  line-height: 1.38;
}

.clean-card-bullets {
  gap: 3px;
  margin: 2px 0 4px;
  font-size: 11px;
}

.bento-card .btn {
  padding: 7px 12px;
  font-size: 11.5px;
}

/* 8-Step Artist Journey Map Strip */
.journey-8-strip {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 17px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
}

.journey-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.journey-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.journey-kicker {
  font-size: 9.8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  text-transform: uppercase;
}

.journey-title-group b {
  font-size: 12.2px;
  color: var(--text-main);
}

.journey-legend-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.j-stage-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  white-space: nowrap;
}

.j-stage-pill.s1 {
  border-color: var(--pill-border);
  color: var(--pill-text);
  background: var(--pill-bg);
}

.j-stage-pill.s2 {
  border-color: rgba(92, 209, 200, 0.45);
  color: var(--accent-text);
}

.j-stage-pill.s3 {
  border-color: rgba(244, 166, 152, 0.45);
  color: #F4A698;
}

[data-theme="soft-white"] .j-stage-pill.s3 {
  border-color: #F2B8AD;
  color: #B84A39;
  background: #FFF5F2;
}

.journey-steps-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.journey-step-chip {
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.journey-step-chip.stage-1 {
  border-top: 2px solid #7CE8E2;
}

.journey-step-chip.stage-2 {
  border-top: 2px solid #5CD1C8;
}

.journey-step-chip.stage-3 {
  border-top: 2px solid #F4A698;
}

.j-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.j-step-num {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: 9.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.j-step-tag {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.j-step-name {
  font-size: 10.6px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.22;
}

/* Right-Hand Well: Oceania Creatives Emblem Header + Cards */
.hub-right {
  padding: 13px 14px;
  gap: 9px;
}

.oc-emblem-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--pill-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.oc-emblem-crest {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oc-emblem-copy {
  flex: 1;
  min-width: 0;
}

.oc-emblem-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  text-transform: uppercase;
}

.oc-emblem-copy .well-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 1px;
}

.oc-emblem-tagline {
  font-size: 11px;
  font-weight: 600;
  color: #F4A698;
  margin-top: 1px;
}

[data-theme="soft-white"] .oc-emblem-tagline {
  color: #B84A39;
}

.oc-pasifika-divider {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent-text);
  margin-top: 3px;
  opacity: 0.85;
}

.ws-card {
  padding: 11px 12px;
  border-radius: 15px;
  gap: 10px;
}

.ws-card-body h3 {
  font-size: 13px;
}

.ws-card-body p {
  font-size: 11.2px;
  line-height: 1.4;
  margin: 1px 0 4px;
}

.oc-studio-foot-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 5px 8px 2px;
}

.oc-studio-foot-note b {
  color: var(--text-sub);
}

/* ==========================================================================
   2027 VISUAL DIGITAL STOREFRONT REDESIGN (v2027.7)
   - Full-width 4-Card Visual Storefront (No Cramped Right Sidebar)
   - 60% Visual Mockup Stage at the Top of Every Product Card (Real Covers + Spreads)
   - Instant Hero CTAs + 3D Book Fan Showcase
   - Calm Single-Bar Oceania Creatives & 8-Step Artist Journey Footer Strip
   ========================================================================== */

#view-home .hub-grid {
  display: block;
  padding: 16px 26px 18px;
}

#view-home .hub-left {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

#view-home .hub-right,
#view-home .pillars-3-strip {
  display: none !important;
}

/* 1. Storefront Hero Showcase */
.shop-hero-banner {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 22px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  padding: 18px 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.shop-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-hero-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill.subtle-pill {
  background: var(--bg-well);
  border-color: var(--border-subtle);
  color: var(--text-sub);
}

.shop-hero-copy .hero-h1 {
  font-size: 33px;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 2px 0;
  font-weight: 800;
}

.shop-hero-lead {
  font-size: 13.5px;
  line-height: 1.48;
  color: var(--text-sub);
  max-width: 590px;
}

.shop-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hero-main-cta {
  padding: 10px 18px;
  font-size: 12.8px;
  box-shadow: 0 6px 18px rgba(124, 232, 226, 0.18);
}

.hero-secondary-cta {
  padding: 10px 15px;
  font-size: 12.5px;
}

.hero-peek-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  padding: 6px 8px;
}

/* Hero Right: 3D Fanned Real Books & Worksheet Showcase */
.shop-hero-showcase {
  background: radial-gradient(circle at 50% 42%, rgba(124, 232, 226, 0.13), transparent 72%), var(--bg-well);
  border: 1px solid var(--pill-border);
  border-radius: 18px;
  padding: 12px 16px 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.hero-showcase-books {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
}

.hero-book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: transform 0.18s ease;
}

.hero-book-item img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
  background: #fff;
}

[data-theme="soft-white"] .hero-book-item img {
  border-color: #C7DBD9;
  box-shadow: 0 8px 18px rgba(13, 55, 55, 0.14);
}

.hero-book-item.hb-center img {
  height: 120px;
  border-color: var(--accent-1);
}

.hero-book-item span {
  font-size: 10px;
  font-weight: 700;
  color: var(--pill-text);
  white-space: nowrap;
}

/* 2. Full-Width 4-Card Visual Storefront Grid */
.shop-visual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.shop-product-card {
  padding: 0 !important;
  border-radius: 20px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.shop-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--pill-border);
}

.shop-product-card.featured-card {
  border: 1.5px solid var(--accent-1);
  box-shadow: 0 10px 28px rgba(124, 232, 226, 0.11);
}

/* Visual Mockup Stage at the Top of Each Card (210px tall) */
.shop-mockup-stage {
  height: 212px;
  background: radial-gradient(circle at 50% 54%, rgba(124, 232, 226, 0.14), transparent 72%), var(--bg-well);
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.shop-mockup-stage.stage-bundle {
  background: radial-gradient(circle at 50% 50%, rgba(124, 232, 226, 0.22), rgba(244, 166, 152, 0.08) 68%, transparent 100%), var(--bg-well);
}

.stage-top-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  z-index: 4;
}

.stage-top-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stage-format-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(13, 18, 22, 0.72);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  backdrop-filter: blur(4px);
}

[data-theme="soft-white"] .stage-format-chip {
  background: rgba(255, 255, 255, 0.9);
  border-color: #C9DDD9;
  color: #0F5250;
}

.stage-format-chip.bundle-chip {
  background: var(--pill-bg);
  border-color: var(--pill-border);
  color: var(--pill-text);
}

/* 3D Fanned Cover + Open Spread Mockup Composition */
.mockup-fan-composition {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}

.mockup-sheet {
  position: absolute;
  width: 96px;
  height: 132px;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  transition: transform 0.2s ease;
}

[data-theme="soft-white"] .mockup-sheet {
  border-color: #C5D8D6;
  box-shadow: 0 8px 18px rgba(15, 65, 62, 0.14);
}

.mockup-sheet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.mockup-sheet.sheet-back-left {
  transform: translate(-54px, 4px) rotate(-8deg);
  z-index: 1;
}

.mockup-sheet.sheet-back-right {
  transform: translate(54px, 4px) rotate(8deg);
  z-index: 2;
}

.mockup-book-cover {
  position: relative;
  width: 104px;
  height: 144px;
  border-radius: 7px;
  overflow: hidden;
  background: #0E2224;
  border: 1.5px solid rgba(124, 232, 226, 0.55);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.46);
  z-index: 3;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

[data-theme="soft-white"] .mockup-book-cover {
  background: #ffffff;
  border-color: #0F8A83;
  box-shadow: 0 12px 24px rgba(13, 55, 55, 0.2);
}

.mockup-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.book-spine-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

/* Bundle 4-Piece Fan Layout */
.mockup-fan-composition.bundle-fan .bundle-left-book {
  width: 88px;
  height: 124px;
  transform: translate(-68px, 6px) rotate(-10deg);
  z-index: 1;
}

.mockup-fan-composition.bundle-fan .bundle-right-book {
  width: 88px;
  height: 124px;
  transform: translate(68px, 6px) rotate(10deg);
  z-index: 1;
}

.mockup-fan-composition.bundle-fan .bundle-spread-peek {
  width: 92px;
  height: 128px;
  transform: translate(28px, -2px) rotate(4deg);
  z-index: 2;
}

.mockup-fan-composition.bundle-fan .bundle-center-book {
  width: 102px;
  height: 142px;
  transform: translate(-16px, 0) rotate(-2deg);
  z-index: 3;
}

.shop-product-card:hover .mockup-book-cover {
  transform: translateY(-4px) scale(1.02);
}

.stage-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  z-index: 4;
  padding-top: 2px;
}

.stage-edition-note {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-sub);
}

.stage-edition-note.coral-tag {
  color: #F4A698;
}

[data-theme="soft-white"] .stage-edition-note.coral-tag {
  color: #B84A39;
}

.stage-peek-pill {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-text);
}

/* Card Body Details */
.shop-card-body {
  padding: 13px 15px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.shop-card-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.shop-card-title-row h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.shop-card-price-tag {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: none;
}

.price-compare {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.price-current {
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-text);
}

.shop-card-desc {
  font-size: 11.8px;
  line-height: 1.42;
  color: var(--text-sub);
  margin: 0;
}

.shop-product-card .clean-card-bullets {
  margin: 1px 0 4px;
  gap: 4px;
  font-size: 11.2px;
}

.shop-product-card .clean-card-bullets li::before {
  content: "✓";
  color: var(--accent-text);
  font-weight: 800;
}

.shop-card-actions {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
}

.shop-card-buy-btn,
.shop-card-look-btn {
  padding: 8px 10px !important;
  font-size: 11.8px !important;
  width: 100%;
}

/* 3. Bottom Calm Oceania Creatives & 8-Step Artist Journey Bar */
#view-home .journey-8-strip {
  padding: 11px 16px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
}

.oc-bottom-studio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.oc-bottom-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.oc-bottom-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oc-bottom-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  text-transform: uppercase;
}

.oc-bottom-title {
  font-size: 12px;
  color: var(--text-main);
}

.oc-bottom-title span {
  color: var(--text-sub);
  font-weight: 500;
}

.oc-bottom-steps {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.oc-mini-step {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-well);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  white-space: nowrap;
}

.oc-mini-step.s1 {
  border-color: var(--pill-border);
  color: var(--pill-text);
}

.oc-mini-step.s3 {
  border-color: rgba(244, 166, 152, 0.45);
  color: #F4A698;
}

[data-theme="soft-white"] .oc-mini-step.s3 {
  border-color: #F2B8AD;
  color: #B84A39;
  background: #FFF5F2;
}

.oc-bar-btn {
  padding: 7px 13px !important;
  font-size: 11.5px !important;
}

/* ============================================================================
   Authentic Oceania Creatives Bird, 8-Bird Wayfinding Mandala & OC Crest Styles
   ============================================================================ */
.oc-header-cobrand-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: rgba(0, 210, 200, 0.1);
  border: 1px solid rgba(0, 210, 200, 0.32);
  flex-shrink: 0;
}

[data-theme="soft-white"] .oc-header-cobrand-pill {
  background: #ECFAF8;
  border-color: #9EE2DC;
}

.oc-hero-bird-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 4px 12px !important;
  background: rgba(0, 210, 200, 0.11) !important;
  border: 1px solid rgba(0, 210, 200, 0.36) !important;
}

.oc-hero-bird-pill b {
  color: #F4A698;
  font-weight: 700;
  letter-spacing: 0.01em;
}

[data-theme="soft-white"] .oc-hero-bird-pill {
  background: #F0FBF9 !important;
  border-color: #8CDCD5 !important;
}

[data-theme="soft-white"] .oc-hero-bird-pill b {
  color: #B84A39;
}

.bundle-oc-bird-seal {
  position: absolute;
  left: 10px;
  bottom: 34px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: rgba(6, 18, 23, 0.92);
  border: 1px solid rgba(76, 224, 220, 0.55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font-size: 9.5px;
  font-weight: 700;
  color: #8CECE6;
  pointer-events: none;
}

[data-theme="soft-white"] .bundle-oc-bird-seal {
  background: rgba(9, 28, 34, 0.94);
  border-color: #00D2C8;
  color: #9CF4F0;
}

.oc-emblem-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 14px;
  background: rgba(7, 20, 26, 0.72);
  border: 1px solid rgba(0, 210, 200, 0.28);
  flex-shrink: 0;
}

[data-theme="soft-white"] .oc-emblem-cluster {
  background: #F0FAF9;
  border-color: #9EE2DC;
}

.oc-standalone-bird-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}

.oc-bottom-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}