body{margin:0;background:#f5f6f7;color:#1f3039;font-family:Arial,sans-serif}#status,#notice{display:block;margin:16px 0}#empty{padding:64px 20px;text-align:center;color:#637581;border:1px dashed #cbd5db;border-radius:8px}#preview{border:1px solid #dce2e5;width:100%;height:880px;border-radius:6px;background:#e4e7e9}#products{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}.product{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px;border:1px solid #e1e6e9;border-radius:6px;background:white}.product img{width:64px;height:64px;object-fit:contain;background:white}.product p{margin:0 0 8px;font-size:13px;line-height:1.4}.sku{color:#637581;font-size:12px}.price{color:#dd263b;font-weight:700;margin-left:12px}.no-image{color:#87949c;font-size:10px;text-align:center;padding-top:20px} [hidden]{display:none!important}

.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0}.pricing-card{padding:18px;border:1px solid #d9e0e4;background:#fff;border-radius:10px;display:flex;flex-direction:column;gap:8px}.pricing-card h3{margin:0;font-size:17px}.pricing-card p{margin:0;line-height:1.5;color:#53616c}.pricing-card .amount{font-size:27px;font-weight:700;color:#202b33}.pricing-card .amount small{font-size:13px;font-weight:400}.pricing-card s-button{margin-top:auto}.pricing-card.current{border:2px solid #243b53;background:#f7fafc}.plan-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:9px;background:#edf2f6}.plan-summary p{margin:7px 0 0;color:#52616b}#billing-notice{margin:10px 0;color:#425466}

.designer-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:12px;margin:16px 0}.designer-fields label{font-size:13px;font-weight:600;display:grid;gap:6px}.designer-fields input,.designer-fields select{width:100%;box-sizing:border-box;padding:9px;border:1px solid #cdd5dc;border-radius:6px}.designer-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.designer-checks label{font-size:13px}.designer-disclaimer{color:#697986;font-size:12px}#designer-fields.locked,#designer-checks.locked{opacity:.5;pointer-events:none}

.selection-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.selection-toolbar input{min-width:230px;flex:1;padding:10px;border:1px solid #cbd5e1;border-radius:6px}.selection-toolbar button{padding:10px 12px;border:1px solid #cbd5e1;background:white;border-radius:6px;cursor:pointer}

.selection-toolbar select{padding:10px;border:1px solid #cbd5e1;border-radius:6px;max-width:220px;background:white}.selected-panel{background:#fff;border:1px solid #dce2e5;border-radius:8px;padding:12px;margin:14px 0}.selected-panel h3{margin:0}.selected-panel p{font-size:12px;color:#637581}.selected-panel ol{padding-left:25px;max-height:300px;overflow:auto}.selected-panel li{padding:6px;border-bottom:1px solid #edf0f2;display:flex;align-items:center;gap:6px;cursor:grab}.selected-panel li span{flex:1}.selected-panel li button{padding:4px 9px;border:1px solid #ccd4dc;border-radius:5px;background:#fff;cursor:pointer}

.cover-settings{border:1px solid #d2dce6;border-radius:9px;margin:16px 0;padding:14px}.cover-settings legend{font-weight:700}.cover-settings.locked{opacity:.55}.cover-settings label{display:block;margin:8px 0}

/* Version 5.0 guided catalog workflow */
.wizard-nav{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 10px}
.wizard-step{flex:1;min-width:120px;border:1px solid #cad5df;border-radius:10px;background:#fff;padding:12px;cursor:pointer;font-weight:650}
.wizard-step.active{background:#153b4b;color:#fff;border-color:#153b4b}
.wizard-actions{display:flex;justify-content:space-between;gap:12px;margin:18px 0 40px}
.wizard-actions button{border:1px solid #c6d3df;border-radius:8px;background:#fff;padding:12px 24px;cursor:pointer}
.wizard-actions #wizard-next{background:#153b4b;color:white}
.wizard-panel[hidden],#wizard-next[hidden]{display:none!important}
#wizard-progress{color:#536679;font-weight:600}

.page-plan-sheet{border:1px solid #cbd5e1;background:white;padding:18px;margin:16px 0;border-radius:8px}
.page-plan-grid{display:grid;gap:10px}
.page-plan-item{border:1px solid #e2e8f0;padding:8px;display:flex;flex-direction:column;gap:5px;min-width:0}
.page-plan-item img{width:100%;height:75px;object-fit:contain}
.page-plan-item strong{overflow-wrap:anywhere}
.page-plan-item small{color:#64748b}

.app-brand{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:18px}.app-brand img{object-fit:contain;border-radius:12px}

#app-introduction{margin:0 0 20px;max-width:900px}#app-introduction h2{margin:0 0 8px;font-size:22px;line-height:1.3}#app-introduction p{line-height:1.55;color:#52616b}#app-introduction details{font-size:14px}#app-introduction summary{cursor:pointer;font-weight:600}#app-introduction li{margin:8px 0;line-height:1.5}


/* Catalog designer: stacked accordion panels and readable form controls */
#designer-fields.designer-organized{display:block;margin:14px 0 18px}
#designer-checks.designer-organized{display:flex;flex-direction:column;gap:12px;margin:0}
.designer-section{display:block;width:100%;box-sizing:border-box;border:1px solid #d8e1e8;border-radius:10px;background:#fff;overflow:hidden;margin:0}
.designer-section>summary{display:list-item;cursor:pointer;padding:17px 20px;font-size:15px;font-weight:700;background:#f8fafb;list-style-position:inside}
.designer-section[open]>summary{border-bottom:1px solid #e4e9ee}
.designer-section-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:18px 24px;padding:20px;align-items:start}
.designer-section-body>label{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:break-word}
.designer-section-body>label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:9px;font-weight:500;padding:8px 0}
.designer-section-body input:not([type=checkbox]),.designer-section-body select{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:10px;border:1px solid #cbd5df;border-radius:7px;background:#fff;font:inherit}
.designer-section-body input[type=checkbox]{width:17px;height:17px;flex:none;margin:0}
.designer-section-body input[type=range]{padding:4px 0;border:0}
.designer-section-body output{font-size:12px;color:#617382}
.designer-section #cover-settings{border:0;margin:0;padding:18px 20px}
.designer-section #cover-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:16px}
.designer-section #cover-fields label{min-width:0;line-height:1.5}
.designer-section #cover-fields input,.designer-section #cover-fields select{max-width:100%;box-sizing:border-box}
.preset-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:18px 20px;border:1px solid #d8e1e8;background:#fff;border-radius:10px}
.preset-toolbar>label{flex:1;min-width:220px;max-width:480px;display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}
.preset-toolbar select{width:100%;padding:10px;border:1px solid #cbd5df;border-radius:7px;background:#fff}
.preset-toolbar button,.designer-save button{padding:10px 15px;border:1px solid #cbd5df;border-radius:7px;background:#fff;cursor:pointer}
.preset-count{font-size:12px;color:#60717f}
.designer-save{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.designer-save>.designer-disclaimer{margin:0}
.save-template-actions{display:flex;justify-content:flex-end}
.save-template-actions #save-config{background:#153b4b;color:#fff;border-color:#153b4b;font-weight:600}
#save-template-details:not([hidden]){display:flex;justify-content:flex-end;align-items:end;gap:12px;flex-wrap:wrap;border:1px solid #d8e1e8;padding:16px;border-radius:9px;background:#f8fafb}
#save-template-details label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
#save-template-details input{padding:9px;border:1px solid #cbd5df;border-radius:6px}
@media(max-width:700px){.designer-section-body{grid-template-columns:1fr;padding:16px}.preset-toolbar{padding:14px}.designer-section>summary{padding:15px}}

/* Explicit Shopify Admin styling overrides for designer accordion */
.wizard-panel[data-wizard-panel="2"] #designer-checks.designer-organized{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;gap:14px!important}
.wizard-panel[data-wizard-panel="2"] #designer-checks.designer-organized>.designer-section{display:block!important;width:100%!important;max-width:none!important;flex:0 0 auto!important}
.wizard-panel[data-wizard-panel="2"] .designer-section-body{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:20px!important}
.wizard-panel[data-wizard-panel="2"] .designer-section-body>label{display:flex!important;flex-direction:column!important;gap:8px!important;white-space:normal!important}
.wizard-panel[data-wizard-panel="2"] .designer-section-body>label:has(input[type="checkbox"]){flex-direction:row!important;align-items:center!important}
.wizard-panel[data-wizard-panel="2"] .designer-save{display:flex!important;flex-direction:column!important;align-items:stretch!important}
.wizard-panel[data-wizard-panel="2"] .save-template-actions{display:flex!important;justify-content:flex-end!important}
@media(max-width:700px){.wizard-panel[data-wizard-panel="2"] .designer-section-body{grid-template-columns:1fr!important}}

/* Pricing feature lists */
.pricing-card .plan-features{list-style:none;margin:10px 0 18px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.pricing-card .plan-features li{position:relative;padding-left:22px;line-height:1.45;font-size:13px;color:#354452}
.pricing-card .plan-features li::before{content:'✓';position:absolute;left:2px;top:0;font-weight:800;color:#267b59}
.pricing-card>button{margin-top:auto}

/* Free merchants cannot access saved template controls, regardless of designer layout rules. */
.wizard-panel[data-wizard-panel="2"] #saved-controls[hidden], .preset-toolbar[hidden]{display:none!important}

/* Center important merchant notices and downgrade confirmation in a modal. */
.senjuco-modal-backdrop:not([hidden]){position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,31,43,.56)}
.senjuco-modal{box-sizing:border-box;width:min(100%,470px);max-height:90vh;overflow:auto;background:white;color:#20323b;padding:26px;border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.24)}
.senjuco-modal h3{font-size:20px;margin:0 0 12px}.senjuco-modal p{font-size:14px;line-height:1.55;margin:0 0 22px}.senjuco-modal button{padding:10px 20px;border:1px solid #c4d0d7;border-radius:7px;cursor:pointer;margin-right:8px}.senjuco-modal #proceed-downgrade,.senjuco-modal #app-alert-close{background:#163847;color:white;border-color:#163847}.senjuco-modal-actions{text-align:right}

/* Compact plan summary beside the introduction; expands when choosing a plan. */
.intro-billing-row{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
.intro-billing-row:has(#pricing-grid:not([hidden])){grid-template-columns:minmax(0,1fr)}
.intro-billing-row:has(#pricing-grid:not([hidden])) .billing-card{width:100%}
.billing-card{box-sizing:border-box;min-width:0;background:#fff;border:1px solid #e0e5e8;border-radius:10px;padding:13px 14px}
.billing-card h3{font-size:13px;margin:0 0 9px;font-weight:650}
.billing-card .plan-summary{padding:10px;background:#edf2f6;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.billing-card .plan-summary p{font-size:12px;margin:5px 0 0}
.billing-card #manage-plan{margin-top:9px}
.billing-card #sync-billing{align-self:flex-start}
@media(max-width:800px){.intro-billing-row{grid-template-columns:minmax(0,1fr)}.billing-card{width:100%}}

/* Shopify Admin's host styles may override generic grid layout. Force a
   two-column flex row for the introduction and compact billing card. */
.intro-billing-row{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:24px!important;width:100%!important}
.intro-billing-row>#app-introduction{flex:1 1 0!important;min-width:0!important;max-width:none!important;margin:0!important}
.intro-billing-row>.billing-card{display:block!important;flex:0 0 290px!important;width:290px!important;max-width:290px!important;align-self:flex-start!important}
.intro-billing-row>.billing-card .plan-summary{display:flex!important;flex-direction:column!important;align-items:flex-start!important;background:#edf2f6}
.intro-billing-row>.billing-card #sync-billing{margin-top:4px}
.intro-billing-row:has(#pricing-grid:not([hidden])){flex-wrap:wrap!important}
.intro-billing-row:has(#pricing-grid:not([hidden]))>.billing-card{flex:1 1 100%!important;max-width:none!important;width:100%!important}
@media(max-width:800px){.intro-billing-row{flex-direction:column!important}.intro-billing-row>.billing-card{flex:0 0 auto!important;width:100%!important;max-width:none!important}}

/* Mobile-only Shopify Admin refinements. Desktop styles are unchanged. */
@media (max-width:700px){
  .wizard-panel[data-wizard-panel="1"]{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .wizard-panel[data-wizard-panel="1"] .selection-toolbar{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;align-items:stretch!important;width:100%;min-width:0;
  }
  .wizard-panel[data-wizard-panel="1"] .selection-toolbar>label{
    display:flex;flex-direction:column;gap:6px;min-width:0;width:100%;
    font-size:13px;font-weight:600;
  }
  .wizard-panel[data-wizard-panel="1"] .selection-toolbar>select,
  .wizard-panel[data-wizard-panel="1"] .selection-toolbar>input,
  .wizard-panel[data-wizard-panel="1"] .selection-toolbar>label select,
  .wizard-panel[data-wizard-panel="1"] .selection-toolbar>button{
    display:block;box-sizing:border-box;width:100%!important;min-width:0!important;
    max-width:100%!important;min-height:44px;margin:0;flex:none!important;
    font-size:16px;
  }
  .wizard-panel[data-wizard-panel="1"] #products{
    display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;
  }
  .wizard-panel[data-wizard-panel="1"] #products .product{
    box-sizing:border-box;min-width:0;width:100%;grid-template-columns:22px 56px minmax(0,1fr);
    align-items:start;gap:10px;padding:12px;
  }
  .wizard-panel[data-wizard-panel="1"] #products .product img{width:56px;height:56px}
  .wizard-panel[data-wizard-panel="1"] #products .product>div{min-width:0;overflow-wrap:anywhere}
  .wizard-panel[data-wizard-panel="1"] #products .product>button{
    grid-column:1/-1;justify-self:stretch;min-height:42px;
  }
  .wizard-panel[data-wizard-panel="1"] #products .product>div[style*="flex-basis"]{
    grid-column:1/-1;box-sizing:border-box;max-width:100%;padding:8px!important;
  }
  .wizard-panel[data-wizard-panel="1"] #products .product label{
    flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;
  }
  .wizard-panel[data-wizard-panel="1"] .selected-panel{min-width:0;box-sizing:border-box}
  .wizard-panel[data-wizard-panel="1"] .selected-panel li{flex-wrap:wrap}
  .wizard-nav{gap:6px}
  .wizard-step{min-width:0;flex:1 1 45%;padding:10px 8px}
  .wizard-actions{gap:8px}
  .wizard-actions button{min-width:0;padding:12px}
}

/* Compact product cards and native disclosure for variants (all screen sizes). */
#products .product{display:grid;grid-template-columns:22px 64px minmax(0,1fr);align-items:start;gap:10px;min-width:0}
#products .product>input[type="checkbox"]{margin-top:8px;width:18px;height:18px}
#products .product>div:not(.no-image){min-width:0;overflow-wrap:anywhere}
#products .product .variant-dropdown{grid-column:1/-1;min-width:0;margin:0;border-top:1px solid #e6ebef;padding-top:6px}
#products .product .variant-dropdown>summary{display:list-item;list-style:revert;list-style-position:inside;cursor:pointer;width:fit-content;max-width:100%;padding:7px 8px;border-radius:6px;color:#205a78;font-size:13px;font-weight:600;line-height:1.4}
#products .product .variant-dropdown>summary:hover{background:#f2f6f9}
#products .product .variant-options{padding:4px 0 2px 10px;min-width:0}
#products .product .variant-option{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 2px;border-bottom:1px solid #f0f2f4;font-size:13px;overflow-wrap:anywhere}
#products .product .variant-option input{flex:none}
#products .product .variant-option small{color:#657786}
#products .product .variant-price{margin-left:auto;font-weight:600}
@media(max-width:700px){
 #products .product{grid-template-columns:22px 56px minmax(0,1fr)!important;gap:10px!important}
 #products .product .variant-dropdown{grid-column:1/-1!important;width:100%;box-sizing:border-box}
 #products .product .variant-dropdown>summary{padding:8px 6px;font-size:14px}
 #products .product .variant-options{padding:2px 0}
 #products .product .variant-option{min-height:38px}
}

/* Product picker: two full-width frames, summary above variant details.
   Override older card grid rules on mobile and desktop. */
#products .product{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:10px!important;min-width:0!important;max-width:100%;box-sizing:border-box}
#products .product .product-summary-frame{display:grid!important;grid-template-columns:24px 64px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;min-width:0!important;width:100%!important;box-sizing:border-box;padding:10px!important;border:1px solid #e5e9ed;border-radius:8px;background:#fff}
#products .product .product-summary-frame>input[type="checkbox"]{width:19px;height:19px;margin:0}
#products .product .product-summary-frame>img{width:64px;height:64px;object-fit:contain}
#products .product .product-summary-frame>div{min-width:0!important;width:auto!important;overflow-wrap:break-word;word-break:normal}
#products .product .product-summary-frame p{font-size:14px;line-height:1.4;margin:0 0 5px}
#products .product .product-summary-frame .sku{display:block;font-size:12px;line-height:1.5}
#products .product>.variant-dropdown{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;grid-column:auto!important;border:1px solid #e5e9ed!important;border-radius:8px!important;padding:0!important;background:#f9fbfc}
#products .product>.variant-dropdown>summary{display:list-item!important;list-style-position:inside!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding:12px 14px!important;font-size:14px!important;line-height:1.5!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;color:#205a78;cursor:pointer}
#products .product>.variant-dropdown .variant-options{box-sizing:border-box!important;width:100%!important;padding:6px 12px 12px!important;border-top:1px solid #e5e9ed}
#products .product>.variant-dropdown .variant-option{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:10px 0!important;line-height:1.4!important;white-space:normal!important;word-break:normal!important}
#products .product>.variant-dropdown .variant-option>span,#products .product>.variant-dropdown .variant-option>small{overflow-wrap:anywhere;min-width:0}
@media(max-width:700px){
 #products .product{padding:8px!important}
 #products .product .product-summary-frame{grid-template-columns:22px 54px minmax(0,1fr)!important;gap:9px!important;padding:10px 8px!important}
 #products .product .product-summary-frame>img{width:54px;height:54px}
 #products .product>.variant-dropdown>summary{padding:12px!important}
 #products .product>.variant-dropdown .variant-price{margin-left:0}
}