/* =======================================================================
   Unified Light Theme Styles (style.css) — cleaned
   - Single :root token set (merged)
   - One base block
   - Unified buttons / inputs / tables
   - Mobile pop-up nav retained
   - Toolbar styles REMOVED
   ======================================================================= */

:root{
  /* Theme */
  --bg:#f9fafb;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --card:#ffffff;
  --text:#0f172a;
  --text-2:#334155;
  --muted:#475569;

  /* Brand & states */
  --primary:#2563eb;
  --primary-ink:#ffffff;
  --primary-weak:#e0ecff;
  --ring:#2563eb;
  --ok:#16a34a;
  --bad:#dc2626;
  --warn:#ca8a04;

  /* Border & misc */
  --border:#e5e7eb;
  --radius:12px;
  --input-bg:#ffffff;

  /* Shadows */
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:16px}
img, video, canvas{max-width:100%;height:auto}

/* ---------- Layout ---------- */
main.container{padding:20px 16px 40px}
footer{border-top:1px solid var(--border); background:#fff}
.footer{display:flex; align-items:center; gap:10px; padding:12px 16px; justify-content:space-between; flex-wrap:wrap}
.footer__text{font-weight:500}
.footer__version{font-size:.85rem; color:var(--muted); background:var(--primary-weak); border-radius:999px; padding:4px 10px; display:inline-flex; align-items:center; gap:6px}

/* ---------- Buttons ---------- */
.btn, .icon-btn{
  --btn-bg:var(--primary);
  --btn-ink:var(--primary-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:.5rem .9rem;
  border-radius:8px;
  border:1px solid var(--ring);
  background:var(--btn-bg);
  color:var(--btn-ink);
  font-weight:600; letter-spacing:.2px; line-height:1;
  text-decoration:none; cursor:pointer;
}
.btn:hover, .icon-btn:hover{filter:brightness(.97)}
.btn:active, .icon-btn:active{transform:translateY(1px)}
.btn.secondary{
  --btn-bg:#f1f5f9; --btn-ink:#334155;
  background:var(--btn-bg); color:var(--btn-ink); border-color:#cbd5e1;
}
.btn.inline{padding:.4rem .65rem; font-size:.92rem}
.icon-btn{padding:.5rem .625rem}
.icon-btn.square{width:36px; height:36px; padding:0}

.download-page{display:flex; flex-direction:column; gap:12px; padding:10px 0}
.download-page__card{display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2)}
.download-page__pitch{margin:0; color:var(--text); font-size:1rem; line-height:1.6}
.download-page__version{margin:0; font-weight:600; color:var(--muted)}
.download-page__links{display:flex; gap:10px; flex-wrap:wrap}
.download-page__link{text-decoration:none}
.download-page__note{margin:0; color:var(--muted); font-size:.9rem}
.download-page__logo{width:30%; max-width:180px; min-width:80px; height:auto; border-radius:12px; box-shadow:0 4px 14px rgba(15,23,42,.08)}
.download-page__share{display:flex; align-items:center; gap:10px}
.download-page__share-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-weight:600}
.download-page__share-btn:hover{background:var(--primary-weak)}

/* ---------- Inputs, Selects, Textareas ---------- */
.form input,
.form textarea,
.form select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="password"],
select,
textarea{
  display:block;
  width:100%;
  max-width:520px;
  margin:8px 0;
  padding:.55rem .7rem;
  background:var(--input-bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:1rem;
  line-height:1.4;
  box-sizing:border-box;
}
.form-split{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.form-split > *{
  flex:1 1 160px;
  min-width:140px;
  margin:8px 0;
}
.form-split > .form-select--code{
  flex:0 0 150px;
  max-width:180px;
}
.form-split > .form-select--country{
  flex:0 0 220px;
  max-width:260px;
}
.form-split > .form-input--phone{
  flex:1 1 220px;
}
.form-split > .form-input--postal{
  flex:1 1 180px;
}
.form-split > select.form-select--code,
.form-split > select.form-select--country{padding-right:2.2rem}
.form-split > select.form-select--code{min-width:0}
.form-split > select.form-select--country{min-width:0}
@media (max-width:640px){
  .form-split > .form-select--code,
  .form-split > .form-select--country,
  .form-split > .form-input--phone,
  .form-split > .form-input--postal{flex:1 1 auto; max-width:100%}
}
.form textarea, textarea{min-height:110px; resize:vertical}

/* Make selects match input height (normalize look) */
.form select, select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-position:right .7rem center;
  background-repeat:no-repeat;
  background-size:12px;
}

/* Placeholder */
.form input::placeholder,
.form textarea::placeholder,
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="date"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder{
  color:#94a3b8; opacity:1;
}

.password-field{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:240px;
}

.password-field input[type="password"],
.password-field input[type="text"]{
  margin:0;
  flex:1 1 auto;
}

.password-field .icon-btn{
  flex:0 0 auto;
  padding:.45rem;
  min-width:unset;
}

.password-field .icon-btn.square{
  width:34px;
  height:34px;
}

/* Focus ring */
input:focus, select:focus, textarea:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
  outline:0;
}

