/* ============================================================
   NXTTRAIL — GLOBAL THEME (CLEAN + FIXED BUTTONS)
   - Keeps existing layout + modules
   - Normalizes nt-btn (brand/secondary/ghost)
   - Locks action-row alignment (no “Generate sits lower”)
============================================================ */

/* ------------------------------
   COLOR VARIABLES
------------------------------ */
:root{
  --hero:#1E3A8A;
  --brand:#ff6600;
  --brand-dark:#cc5200;
  --glow:#FFD700;

  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#111111;

  --border:#d9d9d9;
  --radius:12px;

  --shadow:0 3px 10px rgba(0,0,0,0.07);
}

/* Dark Mode */
body.dark{
  --bg:#0B1524;
  --card:#13203a;
  --ink:#ffffff;
  --border:#1e2a3f;
}

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

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",sans-serif;
  line-height:1.45;
}

/* keep your reset, but make buttons consistent */
button{
  border:none;
  cursor:pointer;
  background:none;
  font-family:inherit;
}

a{ color:var(--brand); text-decoration:none; }

/* ------------------------------
   TYPOGRAPHY
------------------------------ */
.section-title{
  font-size:24px;
  font-weight:800;
  margin-bottom:18px;
  color:var(--hero);
}

.small-note{
  font-size:13px;
  color:#666;
  margin-bottom:18px;
  display:block;
}

/* ------------------------------
   GLOBAL LAYOUT
------------------------------ */
#mainPanel{
  position:relative;
  z-index:10;
  margin-left:270px;
  padding:32px;
  min-height:100vh;
  background:var(--bg);
}

/* Default workspace (2-panel) */
.workspace{
  display:flex;
  gap:36px;
  align-items:flex-start;
}

.workspace-main{
  flex:3;
  background:var(--card);
  padding:24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-width:0;
}

.workspace-guidance{
  flex:1.4;
  background:var(--card);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:sticky;
  top:24px;
  height:fit-content;
  min-width:0;
}

/* Better spacing inside guidance panel */
.workspace-guidance p{ margin-bottom:16px; }
.workspace-guidance h3,
.workspace-guidance h4{ margin:20px 0 10px; }
.workspace-guidance ul{ margin:6px 0 16px; padding-left:22px; }
.workspace-guidance li{ margin-bottom:6px; }

/* ------------------------------
   INPUT ELEMENTS
------------------------------ */
.input-block{ margin-bottom:22px; }
.input-block label{ font-weight:600; display:block; margin-bottom:6px; }

input[type="text"],
input[type="number"],
input[type="file"],
select,
textarea{
  width:100%;
  padding:12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  color:var(--ink);
}

textarea{ min-height:120px; resize:vertical; }

/* Variant type input spacing */
#variantTypeInput{ margin-bottom:12px; }

/* ------------------------------
   MULTI-SELECT
------------------------------ */
.multi-select{ position:relative; user-select:none; }

.multi-select-display{
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  cursor:pointer;
}

.multi-select-dropdown{
  position:absolute;
  top:48px; left:0;
  width:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-height:220px;
  overflow-y:auto;
  display:none;
  padding:10px;
  box-shadow:var(--shadow);
  z-index:20;
}

.multi-select-dropdown label{ display:block; margin-bottom:6px; }

.multi-select.open .multi-select-dropdown{ display:block; }

/* Category dropdown — ONLY 3 columns when OPEN */
.multi-select.open .category-dropdown{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px 18px;
  padding:10px;
}

/* ------------------------------
   FORM ROWS
------------------------------ */
.form-row{ display:flex; gap:16px; margin-top:12px; }
.form-row > *{ flex:1; }

.dimension-row,
.weight-row,
.capacity-row{ display:flex; gap:16px; margin-top:8px; }

.dim-item{ display:flex; align-items:center; gap:10px; flex:1; }
.dim-item input,
.dim-item select{ flex:1; }

/* ------------------------------
   MEDIA INPUTS
------------------------------ */
.mi-textarea{
  width:100%;
  min-height:180px;
  padding:14px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  font-size:15px;
  margin-bottom:10px;
}

.mi-upload{ margin-bottom:30px; }

/* Locked subtabs */
.subtab-btn.locked{ opacity:0.4; cursor:not-allowed; }

/* ------------------------------
   BUTTONS
------------------------------ */
.primary-btn{
  background:var(--brand);
  color:#fff;
  padding:12px 22px;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1.2;
}

.primary-btn:hover{ background:var(--brand-dark); }

.small-btn{
  background:var(--brand);
  color:#fff;
  padding:8px 12px;
  font-size:14px;
  border-radius:var(--radius);
  transition:0.15s ease;
}

.small-btn:hover{ background:var(--brand-dark); }

.save-subtab-btn{
  background:var(--hero);
  color:#fff;
  padding:10px 16px;
  margin-left:auto;
  border-radius:var(--radius);
  font-weight:600;
}

/* AI / Danger */
.ai-btn{
  background:var(--hero);
  color:#fff;
  padding:10px 20px;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ai-btn:hover{ background:#2649ac; }

.danger-btn{
  background:#d9534f;
  color:#fff;
  padding:10px 20px;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
}
.danger-btn:hover{ background:#c9302c; }

/* ✅ NT buttons (single source of truth) */
button.nt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:44px;            /* hard lock */
  padding:0 18px;         /* no vertical padding drift */
  box-sizing:border-box;

  border-radius:12px;
  border:1px solid var(--border);

  font-weight:700;
  line-height:1;          /* prevents baseline drift */
  white-space:nowrap;

  background:var(--hero);
  color:#fff;
}

button.nt-btn.brand{
  background:var(--brand);
  border:none;
}

button.nt-btn.secondary{
  background:var(--hero);
  border:none;
}

button.nt-btn.ghost{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--border);
}

button.nt-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ✅ Rows that hold buttons */
.action-row,
.output-actions{
  display:flex;
  gap:12px;
  align-items:center;  /* same baseline */
  flex-wrap:wrap;
}

/* ------------------------------
   PAGINATION DOTS (single source of truth)
------------------------------ */
.guide-dots{
  display:flex;
  justify-content:center;
  margin-top:18px;
  gap:8px;
}

.pagination-dot{
  width:12px;
  height:12px;
  background:#ccc;
  border-radius:50%;
  cursor:pointer;
  transition:background 0.2s ease;
  display:inline-block;
}

.pagination-dot:hover{ background:var(--brand-dark); }
.pagination-dot.active{ background:var(--brand); }

/* Default guide pages hidden */
.guide-page{
  display:none;
  padding-bottom:10px;
  animation:fadeIn 0.25s ease;
}

/* For classic (non-JS) guidance panels, show first page */
.workspace-guidance .guide-page:first-of-type{ display:block; }

/* BLOG guidance: keep the “first page visible” behavior + extra padding */
.blog-guidance .guide-page{
  padding-bottom:50px !important;
  margin-bottom:20px !important;
  min-height:220px;
}
.blog-guidance .guide-page:first-of-type{ display:block; }

@keyframes fadeIn{
  from{ opacity:0; translate:0 4px; }
  to{ opacity:1; translate:0 0; }
}

/* ------------------------------
   CARDS / TABLES
------------------------------ */
.card, .dash-card{
  background:var(--card);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.dash-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  margin-top:20px;
}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
}
table th, table td{
  border:1px solid var(--border);
  padding:10px;
  font-size:14px;
}
table th{
  background:#eef1f7;
  font-weight:700;
}

/* ------------------------------
   SUBTAB BUTTONS
------------------------------ */
.subtab-bar{ display:flex; gap:10px; margin-bottom:20px; }

.subtab-btn{
  background:#e7ecf6;
  padding:10px 16px;
  border-radius:var(--radius);
  font-size:14px;
  font-weight:600;
}

.subtab-btn.active{
  background:var(--brand);
  color:#fff;
}

/* ------------------------------
   IMAGE PREVIEWS
------------------------------ */
.preview-thumb{
  width:100%;
  border-radius:var(--radius);
  margin-top:12px;
  box-shadow:var(--shadow);
}

.image-slot{ margin-bottom:28px; }
.image-slot label{ font-weight:700; display:block; margin-bottom:6px; }

.image-slot img.preview-thumb{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  margin-top:10px;
  box-shadow:var(--shadow);
  display:block;
}

.image-caption{
  margin-top:8px;
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
  opacity:0.8;
}

/* Example blocks */
.example-block{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 22px;
  background:var(--card);
  padding:12px;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.guide-thumb{
  width:100%;
  height:auto;
  border-radius:10px;
  margin:12px 0;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
  object-fit:contain;
}

.example-caption,
.image-caption{
  font-size:14px;
  color:var(--ink);
  line-height:1.45;
}

/* ------------------------------
   UTILITIES
------------------------------ */
.hidden{ display:none !important; }
.flex{ display:flex; align-items:center; }
.center{ text-align:center; }
.feature-line{ margin-bottom:20px; }

/* ------------------------------
   UPGRADE MODAL
------------------------------ */
.upgrade-modal{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.45);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.upgrade-modal.show{ display:flex; }

.upgrade-modal-content{
  width:420px;
  background:#fff;
  padding:28px;
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,0.25);
  text-align:center;
}

.upgrade-title{
  color:var(--hero);
  font-size:24px;
  margin-bottom:10px;
  font-weight:800;
}
.upgrade-sub{ font-size:14px; color:#444; margin-bottom:18px; }

.upgrade-benefits{ list-style:none; padding:0; margin:0 0 16px 0; }
.upgrade-benefits li{ margin-bottom:6px; font-size:14px; text-align:left; }

.upgrade-close{
  margin-top:16px;
  background:var(--brand);
  color:#fff;
  padding:10px 20px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:700;
  width:100%;
  transition:0.2s ease;
}
.upgrade-close:hover{ background:var(--brand-dark); }



/* ------------------------------
   BLOG BUILDER TABS (hard override)
------------------------------ */
.blog-tabs{ display:flex; gap:12px; margin-bottom:24px; }

.blog-tab{
  padding:10px 18px;
  background:#E8ECFF !important;
  color:var(--hero);
  border:2px solid var(--hero);
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition:0.25s ease;
  font-size:15px;
}
.blog-tab:hover{
  background:var(--hero) !important;
  color:#fff;
  transform:translateY(-2px);
}
.blog-tab.active{
  background:var(--hero) !important;
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 4px 12px rgba(30,58,138,0.25);
}

/* ------------------------------
   HEADER ACTION BARS
------------------------------ */
.feature-header-bar,
.attr-header-bar,
.generic-header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.feature-header-actions,
.attr-header-actions,
.generic-header-actions{
  display:flex;
  gap:12px;
}

/* ------------------------------
   SOCIAL PREVIEW (single source of truth)
------------------------------ */
.social-live-preview{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:12px;
}
.social-preview-block{ display:flex; flex-direction:column; gap:8px; }
.social-preview-label{ font-weight:700; font-size:0.95rem; }

.social-preview-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
}
.social-preview-value{ line-height:1.45; opacity:0.9; }

#socialPreviewMockup,
.preview-box,
.output-box{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

/* Callout box */
.ai-insight-callout{
  margin-top:16px;
  padding:14px 16px;
  border-left:4px solid var(--brand);
  background:rgba(255,102,0,.05);
  border-radius:10px;
}
.ai-insight-callout h4{ margin:0 0 6px; font-weight:700; }
.ai-insight-callout p{ margin:0; font-size:.95rem; line-height:1.45; }

/* ==========================================================
   A+ GUIDANCE WIREFRAMES (BASE STYLES)
========================================================== */
.nt-wireframe{
  margin-top:14px;
  padding:14px;
  border:1px dashed rgba(0,0,0,.28);
  border-radius:12px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,.03),
    rgba(0,0,0,.03) 10px,
    rgba(0,0,0,.01) 10px,
    rgba(0,0,0,.01) 20px
  );
}

.nt-wireframe .wf-title{
  font-weight:800;
  color:var(--hero);
  font-size:13px;
  margin-bottom:10px;
}

.nt-wireframe .wf-sub{
  font-size:12px;
  opacity:.75;
  margin-top:-6px;
  margin-bottom:12px;
}

.wf-tiles{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.wf-tile{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  padding:10px;
  min-width:0;
}
.wf-img{
  width:100%;
  height:74px;
  border-radius:10px;
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
  border:1px solid rgba(0,0,0,.08);
  margin-bottom:8px;
}
.wf-line{
  height:10px;
  border-radius:8px;
  background:rgba(0,0,0,.08);
  margin-bottom:8px;
}
.wf-line.sm{ width:72%; }
.wf-line.xs{ width:52%; }

.wf-table{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.wf-row{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
}
.wf-row > div{
  padding:10px;
  border-top:1px solid rgba(0,0,0,.08);
  border-right:1px solid rgba(0,0,0,.08);
  font-size:12px;
  min-width:0;
}
.wf-row > div:last-child{ border-right:none; }
.wf-row.wf-head > div{
  font-weight:800;
  background:rgba(0,0,0,.04);
  border-top:none;
}

.wf-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.wf-card{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
}
.wf-card .wf-img{ height:86px; margin:0; }
.wf-copy{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.wf-copy .wf-line{ margin-bottom:8px; }

.wf-card-title{ font-weight:800; font-size:14px; line-height:1.2; }
.wf-card-body{ font-size:12.5px; line-height:1.35; opacity:.85; }

.nt-wireframe .wf-img{
  width:100%;
  height:86px;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.03));
  border:1px solid rgba(0,0,0,.10);
  display:block;
}

/* ==========================================================
   FINAL OUTPUT (parent: nav + child module)
========================================================== */
.final-output-nav .side-btn{
  display:block;
  box-sizing:border-box;
  width:100%;
  padding:14px 18px;
  margin-bottom:12px;
  background:var(--hero);
  color:#fff;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
}
.final-output-nav .side-btn:hover{
  background:#152e6d;
  transform:translateX(2px);
}
.final-output-nav .side-btn.active{
  background:var(--brand);
  color:#fff;
  transform:none;
}

.workspace.final-output{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.final-output-nav{ position:sticky; top:24px; }
#finalOutputContent{ min-width:0; }

/* ==========================================================
   FINAL OUTPUT CHILD — 2-col by default
========================================================== */
#finalOutputContent .fo-left:empty{ display:none; }

#finalOutputContent .fo-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px;
  align-items:start;
}
#finalOutputContent .fo-main,
#finalOutputContent .fo-guidance{ min-width:0; }

#finalOutputContent .fo-guidance{
  background:var(--card);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:sticky;
  top:24px;
  height:fit-content;
}

#finalOutputContent .fo-guidance .guide-page{ display:none; }

#finalOutputContent #adsGuideDots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}

#finalOutputContent .ads-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
#finalOutputContent .sub-section-title{ margin:4px 0 4px !important; }
#finalOutputContent textarea.large-output-box{ margin:0 !important; }
#finalOutputContent .output-actions{
  margin-top:8px !important;
  margin-bottom:6px !important;
}

/* ------------------------------
   MOBILE TWEAKS
------------------------------ */
@media (max-width:900px){
  #mainPanel{ margin-left:0; padding:20px; }
  .workspace{ flex-direction:column; }
  .workspace.final-output{ grid-template-columns:1fr; }
  #finalOutputContent .fo-workspace{ grid-template-columns:1fr; }
  #finalOutputContent .fo-guidance{ position:static; }
}