/* ---------- Basic TABLE (outside admin) ---------- */
.table-wrap{overflow:auto; -webkit-overflow-scrolling:touch; width:100%}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden; /* no min-width so it won’t overflow on mobile */
}
th,td{border-bottom:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top}
th{background:var(--surface-2); font-weight:600}
tr:last-child td{border-bottom:none}

/* ---------- Admin .table ---------- */
.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--surface);
}
@media (min-width:761px){ .table{min-width:640px} }
.table thead th{
  background:var(--surface-2);
  text-align:left;
  padding:10px 12px;
  color:#475569;
  font-size:.9rem;
}
.table tbody td{padding:10px 12px; border-top:1px solid var(--border)}
.table tbody tr:hover{background:#f9fafb}
.table .actions{display:flex; gap:8px; flex-wrap:wrap}
.table .actions form{display:inline-block; margin:0}

/* Status chips */
.chip{display:inline-block; padding:.2rem .5rem; border:1px solid var(--border); border-radius:999px; font-size:.8rem; color:var(--text-2)}
.chip.ok{border-color:#16a34a; color:#166534; background:#dcfce7}
.chip.bad{border-color:#dc2626; color:#b91c1c; background:#fee2e2}

/* Mobile stacked view for .table */
@media (max-width:760px){
  .table-wrap{overflow:auto; -webkit-overflow-scrolling:touch; width:100%}
  .table{width:100%}
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block; width:100%}
  .table tr{border-bottom:1px solid var(--border); padding:8px 0}
  .table td{
    border:0; display:flex; justify-content:space-between; gap:10px; padding:8px 2px;
  }
  .table td::before{
    content:attr(data-label);
    font-weight:600; color:#64748b; margin-right:10px; flex:0 0 auto;
  }
}

/* ---------- Pagination ---------- */
.pagination{display:flex; gap:8px; align-items:center; justify-content:center}
.pagination .btn{min-width:42px; text-align:center}

/* ---------- Flash ---------- */
.flash{ 
  margin:12px 0; padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#f1f5f9;
}
.flash.ok{border-color:#16a34a; background:#dcfce7}
.flash.err{border-color:#dc2626; background:#fee2e2}
.flash.warn{border-color:#d97706;background:#fef3c7}

/* ---------- Badges & Alerts (optional) ---------- */
.status-badge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  border:1px solid var(--border); font-size:.8rem; background:#f8fafc;
}
.status-badge--muted{
  background:#f1f5f9;
  border-color:#d8e3f8;
  color:#475569;
}
.alert-ok{background:#dcfce7; border:1px solid #16a34a; color:#166534}
.alert-err{background:#fdecec; border:1px solid #f5c2c0}
.badge{
  display:inline-block; min-width:18px; padding:1px 6px; margin-left:6px;
  font-size:.78rem; line-height:1.4; border-radius:999px; background:#ef4444; color:#fff; vertical-align:middle;
}
.checkbox{display:inline-flex; align-items:center; gap:6px; font-size:.9rem; color:var(--text)}
.checkbox input{margin:0}

.price-stack{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.price-stack--compact{
  gap:6px;
  font-size:.95rem;
}
.price-stack__sale{
  font-weight:700;
  color:#b91c1c;
  font-size:1.05rem;
}
.price-stack--compact .price-stack__sale{
  font-size:1rem;
}
.price-stack__regular{
  color:#64748b;
  text-decoration:line-through;
  font-weight:600;
}
.price-stack__regular--solo{
  text-decoration:none;
  color:#0f172a;
}
.price-stack__badge{
  background:#fee2e2;
  color:#b91c1c;
  font-size:.75rem;
  font-weight:600;
  padding:2px 8px;
  border-radius:999px;
}
.price-stack--compact .price-stack__badge{
  font-size:.7rem;
  padding:2px 6px;
}

.product-card{display:flex; flex-direction:column; gap:12px; height:100%;}
.product-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  background:#eef2ff;
  color:#3730a3;
  font-size:.75rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
}
.product-card__title{margin:0; font-size:1.05rem; font-weight:600; color:#0f172a;}
.product-card__description{color:#475569; font-size:.95rem; margin:0 0 4px;}
.product-card__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:12px;
}
.product-card--featured{padding:24px; gap:16px;}
.product-card--featured .product-card__title{font-size:1.15rem;}
.product-card--featured .product-card__description{font-size:1rem;}
.product-media--featured{min-height:260px;}
.product-card__price{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ---------- Utilities ---------- */
.hidden{display:none!important}
.right{margin-left:auto}
.left{margin-right:auto}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.muted.small{color:var(--muted); font-size:.85rem}


/* ---------- Cards & Grid ---------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.card + .card{margin-top:14px}
@media (max-width:1024px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px){ .cards{grid-template-columns:repeat(2,1fr)} }

.product-theme-form{display:flex; flex-direction:column; gap:20px;}
.product-theme-field{display:flex; flex-direction:column; gap:8px; max-width:360px;}
.product-theme-field__label{font-weight:600; color:#0f172a;}
.product-theme-field__select{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; font-size:1rem; color:#0f172a; box-shadow:var(--shadow-light, 0 1px 2px rgba(15,23,42,0.05));}
.product-theme-field__select:focus{outline:2px solid rgba(79,70,229,.25); border-color:rgba(79,70,229,.45);}
.product-theme-hints{display:flex; flex-direction:column; gap:6px; max-width:460px;}
.product-theme-hint{margin:0;}
.product-theme-hint--hidden{display:none;}
.site-settings-form{display:flex;flex-direction:column;gap:20px;max-width:520px;}
.site-settings-form .form-field{display:flex;flex-direction:column;gap:8px;}
.site-settings-logo-field input[type="file"]{margin-top:4px;}
.site-settings-logo-messages{margin:8px 0;}
.site-settings-logo-messages:empty{display:none;}
.site-settings-logo-preview{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.site-settings-logo-preview--pending{align-items:flex-start;}
.site-settings-logo-preview[hidden]{display:none;}
.site-settings-logo-preview__image{width:72px;height:72px;object-fit:contain;border:1px solid var(--border);border-radius:12px;padding:8px;background:#fff;box-shadow:var(--shadow-light,0 1px 3px rgba(15,23,42,.1));}
.site-settings-logo-preview__pending-meta{display:flex;flex-direction:column;gap:8px;}
.site-settings-logo-preview__clear{align-self:flex-start;}
.site-settings-logo-remove{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text);}
.site-settings-logo-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.site-settings-logo-picker__input{position:absolute;left:-9999px;top:auto;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none;}
.site-settings-logo-picker__button{display:inline-flex;align-items:center;gap:6px;}
.site-settings-logo-picker__filename{font-size:.9rem;color:var(--muted);min-height:1.2em;display:inline-flex;align-items:center;}
.site-settings-logo-picker__filename[hidden]{display:none;}
.site-settings-logo-picker__filename.has-value{color:var(--text);}
.site-settings-logo-picker__submit{display:inline-flex;align-items:center;gap:6px;}
.site-settings-logo-picker__submit[disabled],.site-settings-logo-picker__submit.is-disabled{opacity:.55;cursor:not-allowed;}

.product-recommendations{display:flex; flex-direction:column; gap:16px;}
.product-recommendations__header{display:flex; flex-direction:column; gap:4px;}
.product-recommendations__header h3{margin:0; font-size:1.2rem;}
.product-recommendations__header p{margin:0;}
.product-recommendations__list{display:flex;flex-wrap:wrap;gap:16px;}
.product-recommendations__list>.product-card{height:100%;flex:1 1 calc(50% - 8px);max-width:calc(50% - 8px);}
.product-recommendations__list>.product-card--featured{height:100%;}
@media (max-width:768px){
  .product-recommendations__list>.product-card{flex-basis:100%;max-width:100%;}
}
.product-recommendations__list>.card{margin-top:0}

/* Inserted extra folder links sit inline like normal links */
#extra-folders a { margin-left:8px; }
/* ---------- Profile layout ---------- */
.profile-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:16px 0}
.profile-grid .card{margin-top:0}
.profile-docs-editor-grid{display:grid; gap:20px; grid-template-columns:1fr; margin-top:20px}
.profile-docs-editor-grid > *{min-width:0}
.profile-docs-picker{margin-bottom:12px}
.doc-picker__display{width:100%; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#f8fafc}
.doc-picker__display:focus{outline:2px solid var(--primary-100); border-color:var(--primary)}
.doc-tree{max-height:400px; overflow:auto; padding:6px 2px}
.doc-tree__list{list-style:none; margin:0; padding-left:16px}
.doc-tree__list > li{margin:4px 0}
.doc-tree__controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.doc-tree__controls--body{margin-bottom:8px}
.doc-tree--dragging .doc-tree__folder{opacity:.9}
.doc-tree__folder--drop > summary{background:var(--primary-100); outline:2px dashed var(--primary-500)}
.doc-tree__folder > summary{cursor:pointer; display:flex; align-items:center; gap:8px; font-weight:700; color:var(--text); justify-content:space-between; padding:4px 6px; border-radius:8px; list-style:none}
.doc-tree__folder > summary::-webkit-details-marker{display:none}
.doc-tree__folder[open] > summary{color:var(--primary); background:var(--primary-50)}
.doc-tree__folder-name{display:inline-flex; align-items:center; gap:6px}
.doc-tree__folder-name::before{content:'📁'; display:inline-block; width:1.2em}
.doc-tree__caret{display:inline-block; transition:transform .18s ease; color:var(--muted);}
.doc-tree__folder[open] .doc-tree__caret{transform:rotate(90deg); color:var(--primary-700)}
.doc-tree__file{border:none; background:transparent; color:var(--primary); cursor:pointer; padding:4px 6px; border-radius:6px; display:inline-flex; align-items:center; gap:6px}
.doc-tree__action{margin-left:auto; border:none; background:var(--primary-100); color:var(--primary-700); padding:4px 6px; border-radius:6px; cursor:pointer; font-size:.875rem}
.doc-tree__action:hover,.doc-tree__action:focus{background:var(--primary-200); outline:none}
.doc-tree__file::before{content:'📄'; display:inline-block; width:1.2em}
.doc-tree__file:hover,.doc-tree__file:focus{background:var(--primary-100); outline:none}
.doc-tree__file--active{background:var(--primary-100); color:var(--primary-800); font-weight:700}
.doc-context{position:absolute; z-index:40; min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.16); padding:8px;}
.doc-context__inner{position:relative; display:flex; flex-direction:column; gap:8px}
.doc-context__title{font-weight:700; word-break:break-all; color:var(--text); padding-right:28px}
.doc-context__actions{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.doc-context__actions button{width:100%; border:1px solid var(--border); background:var(--primary-50); color:var(--primary-800); padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:600}
.doc-context__actions button:hover,.doc-context__actions button:focus{background:var(--primary-100); outline:none}
.doc-context__close{position:absolute; top:-4px; right:-4px; border:none; background:transparent; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--muted)}
.doc-context.is-visible{display:block}
.doc-manager__status{margin:8px 0; font-size:.95rem; color:var(--muted)}
.doc-manager__status strong{color:var(--text)}
.profile-docs-editor-pane{display:flex; flex-direction:column; gap:16px; width:100%}
.profile-docs-editor-pane .wysiwyg-shell{width:100%}
.profile-docs-editor-pane .wysiwyg-editor,
.profile-docs-editor-pane textarea[data-markdown-editor]{width:100%}
.profile-docs-preview-pane{display:flex; flex-direction:column; gap:12px}
.profile-docs-preview-pane .card{margin:0; height:100%;}
.profile-docs-preview-pane [data-markdown-preview]{min-height:260px}
.profile-docs-preview-pane [data-markdown-preview] .responsive-media,
.profile-docs-preview-pane [data-markdown-preview] img,
.profile-docs-preview-pane [data-markdown-preview] video,
.profile-docs-preview-pane [data-markdown-preview] audio{max-width:100%; width:100%; height:auto; display:block; margin-bottom:10px}
.profile-docs-preview-controls{display:flex; flex-wrap:wrap; gap:8px}
.profile-docs-preview-controls .btn-pill{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0.45rem 1rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  font-weight:500;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.profile-docs-preview-controls .btn-pill:hover,
.profile-docs-preview-controls .btn-pill:focus{
  background:rgba(13,110,253,.12);
  color:var(--text);
  border-color:rgba(13,110,253,.4);
  outline:none;
  box-shadow:0 0 0 2px rgba(13,110,253,.15);
}
.profile-docs-preview-controls .btn-pill.on{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 6px 18px rgba(15,23,42,.15);
}
.profile-docs-preview-controls .btn-pill.on:hover,
.profile-docs-preview-controls .btn-pill.on:focus{
  background:var(--primary-dark, var(--primary));
  border-color:var(--primary-dark, var(--primary));
  box-shadow:0 8px 20px rgba(15,23,42,.2);
}
.profile-docs-preview-status{min-height:1.2em; margin-bottom:4px}
.profile-docs-group + .profile-docs-group{margin-top:18px}
.profile-docs-warning{color:#dc2626;font-weight:600;margin:8px 0}
.docs-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.docs-list li{display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between}
.docs-list li a{flex:1 1 auto; min-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.docs-list__info{display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:200px}
.profile-docs-meta{color:var(--muted); font-size:.8rem}
.profile-docs-actions{display:flex; justify-content:flex-end; margin-top:12px}
.wysiwyg-shell{border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.wysiwyg-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); position:relative}
.wysiwyg-toolbar .btn,.wysiwyg-toolbar .icon-btn{margin:0}
.wysiwyg-toolbar__spacer{flex:1 1 auto}
.wysiwyg-icon{display:inline-flex; align-items:center; justify-content:center; width:1.2rem; height:1.2rem; line-height:1}
.wysiwyg-icon svg{width:100%; height:100%; display:block}
.wysiwyg-editor{min-height:260px; padding:14px; font-size:1rem; line-height:1.6; outline:none; white-space:pre-wrap; word-break:break-word; border:1px solid var(--border); border-radius:10px; background:#fff}
.wysiwyg-editor:focus{box-shadow:inset 0 0 0 2px rgba(37,99,235,.15)}
.responsive-media{max-width:100%; width:100%; height:auto; display:block; margin-bottom:10px}
.wysiwyg-editor img,.wysiwyg-editor video{max-width:100%; height:auto; border-radius:8px}
.wysiwyg-editor audio{width:100%}
.responsive-image{max-width:100%; height:auto; border-radius:8px}
.js-has-wysiwyg [data-markdown-editor]{display:none}
.profile-docs-editor-new{display:flex; align-items:center; gap:6px; padding:8px 12px; background:#e2e8f0; border:1px solid var(--border); flex-wrap:nowrap; border-radius:10px}
.profile-docs-editor-new__row{display:flex; align-items:center; gap:6px; width:100%}
.profile-docs-editor-new label{margin:0; white-space:nowrap}
.profile-docs-editor-new input{flex:1 1 220px; min-height:unset}
.profile-docs-editor-new .btn{white-space:nowrap}

.profile-avatar-field{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.profile-avatar-preview{display:flex; align-items:center; gap:12px}
.profile-avatar-preview__image{width:72px; height:72px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(37,99,235,.25)}
.profile-avatar-preview__placeholder{width:72px; height:72px; border-radius:50%; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:600; color:var(--muted); box-shadow:0 0 0 1px var(--border)}
.profile-avatar-remove{display:flex; align-items:center; gap:6px; font-size:.9rem; color:var(--muted); align-self:flex-start; width:100%; justify-content:flex-start; text-align:left}
.profile-avatar-remove input{margin:0}
.card--address-book{padding:20px}
.address-book__layout{display:flex; flex-direction:column; gap:24px}
.address-book__list{overflow:auto}
.address-book__form{flex:0 0 360px; width:100%; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(15,23,42,.08)}
.address-book__form h4{margin-top:0}
.address-book__form label{display:flex; flex-direction:column; gap:6px; font-size:.95rem}
.address-book__form input,.address-book__form textarea,.address-book__form select{width:100%}
.address-book__form textarea{min-height:60px; resize:vertical}
.address-form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px}
.address-form-span{grid-column:1 / -1}
.address-form-phone,.address-form-country{display:flex; gap:10px; align-items:center}
.address-form-phone select,.address-form-country select{flex:0 0 120px}
.address-form-phone input,.address-form-country input{flex:1 1 auto}
.address-form-actions{display:flex; gap:12px; align-items:center; margin-top:16px}
.address-table thead th{text-transform:uppercase; font-size:.75rem; letter-spacing:.05em; color:var(--muted); background:var(--surface-2)}
.address-table tbody td{vertical-align:top; font-size:.95rem}
.address-row__recipient-name{font-weight:600; color:var(--text)}
.address-row__recipient-phone{color:#475569; white-space:nowrap}
.address-row__address,.address-row__country,.address-row__notes{color:var(--text); white-space:pre-line}
.address-row__actions{min-width:150px; display:flex; flex-direction:column; gap:8px}
.address-row__badge{display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; background:rgba(59,130,246,.16); color:#1d4ed8; font-size:.75rem; font-weight:600}
.address-row__buttons{display:flex; gap:8px; flex-wrap:wrap}
.address-row__btn{border:0; background:var(--surface-2); color:#0f172a; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; cursor:pointer; transition:background .2s ease, transform .2s ease}
.address-row__btn:hover{background:rgba(99,102,241,.16); transform:translateY(-1px)}
.address-row__btn:focus{outline:2px solid rgba(99,102,241,.6); outline-offset:2px}
.address-row--default{background:rgba(59,130,246,.08)}
.address-row--editing{box-shadow:inset 0 0 0 2px rgba(99,102,241,.35)}
.address-row__hidden{display:none}
.address-book__list .table{min-width:720px}

@media (min-width:960px){
  .address-book__layout{flex-direction:row; align-items:flex-start}
  .address-book__list{flex:1 1 auto}
  .address-book__form{flex:0 0 340px; max-width:360px}
}

.table-picker{position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column; gap:8px; min-width:180px; z-index:25; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease}
.table-picker.is-visible{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.table-picker[hidden]{display:none!important}
.table-picker__grid{display:grid; grid-template-columns:repeat(5, 28px); grid-template-rows:repeat(5, 28px); gap:4px}
.table-picker__grid button{width:28px; height:28px; border:1px solid var(--border); background:var(--surface-2); border-radius:6px; cursor:pointer; padding:0; transition:background .15s ease, border-color .15s ease}
.table-picker__grid button:hover,.table-picker__grid button:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.table-picker__grid button.is-active{background:var(--primary); border-color:var(--primary); color:#fff}
.table-picker__status{font-size:.85rem; color:var(--muted)}
.table-picker__close{align-self:flex-end; font-size:1.1rem; line-height:1; color:var(--muted); background:none; border:none; cursor:pointer}
.table-picker__close:hover{color:var(--text)}

.upload-progress{margin-top:12px; display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--muted)}
.upload-progress__track{flex:1 1 auto; height:10px; background:var(--surface-2); border-radius:999px; border:1px solid var(--border); overflow:hidden}
.upload-progress__bar{height:100%; width:0; background:var(--primary); transition:width .2s ease}
.upload-progress__text{min-width:42px; text-align:right}
.upload-progress.is-error .upload-progress__bar{background:var(--bad)}
.upload-progress.is-error .upload-progress__text{color:var(--bad)}
.settings-modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; z-index:1100}
.settings-modal[hidden]{display:none}
.settings-modal__backdrop{position:absolute; inset:0; background:rgba(15,23,42,.45)}
.settings-modal__dialog{position:relative; background:#fff; border-radius:16px; box-shadow:0 20px 45px rgba(15,23,42,.25); width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden}
.settings-modal__header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border)}
.settings-modal__body{padding:20px; overflow:auto}
.settings-modal__close{background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--muted)}
.settings-modal__close:hover{color:var(--text)}
.settings-modal.is-visible{animation:modal-fade .18s ease-out}
.settings-modal-open{overflow:hidden}
.settings-modal .form input[type="file"]{margin-top:12px}
.settings-modal--mobile{padding:12px}
@media (max-width:768px){
  .settings-modal{padding:12px}
  .settings-modal__dialog{max-width:96vw; max-height:92vh; border-radius:12px}
  .settings-modal__body{padding:14px}
}

@keyframes modal-fade{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:translateY(0);}}
.settings-dashboards,.settings-tabs{display:flex;flex-wrap:wrap;gap:0;margin:20px 0 12px;border-bottom:1px solid var(--border,#d0d7de)}
.settings-tabs{margin-top:12px}
.settings-dashboards .pill,.settings-tabs .pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:.5rem 1rem;margin-right:6px;border-radius:8px 8px 0 0;border:1px solid transparent;border-bottom:none;background:transparent;color:var(--muted,#57606a);text-decoration:none;font-weight:500;transition:color .18s ease,background .18s ease,border-color .18s ease}
.settings-dashboards .pill:hover,.settings-dashboards .pill:focus,.settings-tabs .pill:hover,.settings-tabs .pill:focus{background:rgba(13,110,253,.08);color:var(--text);border-color:rgba(13,110,253,.35)}
.settings-dashboards .pill.on,.settings-tabs .pill.on{background:#fff;color:var(--text);border-color:var(--border,#d0d7de);box-shadow:0 -2px 6px rgba(15,23,42,.08);font-weight:600}
.settings-dashboards .pill.on::after,.settings-tabs .pill.on::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:#fff}
.settings-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:12px}
.admin-intro{color:var(--muted);margin-bottom:.5rem}
.admin-return{margin:0 0 1rem}
.admin-tabs{margin-top:0}
.admin-section{margin-top:1.5rem}
.admin-section[hidden]{display:none}
.admin-section h2{margin-bottom:.75rem}
.admin-section-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.admin-export-actions{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.admin-export-form{margin:6px 0;padding:4px 0}
.admin-export-form .btn{width:100%;justify-content:center;padding:.75rem 1.35rem}
.admin-import-form{margin:12px 0;padding:8px 0;border-top:1px solid var(--border)}
.admin-import-form:first-of-type{margin-top:0;border-top:none}
.admin-import-form input[type="file"]{margin-top:8px}
.admin-import-form .btn{margin-top:10px}
.admin-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.admin-links a{display:flex;align-items:center;gap:8px;padding:.65rem .9rem;border:1px solid var(--border);border-radius:10px;background:#fff;color:inherit;text-decoration:none;transition:.2s ease-in-out}
.admin-links a:hover,.admin-links a:focus{border-color:var(--pri,#0d6efd);box-shadow:0 0 0 3px rgba(13,110,253,.15)}
.admin-import-group{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px}
.admin-import-group h4{margin-top:0; margin-bottom:.5rem}
.admin-import-group p{margin:0 0 10px}
.list-unstyled{list-style:none;margin:0;padding:0}
.admin-description{color:var(--muted);max-width:520px}
.support-messages{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.support-message{border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px;background:#f9fafb}
.support-message.from-user{border-color:var(--pri,#0d6efd);background:#eef5ff}
.support-message .meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted,#6c757d);margin-bottom:8px}
.support-message .body{white-space:pre-line;line-height:1.4}
.markdown-preview{border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:12px; margin-top:12px; max-height:320px; overflow:auto; font-size:.95rem}
.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{margin:0 0 8px}
.markdown-preview p{margin:0 0 8px}
.markdown-preview img{max-width:100%; height:auto; border-radius:6px}
.docs-select{margin-bottom:12px}

.role-pills{display:flex; flex-wrap:wrap; gap:6px}
.role-pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; background:var(--surface-2); border:1px solid var(--border); transition:background-color .2s ease, border-color .2s ease, color .2s ease; font-size:.85rem}
.role-pill input{margin:0}
.role-pill.is-active{background:var(--primary); border-color:var(--primary); color:#fff}
.role-pill.is-active span{color:inherit}

/* ---------- Products gallery ---------- */
.product-media{position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; overflow:hidden; min-height:220px; max-height:360px}
.product-media__stage{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.product-media__image{width:100%; height:100%; object-fit:cover; display:block; border-radius:8px; max-height:100%}
.product-media__video{width:100%; height:100%; max-width:100%; max-height:100%; background:#0f172a; border-radius:8px; display:block; object-fit:contain}
.product-media__video::-webkit-media-controls{display:none !important}
.product-media__video::-moz-media-controls{display:none !important}
.product-media__play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:68px; height:68px; border-radius:999px; border:0; background:rgba(15,23,42,.82); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.8rem; box-shadow:0 12px 24px rgba(15,23,42,.25); transition:background .2s ease, transform .2s ease, opacity .2s ease}
.product-media__play:hover,.product-media__play:focus{background:rgba(99,102,241,.85); transform:translate(-50%,-50%) scale(1.05); outline:none}
.product-media__play--hidden{opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.9)}
.product-media__nav{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:0; background:rgba(15,23,42,0.65); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.35rem; transition:background .15s ease, transform .15s ease}
.product-media__nav:hover{background:rgba(99,102,241,0.85)}
.product-media__nav:focus{outline:2px solid rgba(99,102,241,0.8); outline-offset:2px}
.product-media__nav--prev{left:12px}
.product-media__nav--next{right:12px}
.product-media__counter{position:absolute; bottom:10px; right:12px; background:rgba(15,23,42,0.75); color:#fff; padding:2px 8px; border-radius:999px; font-size:.75rem; letter-spacing:.02em}
.product-media--single .product-media__nav,.product-media--single .product-media__counter{display:none}
.product-media-empty{padding:12px; border:1px dashed var(--border); border-radius:10px; text-align:center; color:var(--muted); background:var(--surface-2); font-size:.95rem}

/* ---------- Admin product images ---------- */
.admin-product-images{display:flex; flex-wrap:wrap; gap:16px; margin-top:16px}
.admin-product-images__item{border:1px solid var(--border); border-radius:12px; padding:10px; background:var(--surface-2); width:190px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center}
.admin-product-images__item img{width:100%; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:#f8fafc}
.admin-product-images__item--video{align-items:stretch}
.admin-product-video{position:relative; width:100%; height:110px; border-radius:8px; border:1px solid var(--border); background:#0f172a; display:flex; align-items:center; justify-content:center; overflow:hidden}
.admin-product-video video{width:100%; height:100%; object-fit:contain; background:#000}
.admin-product-video video::-webkit-media-controls{display:none !important}
.admin-product-video video::-moz-media-controls{display:none !important}
.admin-product-video__play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:999px; border:0; background:rgba(15,23,42,.85); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.35rem; box-shadow:0 10px 22px rgba(15,23,42,.3); transition:background .2s ease, transform .2s ease, opacity .2s ease}
.admin-product-video__play:hover,.admin-product-video__play:focus{background:rgba(99,102,241,.85); transform:translate(-50%,-50%) scale(1.05); outline:none}
.admin-product-video__play--hidden{opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.9)}
.admin-product-images form{width:100%; margin:0}
.admin-product-images form .btn{width:100%; justify-content:center}
.admin-product-images figcaption{font-size:.85rem; color:var(--muted); word-break:break-word}

/* ---------- Admin product actions ---------- */
.product-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.product-actions .icon-btn{margin:0; display:inline-flex; align-items:center; justify-content:center}
.product-actions__form{margin:0}
.product-actions__form .icon-btn{margin:0}
.nav-warning{margin-top:0;margin-left:0;margin-right:auto;padding:8px 12px;border-radius:10px;border:1px solid #fecdd3;background:#fef2f2;color:#b91c1c;display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;flex:1 1 auto;text-align:center;min-height:40px}
.nav-warning--critical{font-weight:700}
.nav-warning__link{color:#b91c1c;font-weight:700;text-decoration:underline}
.nav-warning__link:hover{text-decoration:none}

@media (max-width: 960px){
  .container{padding:12px;width:100%;}
  main.container{padding:16px 12px 32px}
}

@media (max-width: 640px){
  .btn, .icon-btn{width:100%;justify-content:center;}
  .form-split{flex-direction:column;}
  .product-actions{justify-content:center;}
}