/* ------------------------------
   user-select support
------------------------------ */
.multi-select{
  user-select:none;
  -webkit-user-select:none;
}
/* FIX: keep all nt-btn variants same outer height */
button.nt-btn{
  box-sizing:border-box;
  height:44px;
  padding:0 18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* brand/secondary must keep a border footprint */
button.nt-btn.brand,
button.nt-btn.secondary{
  border:1px solid transparent; /* keeps height equal to ghost */
}
/* BRAND STORY: keep Generate/Save/Clear on ONE line */
.action-row{
  display:grid !important;
  grid-template-columns: 1fr auto auto; /* Generate | Save | Clear */
  gap:12px;
  align-items:center;
}

.action-row .nt-btn{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
}

/* let Generate shrink nicely instead of wrapping */
.action-row .nt-btn.brand{
  width:100%;
  min-width:0;
}
/* Brand Story buttons: remove shadow illusion + hard-lock alignment */
.action-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.action-row .nt-btn{
  height:44px !important;
  padding:0 18px !important;
  margin:0 !important;
  line-height:1 !important;
  box-shadow:none !important;   /* <- key */
  transform:none !important;
  vertical-align:middle !important;
}
/* Brand Story buttons: remove shadow illusion + hard-lock alignment */
.action-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.action-row .nt-btn{
  height:44px !important;
  padding:0 18px !important;
  margin:0 !important;
  line-height:1 !important;
  box-shadow:none !important;   /* <- key */
  transform:none !important;
  vertical-align:middle !important;
}
/* Brand Story action row — single line, no stretch */
.action-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;          /* 👈 prevents wrapping */
}

.action-row .nt-btn{
  flex:0 0 auto;             /* 👈 no grow, no shrink */
  height:44px;
}

/* Generate should NOT be full width */
.action-row .nt-btn.brand{
  width:auto !important;
}
/* INTERNAL LINKS — meta inputs row */
.internal-meta-row{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 120px;
  gap:16px;
  align-items:end;
  margin-bottom:14px;
}

.internal-meta-row .input-block{ margin:0; }
.internal-meta-row label{ font-weight:700; margin-bottom:6px; display:block; }

.internal-meta-row input,
.internal-meta-row select{
  width:100%;
  height:44px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  color:var(--ink);
}

/* actions row */
.internal-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.internal-actions .nt-btn{ height:44px; padding:0 18px; }

/* disabled Share */
#internalShareBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.internal-meta-row{
  display:grid;
  grid-template-columns: 1fr 1fr 120px;
  gap:16px;
}

.internal-meta-row input{
  height:44px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  font-size:12px;
}
/* drop in your global.css (matches your existing input look) */
.nt-input{
  width:100%;
  height:44px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  outline:none;
}
.nt-input:focus{ border-color:var(--hero); }

/* file input styled to match */
.nt-file{
  position:relative;
  display:flex;
  align-items:center;
  height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  overflow:hidden;
}
.nt-file input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.nt-file-label{
  padding:0 14px;
  color:var(--ink);
  opacity:.85;
}
/* Primary AI button (Generate) — already exists */
.ai-btn{
  background:linear-gradient(135deg, #1E3A8A, #2563EB);
  color:#fff;
  border:none;
  padding:12px 20px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(30,58,138,.35);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.ai-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(30,58,138,.45);
}

/* Secondary buttons styled like primary */
.btn-secondary{
  background:linear-gradient(135deg, #1E3A8A, #2563EB);
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(30,58,138,.3);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Slightly toned-down vs Generate */
.btn-secondary{
  opacity:.85;
}

.btn-secondary:hover{
  opacity:1;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(30,58,138,.4);
}

/* Disabled but still visible */
.ai-btn:disabled,
.btn-secondary:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Button row alignment */
.btn-row{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.file-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.file-row input[type="file"]{
  width:100%;
}

.file-row .btn-secondary{
  margin-top:4px;
}
.clipbox{ margin-top:12px; width:100%; }
.clipbox-video video{ width:100%; }

/* ===== Option 1: Lightweight visual timeline ===== */
.clipbox{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  margin-top:12px;
  background:var(--card);
  width:100%;
}
.clipbox-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.clipbox video.preview-thumb{ width:100%; }

.timeline{
  position:relative;
  height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  margin-top:12px;
  background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
  overflow:hidden;
  user-select:none;
}

.timeline-window{
  position:absolute;
  top:0; bottom:0;
  border-radius:10px;
  border:2px solid rgba(30,58,138,0.65);
  background:rgba(30,58,138,0.10);
  pointer-events:none;
}

.timeline-dim{
  position:absolute;
  top:0; bottom:0;
  background:rgba(0,0,0,0.18);
  pointer-events:none;
}
.timeline-dim.left{ left:0; }
.timeline-dim.right{ right:0; }

.handle{
  position:absolute;
  top:6px;
  width:16px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.15);
  background:linear-gradient(180deg, #fff, rgba(255,255,255,0.75));
  box-shadow:0 6px 14px rgba(0,0,0,0.10);
  cursor:ew-resize;
}
.handle:focus{ outline:2px solid rgba(30,58,138,0.6); outline-offset:2px; }

.playhead{
  position:absolute;
  top:4px; bottom:4px;
  width:2px;
  background:rgba(255,102,0,0.75);
  border-radius:2px;
  pointer-events:none;
}

.timeline-meta{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
}

.clipbox-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
/* Layout spacing */
.billing-wrapper{ max-width:1100px; margin:0 auto; padding:22px; }
.billing-header{ margin-bottom:16px; }
.billing-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; }
@media (max-width: 900px){ .billing-grid{ grid-template-columns:1fr; } }

.billing-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow);
}

/* Plan row */
.billing-plan-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }

/* Features list (remove bullets) */
.billing-feature-list{ list-style:none; padding-left:0; margin:12px 0 0; }
.billing-feature-list li{ margin:6px 0; }

/* Inline message (error/info) */
.billing-msg{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow: var(--shadow);
}
.billing-msg.err{ border-color: rgba(239,68,68,0.45); }
.billing-msg.info{ border-color: rgba(30,58,138,0.35); }
.billing-msg.ok{ border-color: rgba(16,185,129,0.45); }
.billing-grid{ align-items:stretch; }
.billing-card{ height:100%; }
.billing-invoices{ margin-top:22px; }
.comm-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.comm-msg{
  opacity:0;
  transform:translateY(2px);
  transition:all .18s ease;
  font-weight:600;
}

.comm-msg.show{
  opacity:1;
  transform:translateY(0);
}
.summary-pane{ display:none; }
.summary-pane.active{ display:block; }
/* ===============================
   SUMMARY TOP TABS
=============================== */
.summary-tabs{
  display:flex;
  gap:12px;
  margin:12px 0 18px;
}

.summary-tab{
  background:#fff;
  border:2px solid #e5e7eb;
  color:#1e3a8a;
  padding:10px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition:all .2s ease;
}

.summary-tab:hover{
  border-color:#1e3a8a;
}

.summary-tab.active{
  background:#1e3a8a;
  color:#fff;
  border-color:#1e3a8a;
  box-shadow:0 4px 10px rgba(30,58,138,.25);
}

/* ===============================
   SUMMARY ACTION BUTTONS
=============================== */
.output-actions{
  display:flex;
  gap:12px;
  margin:14px 0 20px;
}

#refreshSummaryBtn{
  background:#ff6600;
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
}

#copySummaryBtn{
  background:#ff6600;
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:999px;
  font-weight:800;
}

#clearSummaryBtn{
  background:#fff;
  color:#1e3a8a;
  border:2px solid #1e3a8a;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
}
/* ==========================================================
   PDP VISUAL MOCKUP — STYLES (for updated HTML + JS)
   Targets ONLY: .summary-block.pdp-mock and children
========================================================== */

/* ---------- container + header ---------- */
.summary-block.pdp-mock{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow);
  padding:18px;
}

.summary-block.pdp-mock .pdp-top{
  margin-bottom:14px;
}

.summary-block.pdp-mock .pdp-viewtoggles{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.summary-block.pdp-mock .pdp-toggle{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  line-height:1;
  color:var(--hero);
}
.summary-block.pdp-mock .pdp-toggle.active{
  background:var(--hero);
  color:#fff;
  border-color:var(--hero);
  box-shadow:0 4px 10px rgba(30,58,138,.20);
}

/* ---------- frame + device viewport ---------- */
.summary-block.pdp-mock .pdp-frame{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:#fff;
  padding:12px;
  overflow:hidden;
}

.summary-block.pdp-mock .pdp-viewport{
  margin:0 auto;
  border:1px solid rgba(0,0,0,.07);
  border-radius:12px;
  background:#fff;
  overflow:auto;
}

/* desktop canvas baseline (scaled by view) */
.summary-block.pdp-mock .pdp-canvas{
  width:1200px;
  transform-origin:top left;
}

/* sizes */
.summary-block.pdp-mock[data-view="desktop"] .pdp-viewport{ width:min(100%,1200px); height:760px; }
.summary-block.pdp-mock[data-view="tablet"]  .pdp-viewport{ width:min(100%,820px);  height:1040px; }
.summary-block.pdp-mock[data-view="mobile"]  .pdp-viewport{ width:min(100%,390px);  height:844px; }

/* scale */
.summary-block.pdp-mock[data-view="desktop"] .pdp-canvas{ transform:scale(1); }
.summary-block.pdp-mock[data-view="tablet"]  .pdp-canvas{ transform:scale(.70); }
.summary-block.pdp-mock[data-view="mobile"]  .pdp-canvas{ transform:scale(.34); }

/* ---------- layout ---------- */
.summary-block.pdp-mock .pdp-grid{ width:100%; }

.summary-block.pdp-mock .pdp-cols{
  display:grid;
  grid-template-columns: 72px minmax(360px, 1fr) minmax(320px, 420px);
  gap:18px;
  align-items:start;
}

/* left thumbs */
.summary-block.pdp-mock .pdp-left{ width:72px; }
.summary-block.pdp-mock #pdpThumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:72px;
}

/* thumbs are ~1/4 size */
.summary-block.pdp-mock #pdpThumbs .pdp-thumb{
  width:56px;
  height:56px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  padding:4px;
  cursor:pointer;
  flex:0 0 56px;
}
.summary-block.pdp-mock #pdpThumbs .pdp-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.summary-block.pdp-mock #pdpThumbs .pdp-thumb.active{
  outline:2px solid rgba(30,58,138,.35);
  outline-offset:2px;
}

/* hero */
.summary-block.pdp-mock .pdp-center{ min-width:0; }
.summary-block.pdp-mock .pdp-hero{
  width:100%;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fafafa;
  overflow:hidden;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.summary-block.pdp-mock .pdp-hero img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  max-height:420px; /* “half-ish” feel */
}

/* right column (buy box) */
.summary-block.pdp-mock .pdp-right{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:14px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.summary-block.pdp-mock .pdp-title{
  font-size:22px;
  line-height:1.25;
  font-weight:900;
  color:#111;
  margin:0;
}

/* rating row */
.summary-block.pdp-mock .pdp-ratingRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.summary-block.pdp-mock .pdp-rating{
  font-size:14px;
  letter-spacing:1px;
  color:#111;
}

.summary-block.pdp-mock .pdp-link{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  font-weight:900;
  color:var(--hero);
}
.summary-block.pdp-mock .pdp-ratingCount{
  color:#6b7280;
  font-weight:900;
}

/* price row */
.summary-block.pdp-mock .pdp-priceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.summary-block.pdp-mock .pdp-price{
  font-size:24px;
  font-weight:900;
  color:#111;
}
.summary-block.pdp-mock .pdp-shipTag{
  font-size:12px;
  font-weight:900;
  color:#065f46;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  padding:6px 10px;
  border-radius:999px;
}

/* ship options */
.summary-block.pdp-mock .pdp-ship{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.summary-block.pdp-mock .pdp-shipLabel{
  font-size:12px;
  font-weight:900;
  margin-bottom:8px;
  color:#111;
}
.summary-block.pdp-mock .pdp-shipOptions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.summary-block.pdp-mock .pdp-shipBtn{
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
  color:var(--hero);
}
.summary-block.pdp-mock .pdp-shipBtn.active{
  background:var(--hero);
  border-color:var(--hero);
  color:#fff;
}

/* description + bullets */
.summary-block.pdp-mock .pdp-subhead{
  font-size:12px;
  font-weight:900;
  color:#111;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:2px 0 6px;
}
.summary-block.pdp-mock .pdp-description{
  font-size:14px;
  line-height:1.55;
  color:#111;
  white-space:pre-wrap;
}
.summary-block.pdp-mock .pdp-bullets{
  margin:0;
  padding-left:18px;
  font-size:14px;
  line-height:1.45;
  color:#111;
}
.summary-block.pdp-mock .pdp-bullets li{ margin:6px 0; }

/* CTA */
.summary-block.pdp-mock .pdp-cta{
  width:100%;
  max-width:360px;
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px 16px;
  font-weight:900;
  opacity:.85;
  cursor:not-allowed;
}

/* ---------- reviews ---------- */
.summary-block.pdp-mock .pdp-reviews{
  margin-top:18px;
  border-top:1px solid rgba(0,0,0,.10);
  padding-top:14px;
}
.summary-block.pdp-mock .pdp-reviewsHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.summary-block.pdp-mock .pdp-reviewsHead h4{
  margin:0;
  font-size:16px;
  font-weight:900;
  color:#111;
}

.summary-block.pdp-mock .pdp-reviewsGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap:12px;
}

/* review card */
.summary-block.pdp-mock .pdp-reviewCard{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px;
  background:#fff;
  min-width:0;
}
.summary-block.pdp-mock .pdp-reviewTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.summary-block.pdp-mock .pdp-reviewStars{
  font-size:12px;
  letter-spacing:1px;
  color:#111;
  white-space:nowrap;
}
.summary-block.pdp-mock .pdp-reviewTitle{
  font-weight:900;
  font-size:12px;
  color:#111;
  text-align:right;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.summary-block.pdp-mock .pdp-reviewBody{
  font-size:12.5px;
  line-height:1.4;
  color:#111;
  opacity:.9;
}
.summary-block.pdp-mock .pdp-reviewMeta{
  margin-top:10px;
  font-size:11px;
  color:#6b7280;
  font-weight:700;
}

/* ---------- view-specific internal tweaks ---------- */
/* Tablet: simplify layout a bit */
.summary-block.pdp-mock[data-view="tablet"] .pdp-cols{
  grid-template-columns: 72px minmax(320px, 1fr);
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-right{
  grid-column: 1 / -1;
}

/* Mobile: stack */
.summary-block.pdp-mock[data-view="mobile"] .pdp-cols{
  grid-template-columns: 1fr;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-left{
  width:auto;
}
.summary-block.pdp-mock[data-view="mobile"] #pdpThumbs{
  flex-direction:row;
  width:auto;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-reviewsGrid{
  grid-template-columns: 1fr;
}

/* Safety: prevent global max-width rules from breaking the canvas */
.summary-block.pdp-mock .pdp-canvas *{ max-width:none; }
.summary-block.pdp-mock img{ max-width:100%; }
/* ==========================================================
   PDP MOCK — FIXED DESKTOP GRID + PLATFORM SKINS
   Put at VERY END of global.css
========================================================== */

/* --- base scope --- */
.summary-block.pdp-mock .pdp-frame,
.summary-block.pdp-mock .pdp-viewport,
.summary-block.pdp-mock .pdp-canvas{ max-width:none !important; }

.summary-block.pdp-mock .pdp-grid{ width:100% !important; }

/* --- FORCE the 3-column desktop grid (this fixes your screenshot) --- */
.summary-block.pdp-mock .pdp-cols{
  display:grid !important;
  grid-template-columns: 72px 520px minmax(320px, 1fr) !important; /* thumbs | hero | buybox */
  gap:18px !important;
  align-items:start !important;
}

/* thumbs (left) */
.summary-block.pdp-mock .pdp-left{
  width:72px !important;
  min-width:72px !important;
  max-width:72px !important;
}
.summary-block.pdp-mock #pdpThumbs{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  width:72px !important;
}
.summary-block.pdp-mock #pdpThumbs .pdp-thumb{
  width:56px !important;
  height:56px !important;
  padding:4px !important;
  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:#fff !important;
}

/* hero (center) */
.summary-block.pdp-mock .pdp-center{
  width:520px !important;
  max-width:520px !important;
  min-width:520px !important;
}
.summary-block.pdp-mock .pdp-hero{
  width:520px !important;
  height:520px !important; /* stops “full screen” hero */
  max-width:520px !important;
  border-radius:14px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background:#fafafa !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.summary-block.pdp-mock .pdp-hero img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* buybox (right) */
.summary-block.pdp-mock .pdp-right{
  min-width:0 !important;
  width:100% !important;
  border-radius:14px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  padding:14px !important;
  background:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

/* reviews row */
.summary-block.pdp-mock .pdp-reviewsGrid{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(160px,1fr)) !important;
  gap:12px !important;
}

/* --- Tablet + Mobile behaviors (still uses your data-view) --- */
.summary-block.pdp-mock[data-view="tablet"] .pdp-cols{
  grid-template-columns: 72px minmax(320px, 1fr) !important;
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-center{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-hero{
  width:100% !important;
  max-width:560px !important;
  height:560px !important;
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-right{
  grid-column: 1 / -1 !important;
}

.summary-block.pdp-mock[data-view="mobile"] .pdp-cols{
  grid-template-columns: 1fr !important;
}
.summary-block.pdp-mock[data-view="mobile"] #pdpThumbs{
  flex-direction:row !important;
  width:auto !important;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-center,
.summary-block.pdp-mock[data-view="mobile"] .pdp-hero{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:360px !important;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-reviewsGrid{
  grid-template-columns:1fr !important;
}

/* ==========================================================
   PLATFORM SKINS
   Add data-platform="amazon" or "walmart" on .summary-block.pdp-mock
   Example: <div class="summary-block pdp-mock" data-view="desktop" data-platform="amazon">
========================================================== */

/* --- AMAZON feel --- */
.summary-block.pdp-mock[data-platform="amazon"] .pdp-title{
  font-size:20px !important;
  font-weight:800 !important;
  color:#0F1111 !important;
}
.summary-block.pdp-mock[data-platform="amazon"] .pdp-link{
  color:#007185 !important;
  font-weight:700 !important;
}
.summary-block.pdp-mock[data-platform="amazon"] .pdp-price{
  color:#B12704 !important;
  font-weight:900 !important;
}
.summary-block.pdp-mock[data-platform="amazon"] .pdp-cta{
  background:#FFD814 !important;
  color:#111 !important;
  border:1px solid #FCD200 !important;
  opacity:1 !important;
}
.summary-block.pdp-mock[data-platform="amazon"] .pdp-shipBtn.active{
  background:#0F1111 !important;
  border-color:#0F1111 !important;
}

/* --- WALMART feel --- */
.summary-block.pdp-mock[data-platform="walmart"] .pdp-title{
  font-size:21px !important;
  font-weight:900 !important;
  color:#041E42 !important;
}
.summary-block.pdp-mock[data-platform="walmart"] .pdp-link{
  color:#0071DC !important;
  font-weight:800 !important;
}
.summary-block.pdp-mock[data-platform="walmart"] .pdp-price{
  color:#041E42 !important;
  font-weight:900 !important;
}
.summary-block.pdp-mock[data-platform="walmart"] .pdp-cta{
  background:#0071DC !important;
  color:#fff !important;
  opacity:1 !important;
}
.summary-block.pdp-mock[data-platform="walmart"] .pdp-shipTag{
  background:rgba(0,113,220,.08) !important;
  border-color:rgba(0,113,220,.25) !important;
  color:#041E42 !important;
}
/* PDP CTA — desktop width fix */
.summary-block.pdp-mock .pdp-cta{
  width:auto !important;
  max-width:none !important;
  align-self:flex-start !important;  /* don’t stretch */
  padding:12px 22px !important;
  min-width:220px;                  /* optional */
}

/* keep tablet/mobile full width */
.summary-block.pdp-mock[data-view="tablet"] .pdp-cta,
.summary-block.pdp-mock[data-view="mobile"] .pdp-cta{
  width:100% !important;
  align-self:stretch !important;
}
/* PDP tablet/mobile — stop double-scale + fix layout */
.summary-block.pdp-mock[data-view="tablet"]  .pdp-canvas,
.summary-block.pdp-mock[data-view="mobile"]  .pdp-canvas{
  transform:none !important;     /* no zoom */
  width:100% !important;
}

/* tablet viewport should be “real” tablet width */
.summary-block.pdp-mock[data-view="tablet"] .pdp-viewport{
  width: 820px !important;
  max-width: 100% !important;
  height: 980px !important;
}

/* tablet layout: 2 cols (thumbs + hero), buybox below */
.summary-block.pdp-mock[data-view="tablet"] .pdp-cols{
  grid-template-columns:72px minmax(0,1fr) !important;
  align-items:start !important;
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-center{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-hero{
  width:100% !important;
  height:auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 520px !important;   /* keeps it sane */
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-right{
  grid-column:1 / -1 !important;
  width:100% !important;
}

/* tablet reviews: 2 per row */
.summary-block.pdp-mock[data-view="tablet"] .pdp-reviewsGrid{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

/* mobile: stack everything, thumbs row */
.summary-block.pdp-mock[data-view="mobile"] .pdp-viewport{
  width: 390px !important;
  max-width: 100% !important;
  height: 844px !important;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-cols{
  grid-template-columns:1fr !important;
}
.summary-block.pdp-mock[data-view="mobile"] #pdpThumbs{
  flex-direction:row !important;
  width:auto !important;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-hero{
  max-width:none !important;
}
/* PDP: Ships pill under price, left aligned (all views) */
.summary-block.pdp-mock .pdp-priceRow{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  justify-content:flex-start !important;
  gap:10px 12px !important;
}

.summary-block.pdp-mock .pdp-price{
  order:1 !important;
}

.summary-block.pdp-mock .pdp-shipTag{
  order:2 !important;
  flex:0 0 100% !important;     /* forces new line */
  margin:6px 0 0 !important;   /* under price */
  align-self:flex-start !important;
  position:static !important;
  inset:auto !important;
  float:none !important;
}

/* A+ unified action row */
.aplus-module .output-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;      /* 🔑 prevent second row */
}

/* Filename input shouldn’t push buttons */
.aplus-module .output-actions .nt-input {
  max-width: 360px;       /* adjust if needed */
  flex: 0 0 auto;
}

/* Buttons never stretch */
.aplus-module .output-actions .small-btn {
  white-space: nowrap;
}
/* ================================
   PDP MOCK — AMAZON DEFAULT LAYOUT
================================ */
.pdp-mock { width:100%; }
.pdp-frame.amazon{
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

/* header */
.pdp-amz-head{ margin-bottom: 10px; }
.pdp-amz-breadcrumb{ font-size:12px; opacity:.75; margin-bottom:6px; }
.pdp-amz-title{ font-size:20px; font-weight:900; line-height:1.25; }
.pdp-amz-rating{ display:flex; gap:10px; align-items:center; margin-top:6px; font-size:13px; }

/* 3-col grid */
.pdp-amz-grid{
  display:grid;
  grid-template-columns: 56px minmax(340px, 520px) minmax(280px, 1fr);
  gap: 16px;
  align-items:start;
}

/* thumbs rail */
.pdp-amz-rail{ position: sticky; top: 10px; }
.pdp-amz-thumbs{ display:flex; flex-direction:column; gap:8px; }
.pdp-amz-thumbs .pdp-thumb{
  width: 52px;
  height: 52px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  overflow:hidden;
  background:#fff;
}
.pdp-amz-thumbs .pdp-thumb.active{ outline: 2px solid rgba(0,0,0,.35); }

/* hero */
.pdp-amz-hero .pdp-heroWrap{
  width:100%;
  aspect-ratio: 1 / 1;
  background:#f2f2f2;
  border-radius: 12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pdp-amz-hero img{ width:100%; height:100%; object-fit:contain; }
.pdp-heroCap{ font-size:12px; opacity:.7; margin-top:8px; }

/* buybox */
.pdp-amz-buybox{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 12px;
}
.pdp-amz-priceRow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pdp-price{ font-size:22px; font-weight:900; }
.pdp-stock{ font-size:13px; font-weight:800; opacity:.8; }
.pdp-amz-cta{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.pdp-amz-btn{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight:900;
  cursor:pointer;
}
.pdp-amz-btn.primary{ background:#111; color:#fff; border-color:#111; }

.pdp-desc{ margin-top:10px; font-size:13px; line-height:1.45; }
.pdp-bullets{ margin:10px 0 0; padding-left:18px; font-size:13px; }
.pdp-bullets li{ margin:6px 0; }

/* A+ + Reviews */
.pdp-aplus{ margin-top:14px; border-top:1px solid rgba(0,0,0,.10); padding-top:12px; }
.pdp-aplusBox{ border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:12px; margin-top:8px; }
.pdp-reviews{ margin-top:14px; }
.pdp-reviewsGrid{ display:grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap:12px; }

/* view toggles (desktop/tablet/mobile) */
.pdp-mock[data-view="tablet"] .pdp-frame.amazon{ max-width: 900px; }
.pdp-mock[data-view="tablet"] .pdp-amz-grid{
  grid-template-columns: 56px minmax(300px, 1fr);
}
.pdp-mock[data-view="tablet"] .pdp-amz-buybox{ grid-column: 1 / -1; }

.pdp-mock[data-view="mobile"] .pdp-frame.amazon{ max-width: 520px; padding: 10px; }
.pdp-mock[data-view="mobile"] .pdp-amz-grid{
  grid-template-columns: 1fr;
}
.pdp-mock[data-view="mobile"] .pdp-amz-rail{ position:static; }
.pdp-mock[data-view="mobile"] .pdp-amz-thumbs{ flex-direction:row; flex-wrap:wrap; }
.pdp-mock[data-view="mobile"] .pdp-reviewsGrid{ grid-template-columns: 1fr; }
/* ================================
   SUMMARY PDP — AMAZON MOCK STYLES
================================= */
.pdp-frame.amazon{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:16px;
}

.pdp-amz-head{ margin-bottom:12px; }
.pdp-amz-breadcrumb{ font-size:12px; opacity:.7; margin-bottom:8px; }
.pdp-amz-title{ font-size:22px; font-weight:900; line-height:1.2; margin-bottom:8px; }
.pdp-amz-rating{ display:flex; align-items:center; gap:8px; font-size:13px; }
.pdp-stars{ letter-spacing:1px; }
.pdp-link{ background:transparent; border:0; padding:0; cursor:pointer; text-decoration:underline; font-size:13px; }

.pdp-amz-grid{
  display:grid;
  grid-template-columns: 56px minmax(280px, 520px) minmax(240px, 320px);
  gap:16px;
  align-items:start;
}

.pdp-amz-rail{ position:sticky; top:16px; }
.pdp-amz-thumbs{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pdp-thumb{
  width:56px;
  height:56px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  background:#fff;
  padding:0;
  cursor:pointer;
  overflow:hidden;
}
.pdp-thumb.active{ outline:2px solid rgba(0,0,0,.35); }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.pdp-amz-hero .pdp-heroWrap{
  width:100%;
  aspect-ratio: 1 / 1;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f2f2f2;
}
#pdpHeroImg{ width:100%; height:100%; object-fit:contain; display:block; }
.pdp-heroCap{ font-size:12px; opacity:.7; margin-top:8px; }

.pdp-amz-buybox{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:12px;
  position:sticky;
  top:16px;
  background:#fff;
}
.pdp-amz-priceRow{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.pdp-price{ font-size:22px; font-weight:900; }
.pdp-stock{ font-weight:900; font-size:12px; opacity:.8; }

.pdp-amz-cta{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.pdp-amz-btn{
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  background:#fff;
}
.pdp-amz-btn.primary{
  background:#ffd814;
  border-color:#fcd200;
}

.pdp-desc{ font-size:13px; line-height:1.4; margin:10px 0; opacity:.9; }
.pdp-bullets{ margin:0; padding-left:16px; font-size:13px; line-height:1.4; }
.pdp-bullets li{ margin:6px 0; }

.pdp-aplus{
  margin-top:16px;
  border-top:1px solid rgba(0,0,0,.10);
  padding-top:14px;
}
.pdp-aplusHeader{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.pdp-aplusBox{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:12px;
  min-height:72px;
  background:#fff;
}

.pdp-reviews{ margin-top:16px; }
.pdp-reviewsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.pdp-reviewCard{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px;
  background:#fff;
  font-size:12px;
}

/* Views */
.summary-block.pdp-mock[data-view="tablet"] .pdp-amz-grid{
  grid-template-columns: 56px 1fr;
}
.summary-block.pdp-mock[data-view="tablet"] .pdp-amz-buybox{
  grid-column: 1 / -1;
  position:static;
}

.summary-block.pdp-mock[data-view="mobile"] .pdp-amz-grid{
  grid-template-columns: 1fr;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-amz-rail{
  position:static;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-amz-thumbs{
  flex-direction:row;
  flex-wrap:wrap;
}
.summary-block.pdp-mock[data-view="mobile"] .pdp-amz-buybox{
  position:static;
}
/* --- SUMMARY PDP: kill ghost bottom space --- */
.summary-pane[data-pane="pdp"]{ padding-bottom: 0 !important; }
.summary-block.pdp-mock{ margin-bottom: 0 !important; }
.pdp-frame{ height: auto !important; min-height: 0 !important; }
/* Summary page: remove bottom white space from guidance */
.summary-section .fo-guidance{
  display:none !important;
}
.ads-custom-row{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
  background:#fff;
}

.ads-name{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.ads-dims{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.ads-dims > div{
  max-width:110px;
}

.ads-keep{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
/* ================================
   ADS — Banner Builder UI
================================ */

/* custom rows container */
#adsCustomSlotsHost{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

/* Each row (JS should use .nt-ads-slot on the row wrapper) */
.nt-ads-slot{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap:12px;
  align-items:start;
  padding:12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:#fff;
}

.nt-ads-slot .slot-label{
  font-weight:900;
  padding-top:6px;
}

/* Right side content */
.nt-ads-slot .slot-fields{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* naming row (sits ABOVE w/h/keep) */
.nt-ads-slot .slot-naming{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
}

.nt-ads-slot .slot-naming .slot-filename{
  font-size:12px;
  opacity:.75;
}

/* dimensions row */
.nt-ads-slot .slot-dims{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.nt-ads-slot .slot-dims .mini{
  max-width:120px;
}

.nt-ads-slot .slot-keep{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  font-weight:900;
}

/* KEEP: everything up through the custom slot styles (#adsCustomSlotsHost, .nt-ads-slot...) */

/* ================================
   ADS — Banner Viewer (single 1:1)
================================ */
.ads-viewer{ display:grid; grid-template-columns: 360px 1fr; gap:14px; margin-top:12px; }
.ads-image-thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
.ads-thumb{ width:56px; height:56px; border-radius:10px; overflow:hidden; border:1px solid rgba(0,0,0,.18); background:#fff; cursor:pointer; }
.ads-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ads-thumb.active{ box-shadow:0 2px 10px rgba(0,0,0,.12); border-color:rgba(0,0,0,.35); }

.ads-size-pill{ border:1px solid rgba(0,0,0,.15); background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:900; font-size:13px; }
.ads-size-pill.active{ border-color: rgba(0,0,0,.28); box-shadow: 0 2px 10px rgba(0,0,0,.10); }

.ads-viewer-stage{
  border:1px dashed rgba(0,0,0,.18);
  border-radius:12px;
  background:#fff;
  padding:12px;
  overflow:auto;          /* true size scroll */
  max-height:520px;
}

.ads-viewer-banner{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  transform-origin: top left; /* fit mode scaling */
}

.ads-viewer-banner .pad{ width:100%; height:100%; display:grid; grid-template-columns:38% 62%; }
.ads-viewer-banner .img{ background:#f6f6f6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ads-viewer-banner .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ads-viewer-banner .copy{ padding:14px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.ads-viewer-banner .copy .h{ font-weight:900; font-size:22px; line-height:1.12; }
.ads-viewer-banner .copy .p{ font-size:15px; line-height:1.35; opacity:.92; }
.ads-viewer-banner .copy .cta{
  margin-top:auto; align-self:flex-start;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:14px;
  background:#fff;
  white-space:nowrap;
}

@media (max-width: 900px){
  .ads-viewer{ grid-template-columns: 1fr; }
}
/* PROFESSIONAL ADS VIEWER SKIN (drop-in overrides) */

/* Layout polish */
.ads-viewer{ gap:16px; }
.ads-viewer-left{ padding-right:8px; }
.ads-viewer-right{ min-width:360px; }

.ads-viewer-meta{
  display:flex; flex-direction:column; gap:6px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:var(--card);
}
#adsViewerLabel{ font-size:18px; font-weight:900; }
#adsViewerDims{ opacity:.7; margin-left:6px; }
#adsViewerName{ font-weight:900; }

/* Pills -> clean “chips” */
#adsSizesPills{ gap:8px; }
.ads-size-pill{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:transparent;
  color:var(--ink);
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  line-height:1;
  box-shadow:none;
}
.ads-size-pill:hover{ border-color:rgba(0,0,0,.22); }
.ads-size-pill.active{
  background:rgba(30,58,138,.08);      /* hero tint */
  border-color:rgba(30,58,138,.35);
}

/* Controls: tone down orange, use outline */
#adsToggleFitBtn, #adsCopyBannerNameBtn{
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  color:var(--ink);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
}
#adsToggleFitBtn[aria-pressed="true"]{
  background:rgba(30,58,138,.10);
  border-color:rgba(30,58,138,.35);
}

/* Stage + banner should feel “design tool”, not toy */
.ads-viewer-stage{
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
}
.ads-viewer-banner{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  overflow:hidden;
}

/* Banner internals: calmer typography */
.ads-viewer-banner .pad{ display:grid; grid-template-columns: 40% 60%; height:100%; }
.ads-viewer-banner .img{ background:#f2f4f8; }
.ads-viewer-banner .copy{
  padding:18px;
  display:flex; flex-direction:column; gap:10px;
  justify-content:flex-end;
}
.ads-viewer-banner .h{ font-size:28px; font-weight:900; letter-spacing:-.2px; }
.ads-viewer-banner .p{ font-size:14px; font-weight:600; opacity:.85; line-height:1.35; }
.ads-viewer-banner .cta{
  align-self:flex-start;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:transparent;
  font-weight:900;
}

/* Thumbs: smaller, square, subtle */
.ads-image-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ads-thumb{
  width:54px; height:54px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  overflow:hidden;
}
.ads-thumb img{ width:100%; height:100%; object-fit:cover; }
.ads-thumb.active{ border-color:rgba(30,58,138,.35); box-shadow:0 0 0 3px rgba(30,58,138,.10); }
.ads-bannerViewer--stack{ display:flex; flex-direction:column; gap:12px; }

.ads-topRow{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .ads-topRow{ grid-template-columns: 1fr; }
}

.ads-leftControls, .ads-rightMeta{
  background:var(--card);
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
}

.ads-stageWrap{
  background:var(--card);
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
}

.ads-viewer-stage--full{
  width:100%;
  min-height: 520px;        /* big canvas */
  overflow:auto;            /* true size scroll */
  padding:14px;
  background: rgba(0,0,0,.02);
  border:1px dashed rgba(0,0,0,.14);
  border-radius:14px;
}

/* keep banner true size; fit mode will scale via JS */
#adsViewerBanner{ transform-origin: top left; }
/* SINGLE-COLUMN CUSTOM SLOT */

.nt-ads-slot{
  background:var(--card);
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.slot-title{
  font-weight:900;
  font-size:16px;
}

/* generic block */
.slot-block label{
  font-weight:900;
  display:block;
  margin-bottom:6px;
}
.slot-filename{
  margin-top:6px;
  font-size:13px;
  opacity:.75;
}

/* dimensions */
.slot-dims-row{
  display:flex;
  gap:12px;
}
.dim{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dim-label{
  font-size:12px;
  font-weight:800;
  opacity:.7;
}

/* actions */
.slot-actions{
  display:flex;
  gap:18px;
  align-items:center;
  padding-top:6px;
}
.slot-actions .check{
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:800;
}
/* ===== FORCE ADS VIEWER TO USE FULL “BLOCK CARDS” ===== */
.final-output-ads .ads-topRow{
  display:grid !important;
  grid-template-columns: 320px 1fr !important;
  gap:16px !important;
  align-items:start !important;
}
@media (max-width: 980px){
  .final-output-ads .ads-topRow{ grid-template-columns:1fr !important; }
}

/* remove any inherited card styling on wrappers */
.final-output-ads .ads-leftControls,
.final-output-ads .ads-rightMeta{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

/* each block becomes a card */
.final-output-ads .ads-leftControls .input-block,
.final-output-ads .ads-leftControls .output-actions,
.final-output-ads .ads-leftControls .small-note,
.final-output-ads .ads-rightMeta .ads-viewer-meta,
.final-output-ads .ads-rightMeta .input-block{
  background:var(--card) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:16px !important;
  padding:14px !important;
  box-shadow: var(--shadow) !important;
  margin:0 !important;
}

/* make*
/* ===== FORCE SINGLE-COLUMN ADS VIEWER ===== */

.final-output-ads .ads-topRow{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

/* make everything full width */
.final-output-ads .ads-leftControls,
.final-output-ads .ads-rightMeta{
  width:100% !important;
  max-width:none !important;
}

/* remove any grid leftovers */
.final-output-ads .ads-topRow > *{
  grid-column:auto !important;
}

/* each block is a clean card */
.final-output-ads .ads-leftControls .input-block,
.final-output-ads .ads-leftControls .output-actions,
.final-output-ads .ads-leftControls .small-note,
.final-output-ads .ads-rightMeta .ads-viewer-meta,
.final-output-ads .ads-rightMeta .input-block{
  background:var(--card) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:16px !important;
  padding:16px !important;
  box-shadow: var(--shadow) !important;
}

/* buttons stack */
.final-output-ads .ads-leftControls .output-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
.final-output-ads .ads-leftControls .small-btn{
  width:100% !important;
}

/* kill media query grids if any exist */
@media (min-width: 0px){
  .final-output-ads .ads-topRow{
    grid-template-columns:none !important;
  }
}
/* add if you don’t already have a pill */
.nt-pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  font-weight:800;
  font-size:13px;
}

/* collapse states */
.ads-collapse.is-disabled{
  opacity:.55;
  pointer-events:none;
  filter:grayscale(1);
}
.ads-collapse.is-enabled{
  opacity:1;
  pointer-events:auto;
  filter:none;
}
/* ================================
   SUMMARY FOOTER ACTIONS
================================ */

.summary-bottom-bar{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Make share wrapper not break layout */
.nt-share{
  position:relative;
  display:flex;
}

/* Optional: make buttons visually distinct */
.summary-bottom-bar{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.summary-bottom-bar #copySummaryBtn,
.summary-bottom-bar #shareSummaryBtn{
  background:#1E3A8A !important;
  color:#fff !important;
  border-color:transparent !important;
}
.summary-bottom-bar{
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--bg, #f5f7fb);
  padding: 10px 0;
}

.summary-pane{
  padding-bottom: 90px; /* space for the sticky bottom bar */
}
.pdp-mock.is-mobile .pdp-frame{
  max-width:390px;
  margin: 0 auto;
  background:#fff;
  border-radius:32px;
  padding:14px 10px 18px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.25),
    0 0 0 8px #111;
  position:relative;
}

.pdp-mock.is-mobile .pdp-frame::before{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:140px;
  height:20px;
  background:#111;
  border-radius:0 0 14px 14px;
}

.pdp-mock.is-mobile .pdp-amz-head{
  padding-top:24px;
}
.pdp-mock.is-mobile .pdp-frame{
  margin: 24px auto 0; /* space from buttons */
}
.summary-bottom-bar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
#goToAdsBtn{
  margin-left:12px;
}
label{margin-bottom:6px;display:block;}
.step-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.step-actions > *{
  margin:0;
}

.share-wrapper{
  position:relative;
}
.workspace.press-release details.input-block input{
  margin-bottom:8px;
}

.workspace.press-release details.input-block input:last-child{
  margin-bottom:0;
}
#pressReleaseShareMenu .nt-btn{
  margin:0;
}
#pressReleaseShareMenu .nt-btn + .nt-btn{
  margin-top:6px;
}
/* press release – media contact only */
.workspace.press-release .media-contact-stack .input-block{
  padding:0;
  margin:0;
}

.workspace.press-release .media-contact-stack .input-block input{
  width:100%;
}
.workspace.press-release .media-contact-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.workspace.press-release input[type="date"].nt-input,
.workspace.press-release #prDate{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  padding:12px 14px;
  background:var(--card);
}
/* ==========================================================
   PDP BASE (Amazon default)
========================================================== */

.pdp-mock{
  --pdp-font: Arial, Helvetica, sans-serif;
  --pdp-accent: #ff9900;
  --pdp-bg: #ffffff;
  --pdp-border: #ddd;
  --pdp-density: 1;

  font-family: var(--pdp-font);
  background: var(--pdp-bg);
  border: 1px solid var(--pdp-border);
  padding: calc(16px * var(--pdp-density));
  border-radius: 6px;
}

.pdp-mock h1,
.pdp-mock h2,
.pdp-mock h3{
  font-weight: 700;
}

.pdp-cta{
  background: var(--pdp-accent);
  color: #fff;
  border-radius: 4px;
  padding: 12px 16px;
  font-weight: 700;
}

/* ==========================================================
   BIG BOX RETAIL
========================================================== */

.pdp-amazon{
  --pdp-accent:#ff9900;
}

.pdp-walmart{
  --pdp-accent:#0071dc;
  --pdp-density:1.05;
}

.pdp-target{
  --pdp-accent:#cc0000;
  --pdp-density:0.95;
}

.pdp-costco{
  --pdp-accent:#d32027;
  --pdp-density:0.9;
}

.pdp-homedepot{
  --pdp-accent:#f96302;
}

.pdp-lowes{
  --pdp-accent:#004990;
}

/* ==========================================================
   MARKETPLACE / PLATFORM GROUPS
========================================================== */

.pdp-marketplace{
  --pdp-accent:#666;
}

.pdp-dtc{
  --pdp-accent:#111;
  --pdp-border:#e5e5e5;
}

.pdp-global{
  --pdp-accent:#444;
}

/* ==========================================================
   CATEGORY GROUPS
========================================================== */

.pdp-fashion{
  --pdp-font: system-ui, -apple-system, BlinkMacSystemFont;
  --pdp-density:1.1;
}

.pdp-electronics{
  --pdp-accent:#0046be;
}

.pdp-home{
  --pdp-accent:#7f187f;
}

.pdp-grocery{
  --pdp-accent:#2e7d32;
}

.pdp-beauty{
  --pdp-accent:#e91e63;
}

.pdp-pets{
  --pdp-accent:#795548;
}

.pdp-office{
  --pdp-accent:#1976d2;
}

.pdp-resale{
  --pdp-accent:#555;
}

/* ==========================================================
   TIKTOK SHOP (mobile-first)
========================================================== */

.pdp-tiktok{
  --pdp-font: system-ui, -apple-system, BlinkMacSystemFont;
  --pdp-accent:#000;
  --pdp-density:1.25;
  border-radius: 12px;
}

.pdp-tiktok .pdp-cta{
  border-radius: 999px;
}

/* ==========================================================
   SAFETY FALLBACK
========================================================== */

.pdp-mock:not([class*="pdp-"]){
  --pdp-accent:#ff9900;
}
/* Intent guidance: clean bullet styling */
.fo-guidance .ai-insight-callout ul{
  margin: 10px 0 0;
  padding-left: 18px;          /* controls bullet indent */
  list-style: disc;
}

.fo-guidance .ai-insight-callout li{
  margin: 6px 0;
  padding-left: 2px;
  line-height: 1.35;
}

/* stops “bullet floating in the gutter” look */
.fo-guidance .ai-insight-callout ul,
.fo-guidance .ai-insight-callout li{
  list-style-position: outside;
}

/* if any global styles added fake bullets, kill them */
.fo-guidance .ai-insight-callout li::before{
  content: none !important;
}
/* spacing between naming “pills” (selects) */
.naming-select-group{
  display:flex;
  flex-direction:column;
  gap:10px; /* tweak */
}

.naming-select-group .naming-box{
  margin:0; /* let gap do the work */
}
/* Force this page to be single-column (guidance flows under inputs) */
.workspace{ display:block; }
.fo-guidance.under-inputs{ width:100%; margin-top:16px; }

/* Intent-like callout styling */
#attrGuidance .guide-page{
  background:#fbf4f0;
  border-left:4px solid #ff6600;
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:16px;
}

/* Pager behavior */
#attrGuidance .guide-page{ display:none; }
#attrGuidance .guide-page.is-active{ display:block; }

/* Dots */
#attrGuideDots{ display:flex; gap:10px; align-items:center; padding:6px 2px; }
#attrGuideDots .pagination-dot{
  width:10px; height:10px; border-radius:999px;
  background:rgba(0,0,0,.18);
}
#attrGuideDots .pagination-dot.active{ background:#ff6600; }
/* flows below inputs */
.workspace-guidance.under-inputs{
  width:100%;
  margin-top:16px;
}
/* 3-column naming boxes */
#subtabContainer .naming-select-group{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
}
#subtabContainer .naming-box{
  width:100% !important;
  min-width:0 !important;
}

/* Same pill styling for multi-selects (Category/Colors/etc) */
#subtabContainer .multi-select{
  position:relative;
  width:100%;
}
#subtabContainer .multi-select-display{
  width:100% !important;
  display:block !important;
  text-align:left;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  line-height:1.2;
}
#subtabContainer .multi-select.open .multi-select-display{
  border-color: rgba(30,58,138,.55);
  box-shadow: 0 0 0 3px rgba(30,58,138,.12);
}

/* Dropdown panel */
#subtabContainer .multi-select-dropdown{
  position:absolute;
  z-index:50;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:14px;
  padding:10px;
  max-height:260px;
  overflow:auto;
  display:none; /* JS toggles to block */
}
#subtabContainer .multi-select-dropdown label{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
}
#subtabContainer .multi-select-dropdown label:hover{
  background: rgba(0,0,0,.04);
}

/* Responsive */
@media (max-width: 900px){
  #subtabContainer .naming-select-group{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  #subtabContainer .naming-select-group{ grid-template-columns: 1fr !important; }
}