@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

    :root {
      --g950:#06110a;--g900:#0d2222;--g800:#163020;--g700:#aa0000;--g600:#cc1100;--darkgrey:#101010;
      --g500:#7a2d2d;--g400:#112d2d;--g300:#aa0000;--g200:#aa0000;--g100:#d0ecda;--g50:#eaf5ee;
      --s50:#f8f7f5;--s100:#f2f1ee;--s200:#e8e6e2;--s300:#d6d3ce;--s400:#b8b4ae;--s600:#7a7670;--s800:#38352f;
      --white:#ffffff;--text:#171714;--text2:#555;--text3:#656565;--greenCheckout:#005500;
      --bd:#999;--bd2:#c8c4be;--r:6px;--r2:10px;--r3:14px;
      --sans:'DM Sans',system-ui,sans-serif;--mono:'DM Mono','Fira Mono',monospace;
    }

#products, #editor-wrap { scroll-margin-top: 110px; } 

#services, #catalog, #pricing { scroll-margin-top: 40px; } 

#exact-width-label{
  border:1px solid #555;
  border-radius: 5px;
  padding:10px;
  display:block;
  width:100%;
  flex-basis:100%;
  text-align:center;
  font-size:18px;
  color:var(--text3);
  font-family:var(--sans);
  margin:2px 0 0 0;
}

/* ── Cart + checkout type scale ─────────────────────────────────
   Fonts in the cart are inline styles in components.js, so these
   need !important to win. Change --cart-fs only. 1 = current size. */
#cart-drawer { --cart-fs: 1.25; }
#cart-drawer [style*="font-size:11px"] { font-size: calc(11px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:12px"] { font-size: calc(12px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:13px"] { font-size: calc(13px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:14px"] { font-size: calc(14px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:15px"] { font-size: calc(15px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:16px"] { font-size: calc(16px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:17px"] { font-size: calc(17px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:18px"] { font-size: calc(18px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:20px"] { font-size: calc(20px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:26px"] { font-size: calc(26px * var(--cart-fs)) !important; }
#cart-drawer [style*="font-size:40px"] { font-size: calc(40px * var(--cart-fs)) !important; }

#cart-drawer { --fs: 16px; font-size: var(--fs); }
.cart-job-title  { font-size: 1.25em; font-weight: 600; }
.cart-section-hd { font-size: 1.13em; font-weight: 600; text-align: center; color: var(--text3); }
.cart-line       { font-size: 1em;    color: var(--text2); }
.cart-line-sm    { font-size: .88em;  color: var(--text3); }
.cart-total      { font-size: 1.13em; font-weight: 700; }
.cart-loc-label  { font-size: .69em;  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.loc-tab-btn {
  padding: 6px 14px;
  border: 2px solid var(--bd);
  background: var(--white);
  color: var(--text2);
  font: 600 13px var(--sans);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  margin-right: 2px;
}
.loc-tab-btn.active {
  background: var(--g50);
  color: var(--g600);
  border-color: var(--g500);
}

#location-tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.loc-tab-btn{padding:6px 14px;border:2px solid var(--bd);border-radius:20px;background:var(--white);
  cursor:pointer;font:600 13px var(--sans);color:var(--text2);transition:all .15s;}
.loc-tab-btn.active{border-color:var(--g500);background:var(--g50);color:var(--g600);}
.loc-tab-btn .dot{color:var(--g600);margin-left:3px;}

.hero_card, .hero_card_services{
  float:left;
  overflow:hidden;
  margin:0 12px;
  width:calc(25% - 24px);
  border:4px solid #fff;
  border-radius: 20px;
  margin-bottom:60px;
}
.bb1bd td{
border-bottom:1px solid var(--bd);
}
/* ── Fade out truncated swatches ── */
.gc-swatches.truncate {
  position: relative;
  overflow: hidden;   /* keep the height limit */
}
.gc-swatches.truncate::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--white));
  pointer-events: none;
}
.hero_card_bg_short_sleeve { 
  background: url("img/bg_hero_screenprint_dtf.jpg") center/cover;
}
.hero_card_bg_long_sleeve {
  background: url("img/bg_hero_longsleeve.jpg") center/cover;
}
.hero_card_bg_tank_top {
  background: url("img/bg_hero_tanktop.jpg") center/cover;
}
.hero_card_bg_hoodie {
  background: url("img/bg_hero_hoodie.jpg") center/cover;
}
.hero_card_bg_screenprint{
  background: url("img/bg_hero_screenprint_dtf.jpg"); 
  background-size:cover;
}
.hero_card_bg_embroidery{
  background: url("img/bg_hero_embroidery.jpg") center/cover; 
  background-size:cover;
}
.hero_card_bg_decals{
  background: url("img/bg_hero_vinyl_decals_stickers.jpg") right/cover
}
.hero_card_bg_special{
  background: url("img/bg_hero_special.jpg"); 
  background-size:cover;
  background-position:center;
}
.hero_card .btn-start-cat{
  margin-top:20px;
  padding:16px 0;
}
.hero_card div{
  background:rgba(0,0,0,0.8);
  margin-top:300px;
  padding:12px;
}
.hero_card h2, .hero_card p, .hero_card_services h2, .hero_card_services p{
  color:#fff !important;
}
.hero_card_services div{
  padding:12px;
  background: url("img/bg_specials.jpg"); 
  background-size:cover;
}

#a1a-header {
  background:var(--darkgrey);
  position:sticky;top:0;z-index:999;
  border-bottom:1px solid var(--bd);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.a1a-hdr-inner {
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 28px;
  min-width:1150px;
}
#logo { height:60px;display:block; }
#a1a-header nav { display:flex;align-items:center;gap:22px; }
#a1a-header nav a {
  font:500 18px var(--sans);color:#fff;text-decoration:none;
  letter-spacing:0.01em;transition:color .15s;
}
#a1a-header nav a:hover,#a1a-header nav a.active { color:var(--g600); }
#a1a-header nav a.btn-cta {
  background:var(--g600);color:var(--white) !important;
  padding:7px 16px;border-radius:6px;font-weight:600;
  transition:background .15s;letter-spacing:0.01em;
}
#a1a-header nav a.btn-cta:hover { background:var(--g700); }

#a1a-footer { background:var(--g900) url('img/a1a_footer.jpg') no-repeat;background-size:100%;margin-top:0;padding:44px 28px 28px; }
.a1a-ftr-inner { max-width:1280px;margin:0 auto;display:flex;gap:40px;flex-wrap:wrap; }
.fc { flex:1;min-width:140px; }
.fc strong {
  font:600 10px var(--mono);color:var(--g300);display:block;
  margin-bottom:12px;text-transform:uppercase;letter-spacing:0.09em;
}
.fc p,.fc ul li { font:13px var(--sans);color:#6a8f74;margin-bottom:6px;line-height:1.6; }
.fc a { color:#6a8f74;text-decoration:none;transition:color .15s; }
.fc a:hover { color:var(--g300); }

    *,*::before,*::after{box-sizing:border-box;padding:0;margin:0;border:0;}
    body{background:var(--darkgrey);font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--text);font-weight:400;-webkit-font-smoothing:antialiased;}
    a{text-decoration:none;color:inherit;}
    h1,h2,h3,h4{font-weight:600;letter-spacing:-0.022em;}
    b{font-weight:600;}
    .wrap{margin:0 auto;padding:28px;}/*max-width:1280px;*/

    #marquee-wrap{background:var(--g900);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--g800);}
    .marquee-track{display:inline-flex;animation:mq 38s linear infinite;}
    .marquee-track:hover{animation-play-state:paused;}
    @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .deal-pill{display:inline-flex;flex-direction:column;padding:11px 26px;border-right:1px solid var(--g800);cursor:pointer;transition:background .2s;min-width:210px;}
    .deal-pill:hover{background:var(--g800);}
    .deal-pill b{font-size:14px;font-weight:600;color:var(--white);display:block;margin-bottom:1px;font-family:var(--sans);letter-spacing:-0.01em;}
    .deal-pill span{font-size:12px;color:var(--g300);font-family:var(--sans);}

    #home{background:var(--g900) url('img/a1a_ai_bg.png') no-repeat;background-size:cover;background-position:center;border-bottom:0px solid var(--bd);padding:0;}
    #home>.wrap>h1{font-size:24px;font-weight:600;color:var(--text);margin-bottom:5px;letter-spacing:-0.03em;background: var(--white);padding:10px 22px;border-radius:40px;display:inline-block;}
    #home>.wrap>h2{font-size:12px;font-weight:400;color:var(--text3);margin-bottom:22px;font-family:var(--mono);}

    #editor-wrap{display:grid;grid-template-columns:28% 44% 28%;grid-template-rows:1fr auto;background:var(--white);border:1px solid var(--bd);border-radius:var(--r3);overflow:hidden;min-height:590px;box-shadow:0 2px 12px rgba(0,0,0,.05);}
    #left-panel{grid-row:1/3;}

    #left-panel{background:var(--s100);border-right:1px solid var(--bd);padding:16px;display:flex;flex-direction:column;gap:10px;}
    .form-field{display:flex;flex-direction:column;gap:4px;}
    .form-field h4{}
    .form-field select,.form-field input[type=number]{padding:6px 9px;border:1px solid var(--bd);background:var(--white);border-radius:var(--r);width:100%;font-size:18px;transition:border-color .15s;}
    .form-field select:focus,.form-field input:focus{outline:none;border-color:var(--g500);}
    .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    #method-badge{font-size:12px;font-weight:600;font-family:var(--mono);}
    #garment-price{font-size:12px;color:var(--text3);font-family:var(--mono);}

    #color-picker-row{display:flex;flex-wrap:wrap;gap:6px;}
    .swatch{width:44px;height:44px;border-radius:50%;cursor:pointer;flex-shrink:0;transition:transform .1s;border:2px solid transparent;}
    .swatch:hover{transform:scale(1.2);}
    .swatch.active{outline:2px solid var(--g500);outline-offset:2px;}
    #underbase-note{font-size:11px;color:#b45309;min-height:14px;font-family:var(--mono);}

    #size-preview-row{display:flex;flex-wrap:wrap;gap:4px;}
    .size-btn{padding:3px 8px;font-size:12px;font-weight:600;font-family:var(--mono);border:1px solid var(--bd);border-radius:var(--r);cursor:pointer;background:var(--white);color:var(--text2);transition:all .15s;}
    .size-btn:hover{border-color:var(--g500);color:var(--g600);}
    .size-btn.active{background:var(--g600);color:var(--white);border-color:var(--g600);}

    #estimate{border-top:1px solid var(--bd);padding-top:10px;margin-top:auto;}
    #estimate table{width:100%;border-collapse:collapse;}
    #estimate td{padding:2px 0;font-size:14px;font-family:var(--mono);color:var(--text2);}
    #estimate td:last-child{text-align:right;color:var(--text);}
    #estimate tr.total td{font-weight:600;border-top:1px solid var(--bd);padding-top:6px;color:var(--text);font-size:18px;}
    #estimate .note{font-size:13px;color:var(--text3);margin-top:6px;font-family:var(--mono);}
    #estimate p{font-size:13px;font-family:var(--mono);color:var(--text2);}

    #color-size-matrix tr.preview-active td { background: var(--g50) !important; }

    #cat-detail-area {
      background: #fafafa;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px 20px; 
      margin-bottom: 20px;
    }
    #cart-badge-btn, .cat-view-btn, .cat-per-btn, #cart-zip-btn{
      border-top: 2px solid #ff2222 !important;
  border-bottom: 2px solid #660000 !important;
    }

    #submit-row{display:flex;gap:6px;padding-top:10px;border-top:1px solid var(--bd);flex-shrink:0;}
    #submit-row button{flex:1;padding:12px 9px;border-radius:var(--r);cursor:pointer;font-family:var(--sans);font-weight:600;font-size:18px;transition:all .15s;letter-spacing:0.01em;}
    #btn-request{background:var(--g600);color:var(--white);border:none;
border-top: 2px solid #ff2222;
  border-bottom: 2px solid #660000;
    }
    #discount-apply{
      border-top: 2px solid #ff2222;
      border-bottom: 2px solid #660000;
    }
    #btn-request:hover{background:var(--g700);}
    #btn-save{background:transparent;color:var(--text2);border:1px solid var(--bd);}
    #btn-save:hover{background:var(--s200);border-color:var(--bd2);}

    #mid-panel{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}
    #canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;}
    #canvas-wrap{background:#000;position:relative;display:flex;align-items:center;justify-content:center;}
    #canvas-wrap canvas{display:block;}
    #canvas-wrap.drag-over{outline:2px dashed var(--g500);outline-offset:-4px;}
    #drop-hint{position:absolute;top:50%;left:50%;transform:translateX(-50%);pointer-events:none;z-index:10;}
    #drop-hint span{background:rgba(255,255,255,.94);border-radius:12px;border:3px dashed var(--bd);padding:20px 14px;font-size:13px;color:var(--text3);white-space:nowrap;font-family:var(--mono);}
    #toolbar-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--text3);white-space:nowrap;z-index:10;font-family:var(--mono);background:rgba(255,255,255,.88);padding:4px 12px;border-radius:20px;border:1px solid var(--bd);}

    #right-panel{background:var(--s100);border-left:1px solid var(--bd);padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
    #right-panel h4{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);font-family:var(--mono);}

    #sizing-controls{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--bd);}
    .size-row{display:flex;align-items:center;gap:8px;}
    .size-row label{font-size:16px;color:var(--text3);font-family:var(--mono);width:30%;flex-shrink:0;}
    .size-row select{flex:1;padding:5px 7px;border:1px solid var(--bd);width:80%;border-radius:var(--r);background:var(--white);font-size:18px;font-family:var(--sans);color:var(--text);}
    #btn-center{width:100%;padding:7px;background:var(--white);border:1px solid var(--bd);border-radius:var(--r);cursor:pointer;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text2);transition:all .15s;}
    #btn-center:hover{border-color:var(--g500);color:var(--g600);background:var(--g50);}

    #layers{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow-y:auto;}
    .layer-slot{border:1px solid var(--bd);background:var(--white);padding:6px 8px;display:flex;align-items:center;gap:6px;cursor:pointer;border-radius:var(--r);transition:all .15s;position:relative;flex-shrink:0;}
    .layer-slot:hover{border-color:var(--g400);}
    .layer-slot.has-img{border-color:var(--bd2);}
    .layer-slot.selected{border-color:var(--g500);background:var(--g50);}
    .layer-slot.warn{border-color:#dc2626;background:#fef2f2;}
    .layer-thumb{width:44px;height:44px;object-fit:contain;flex-shrink:0;border:1px solid var(--bd);background:var(--s100);border-radius:var(--r);}
    .layer-label{font-size:15px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);}
    .multi-swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0;background:conic-gradient(#e23,#e82,#cc2,#3a8,#36d,#93d,#e23);border:1px solid var(--bd);}

    #clients{padding:16px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);background:var(--black);}
    #clients img{width:100%;display:block;object-fit:contain;}

    .section-heading{font-size:22px;font-weight:600;margin-bottom:26px;letter-spacing:-0.025em;color:var(--white);display:flex;align-items:center;gap:16px;}
    .section-heading::after{content:'';flex:1;height:1px;background:var(--bd);}
    #cat-layout{display:flex;gap:0;}
    #cat-sidebar{width:180px;flex-shrink:0;padding-right:22px;border-right:1px solid var(--bd);margin-right:30px;}
    #cat-sidebar h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text2);margin:16px 0 7px;}
    #cat-sidebar ul {list-style:none !important;}
    #cat-sidebar ul li{font-size:14px;color:var(--text3);padding:4px 0;line-height:1.5;cursor:pointer;transition:color .15s;}
    #cat-sidebar ul li:hover{color:var(--g600);}
    #cat-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;align-content:start;}
    .garment-card{background:var(--white);border:1px solid var(--bd);border-radius:var(--r2);padding:12px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s;}
    .garment-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.07);border-color:var(--bd2);}
    .garment-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);background:var(--s200);margin-bottom:10px;border:1px solid var(--bd);display:block;}
    .g-img-placeholder{width:100%;aspect-ratio:4/5;background:var(--s200);border-radius:var(--r);margin-bottom:10px;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:13px;}
    .g-name{font-size:14px;font-weight:600;margin-bottom:2px;color:var(--text);letter-spacing:-0.01em;}
    .g-price{font-size:13px;color:var(--text3);margin-bottom:8px;font-family:var(--mono);}
    .g-services{font-size:12px;color:var(--text3);margin-bottom:10px;line-height:1.9;font-family:var(--mono);}
    .g-services b{font-weight:600;color:var(--text2);}
    .card-footer{margin-top:auto;display:flex;align-items:center;gap:6px;}
    .card-footer input[type=number]{width:52px;padding:5px 7px;border:1px solid var(--bd);border-radius:var(--r);background:var(--s100);font-family:var(--sans);font-size:14px;color:var(--text);}
    .btn-start{flex:1;padding:7px 8px;background:var(--g600);color:var(--white);border-radius:var(--r);cursor:pointer;border:none;font-family:var(--sans);font-size:14px;font-weight:600;transition:background .15s;}
    .btn-start:hover{background:var(--g700);}
#cat-sidebar h3{
  color:#fff;
}
    /* ── Contact Section ── */
#contact {
  background: var(--white);
  padding: 52px 0;
  border-top: 1px solid var(--bd);
}
#contact .section-heading {
  color: var(--text) !important;
}
#contact .section-heading::after {
  background: var(--bd);
}
#contact-layout {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
#contact-form-wrap {
  flex: 1;
  min-width: 300px;
}
#contact-form-wrap h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text);
}
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#contact-form input,
#contact-form textarea {
  padding: 10px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font: 14px var(--sans);
  color: var(--text);
  background: var(--white);
  width: 100%;
  transition: border-color 0.15s;
}
#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--g500);
}
#contact-form .form-row {
  display: flex;
  gap: 12px;
}
#contact-form .form-row input {
  flex: 1;
}
#a1a-header nav a.active {
  color: var(--g600) !important;
  font-weight: 700;
}
#contact-info {
  flex: 1;
  min-width: 300px;
}
#contact-map {
  margin-bottom: 16px;
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  overflow: hidden;
}
#contact-details h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--text);
}
#contact-details p {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 6px;
  font-family: var(--mono);
}
#contact-details a {
  color: var(--g600);
  text-decoration: none;
}
#contact-details a:hover {
  text-decoration: underline;
}

    .service_summary{
      height:120px;
      font-size:15px !important;
    }
    .svc-card ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 8px;
}
.svc-card ul li {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 4px;
}



    #services{background: url('img/a1a_ai_bg.jpg') no-repeat;background-size:cover;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:52px 0;}
    #svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
    .svc-card{border:1px solid var(--bd);border-radius:var(--r2);padding:20px;background:var(--s100);transition:border-color .2s,box-shadow .2s;}
    .svc-card:hover{border-color:var(--g400);box-shadow:0 2px 10px rgba(0,0,0,.05);}
    .svc-card h3{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--text);letter-spacing:-0.01em;}
    .svc-card p{font-size:13px;color:var(--text2);line-height:1.65;}

      /* ── Pricing Section ── */
    #pricing { background: var(--white); padding: 52px 0; }
    #pricing .section-heading{
      color:var(--black) !important;
    }
    .pricing-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
    .pricing-table th, .pricing-table td {
      padding: 8px 10px; border: 1px solid var(--bd); font-size: 13px;
      font-family: var(--mono); text-align: center;
    }
    .pricing-table th { background: var(--s50); font-weight: 600; color: var(--text); }
    .pricing-table td:first-child { text-align: left; font-weight: 600; color: var(--text2); }
    .pricing-table tr:hover td { background: var(--g50); }


    #reviews{padding:52px 0;background:var(--s50);}
    #reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
    .review-card{background:var(--white);border:1px solid var(--bd);border-radius:var(--r2);padding:20px;}
    .review-card p{font-size:14px;line-height:1.75;color:var(--text2);margin-bottom:10px;}
    .review-card cite{font-size:13px;color:var(--text3);font-style:normal;font-family:var(--mono);}
    .stars{color:var(--g500);font-size:15px;margin-bottom:8px;letter-spacing:2px;}

    #detail-overlay {
      transition: opacity 0.3s;
    }
    #detail-overlay:not([style*="display: block"]) {
      opacity: 0;
    }
    #detail-content {
      transition: transform 0.3s, opacity 0.3s;
      transform: translateY(20px);
      opacity: 0;
    }
    #detail-overlay[style*="display: block"] #detail-content {
      transform: translateY(0);
      opacity: 1;
    }  

/* ── Sidebar ── */
#cat-sidebar ul li { cursor:pointer;transition:color .15s;padding:3px 0; }
#cat-sidebar ul li:hover { color:var(--g600); }
#cat-sidebar ul li.active { color:var(--g600);font-weight:600; }
#cat-sidebar ul li.active::before { content:'›';margin-right:4px; }
#cat-search { width:100%;padding:8px 12px;border:1px solid var(--bd);
  border-radius:var(--r);font:14px var(--sans);color:var(--text);
  background:var(--white);margin-bottom:14px;transition:border-color .15s; }
#cat-search:focus { outline:none;border-color:var(--g500); }

/* ── Toolbar ── */
#cat-toolbar { display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:0;padding-bottom:12px;border-bottom:1px solid var(--bd); }
#cat-status { font:12px var(--mono);color:var(--text3);flex:1;min-width:100px; }
.cat-per-btn,.cat-view-btn {font-size:20px ; padding:4px 10px;border:1px solid var(--bd);border-radius:var(--r);
  background:var(--black);cursor:pointer;font:500 12px var(--sans);color:var(--white);transition:all .15s; }
.cat-per-btn:hover,.cat-view-btn:hover { border-color:var(--g500);color:var(--g600); }
.cat-per-btn.active,.cat-view-btn.active { background:var(--g600);color:#fff;border-color:var(--g600); }
.cat-sep { color:var(--bd2);font-size:16px; }

/* ── Filters ── */ 
#cat-filters { padding:10px 0 14px;border-bottom:1px solid var(--bd);margin-bottom:14px;
  display:flex;gap:24px;flex-wrap:wrap; }
.filt-group { display:flex;flex-direction:column;gap:0; }
.filt-group-label { font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:#eee;margin-bottom:6px; }
.filt-options { display:flex;flex-wrap:wrap;gap:4px; }
.filt-chip { display:flex;align-items:center;gap:5px;padding:7px 12px;border:1px solid var(--bd);
  border-radius:20px;cursor:pointer;font:500 14px var(--sans);color:var(--text2);
  background:var(--white);transition:all .15s;user-select:none;white-space:nowrap; }
.filt-chip:hover { border-color:var(--g400);color:var(--g600); }
.filt-chip.active { background:var(--g50);border-color:var(--g500);color:var(--g600); }
.filt-chip input[type=checkbox] { width:13px;height:13px;accent-color:var(--g600);cursor:pointer;margin:0; }
.filt-cnt { font:500 10px var(--mono);color:var(--text3);margin-left:2px; }
.filt-chip.active .filt-cnt { color:var(--g500); }
#cat-filter-loading { font:12px var(--mono);color:var(--text3);padding:8px 0; }

/* ── Grid view ── */
#cat-grid.view-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;align-content:start; }
#cat-grid.view-grid .gc { background:var(--white);border:1px solid var(--bd);border-radius:var(--r2);
  padding:12px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s;cursor:pointer; }
#cat-grid.view-grid .gc:hover { box-shadow:0 4px 18px rgba(0,0,0,.07);border-color:var(--bd2); }
.gc-img { width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  background:var(--s200);margin-bottom:10px;border:1px solid var(--bd);display:block; }
.gc-img-ph { width:100%;aspect-ratio:3/4;background:var(--s200);border-radius:var(--r);
  margin-bottom:10px;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;
  color:var(--text3);font:600 12px var(--mono); }
.gc-name { font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text);letter-spacing:-.01em;line-height:1.3; }
.gc-meta { font-size:14px;color:var(--text3);font-family:var(--sans);margin-bottom:4px; }
.gc-price { font-size:14px;color:var(--text2);font-weight:600;font-family:var(--sans);margin-bottom:8px; }
.gc-swatches { display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px; }
.gc-swatches.truncate { max-height:44px;overflow:hidden; }
.gc-sw { width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.10);
  flex-shrink:0;display:inline-block;background-size:cover;background-position:center; }
.gc-sw-more { font-size:10px;font-weight:700;color:var(--text3);font-family:var(--mono);
  align-self:center;padding-left:3px;white-space:nowrap; }
.gc-footer { margin-top:auto; }
.btn-start-cat { width:100%;padding:7px 8px;background:var(--g600);color:var(--white);
  border-radius:var(--r);cursor:pointer;border:none;font:600 15px var(--sans);
  transition:background .15s;letter-spacing:.01em; 
  border-top: 2px solid #ff2222;
  border-bottom: 2px solid #660000;
}
.btn-start-cat:hover { background:var(--g700); }

#a1a-header .btn-start-cat.editor-visible {
  background: transparent !important;
  color: #999 !important;
  border: 1px solid #999 !important;
  font-weight: 400 !important;
}

a.btn-start-cat {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--white);
  background: var(--g600);
  border: none;
  border-radius: var(--r);
  padding: 16px 0;          /* matches .hero_card .btn-start-cat padding */
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
  box-sizing: border-box;
  border-top: 2px solid #ff2222;
  border-bottom: 2px solid #660000;
}

a.btn-start-cat:hover {
  background: var(--g700);
}

#home a.btn-start-cat, #home .btn-start-cat{
  font-weight: 600;
  font-size: 20px;
}

/* Grid for category cards – exactly like the catalog home */
  #cat-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 40px;
  }

  /* Make the hero background simpler – remove the full‑screen image */
  #home {
    background: var(--g900);
    /* no background image */
  }


/* ── List view ── */
#cat-grid.view-list { display:flex;flex-direction:column;gap:10px; }
#cat-grid.view-list .gc { background:var(--white);border:1px solid var(--bd);border-radius:var(--r2);
  padding:14px 16px;display:flex;gap:16px;align-items:flex-start;
  transition:box-shadow .2s,border-color .2s;cursor:pointer; }
#cat-grid.view-list .gc:hover { box-shadow:0 2px 12px rgba(0,0,0,.06);border-color:var(--bd2); }
#cat-grid.view-list .gc-img { width:90px;height:110px;aspect-ratio:unset;flex-shrink:0; }
#cat-grid.view-list .gc-img-ph { width:90px;height:110px;aspect-ratio:unset;flex-shrink:0; }
#cat-grid.view-list .gc-body { flex:1;min-width:0; }
#cat-grid.view-list .gc-name { font-size:15px; }
#cat-grid.view-list .gc-swatches { max-height:none !important;overflow:visible !important; }
.gc-desc { font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.gc-actions { display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap; }
#cat-grid.view-list .btn-start-cat { width:auto;padding:7px 18px; }
.btn-outline { padding:6px 14px;border:1px solid var(--bd);border-radius:var(--r);background:var(--white);
  cursor:pointer;font:500 12px var(--sans);color:var(--text2);text-decoration:none;
  transition:all .15s;white-space:nowrap; }
.btn-outline:hover { border-color:var(--g500);color:var(--g600); }

/* ── Pager ── */
#cat-pager { display:flex;gap:4px;flex-wrap:wrap;margin-top:18px;align-items:center; }
#cat-pager button { padding:4px 10px;border:1px solid var(--bd);border-radius:var(--r);
  background:var(--white);cursor:pointer;font:500 13px var(--sans);color:var(--text2);transition:all .15s; }
#cat-pager button:hover { border-color:var(--g500);color:var(--g600); }
#cat-pager button.active { background:var(--g600);color:#fff;border-color:var(--g600); }
#garment-name-display{font-size:14px;font-weight:600;color:var(--g600);font-family:var(--mono);margin-bottom:8px;padding:6px 10px;background:var(--g50);border-radius:var(--r);border:1px solid var(--g200);}

.dw{display:flex;gap:22px;flex-wrap:wrap}
.dimgs{flex:0 0 260px}
.dimgs img.main{width:260px;height:260px;object-fit:contain;border:1px solid #ddd;display:block}
.dimgs .thumbs{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.dimgs .thumbs img{width:54px;height:54px;object-fit:contain;border:2px solid #ddd;cursor:pointer}
.dimgs .thumbs img:hover,.dimgs .thumbs img.on{border-color:#333}
.dinfo{flex:1;min-width:260px}
.dinfo h1{font-size:1.15em;margin-bottom:6px}
.dmeta{color:#666;font-size:.85em;margin-bottom:10px}
.swatches{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.swatches a{text-align:center;font-size:.7em;color:#444;width:44px}
.swatches a img{width:28px;height:28px;border:2px solid #ddd;display:block;margin:0 auto 2px}
.swatches a.on img,.swatches a:hover img{border-color:#333}
.ptable-wrap{overflow-x:auto;margin-top:8px}
table.ptable{border-collapse:collapse;font-size:.82em;white-space:nowrap}
table.ptable th,table.ptable td{border:1px solid #ddd;padding:4px 9px;text-align:left;vertical-align:middle}
table.ptable th{background:#f0f0f0;font-weight:bold}
.desc{font-size:.85em;line-height:1.55;margin-top:14px;max-width:560px;color:#333}
.extlinks{margin-top:12px;font-size:.85em;display:flex;gap:10px;flex-wrap:wrap}
/* ── Inline detail card ── */
#cat-detail-area {
  background: var(--white);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  display: none;   /* hidden by default */
}

/* The detail container */
.garment-detail {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Left column: images */
.garment-detail .dimgs {
  flex: 0 0 200px;
}
.garment-detail .dimgs img.main {
  width: 200px;
  height: 260px;
  object-fit: contain;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--s100);
  display: block;
}
.garment-detail .dimgs .thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.garment-detail .dimgs .thumbs img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 2px solid var(--bd);
  border-radius: var(--r);
  cursor: pointer;
  background: var(--s100);
  transition: border-color .15s;
}
.garment-detail .dimgs .thumbs img:hover,
.garment-detail .dimgs .thumbs img.on {
  border-color: var(--g600);
}

/* Right column: info */
.garment-detail .dinfo {
  flex: 1;
  min-width: 260px;
}
.garment-detail .dinfo h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.garment-detail .dinfo .dmeta {
  font-size: 13px;
  color: var(--text3);
  font-family: var(--mono);
  margin-bottom: 8px;
}
.garment-detail .dinfo #color-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
}
/* Swatches */
.garment-detail .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.garment-detail .swatches a {
  text-align: center;
  font-size: 11px;
  color: var(--text2);
  width: 52px;
  text-decoration: none;
  transition: color .15s;
}
.garment-detail .swatches a img {
  width: 32px;
  height: 32px;
  border: 2px solid var(--bd);
  border-radius: 50%;
  display: block;
  margin: 0 auto 2px;
  background: var(--s100);
  transition: border-color .15s;
}
.garment-detail .swatches a.on img,
.garment-detail .swatches a:hover img {
  border-color: var(--g600);
}
.garment-detail .swatches a span {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--s100);
  border: 1px solid var(--bd);
  border-radius: 50%;
  margin: 0 auto 2px;
}
/* Price table */
.garment-detail .ptable-wrap {
  overflow-x: auto;
  margin: 8px 0 12px;
}
.garment-detail table.ptable {
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--mono);
  width: 100%;
  max-width: 300px;
}
.garment-detail table.ptable th,
.garment-detail table.ptable td {
  border: 1px solid var(--bd);
  padding: 4px 10px;
  text-align: left;
}
.garment-detail table.ptable th {
  background: var(--s50);
  font-weight: 600;
  color: var(--text2);
}
.garment-detail table.ptable td:first-child {
  font-weight: 600;
  color: var(--text);
}
.garment-detail table.ptable td:last-child {
  color: var(--g600);
  font-weight: 600;
}
/* Description & extras */
.garment-detail .desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text2);
  margin-top: 8px;
  max-width: 560px;
}
.garment-detail .extlinks {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.garment-detail .extlinks a {
  font-size: 12px;
  color: var(--g600);
  text-decoration: none;
  border: 1px solid var(--bd);
  padding: 2px 12px;
  border-radius: 20px;
  transition: all .15s;
}
.garment-detail .extlinks a:hover {
  background: var(--g50);
  border-color: var(--g500);
}
/* Start Order button */
.btn-start-order-detail {
  background: var(--g600);
  color: var(--white);
  border: none;
  padding: 10px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s;
  margin-top: 12px;
  border-top: 2px solid #ff2222;
  border-bottom: 2px solid #660000;
}
.btn-start-order-detail:hover {
  background: var(--g700);
}
/* Close button inside detail */
.garment-detail .detail-close-btn {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text3);
  cursor: pointer;
  padding: 0 6px;
  transition: color .15s;
  align-self: flex-start;
  margin-top: -4px;
}
.garment-detail .detail-close-btn:hover {
  color: var(--g600);
}
/* Hide the old overlay close button (not used anymore) */
#detail-overlay {
  display: none !important;  /* we no longer use overlay */
}
 td{
  padding:5px !important;
}

/* =============================================================
   Customer Service Chat Widget
   Add this block to style.css (or keep as its own file and
   link it after style.css — either works).
   ============================================================= */

/* ---- Launcher (floating button, bottom-right) ---- */
.launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.launcher__prompt {
  background: #fff;
  color: #111;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  max-width: 220px;
}

.launcher__btn {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.launcher__btn:hover {
  transform: scale(1.05);
}

.launcher__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e33;
  border: 2px solid #fff;
}

/* ---- Widget panel ---- */
.widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 32px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  /* closed by default — a plain class rule and the `hidden` attribute sit at
     the same specificity, so without this the class can win and force the
     panel open on load regardless of the `hidden` attribute in the HTML. */
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}

.widget__head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.widget__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.widget__head-row h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

.head-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #f2f2f2;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.head-close:hover {
  background: #e6e6e6;
}

.agent-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.stack {
  display: flex;
}

.avatar {
  border-radius: 50%;
  background: #6b8f71;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.avatar--moss {
  background: #6b8f71;
}

.agent-who {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}

.agent-reply {
  font-size: 11px;
  color: #6b8f71;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b8f71;
  display: inline-block;
  animation: cs-pulse 1.6s ease-in-out infinite;
}

@keyframes cs-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* ---- Message list ---- */
.widget__messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fafafa;
}

/* message bubble classes are also defined inline in _chat_support.php;
   these overrides keep them consistent with the rest of the site look */
.cs-msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
}

.cs-msg--customer {
  align-self: flex-end;
  background: #111;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cs-msg--admin {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #eee;
  color: #111;
  border-bottom-left-radius: 4px;
}

.cs-msg time {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.6;
}

/* ---- Guest capture form ---- */
.widget__guest-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.widget__guest-form input {
  padding: 9px 11px;
  border: 1px solid #ddd;
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
}

.widget__guest-form input:focus {
  outline: none;
  border-color: #111;
}

.widget__guest-form button {
  padding: 9px 11px;
  border: none;
  border-radius: 9px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.widget__guest-form button:hover {
  background: #000;
}

/* ---- Composer ---- */
.widget__composer {
  border-top: 1px solid #eee;
  padding: 10px 12px;
  flex-shrink: 0;
}

.widget__composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

#custInput {
  flex: 1;
  resize: none;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  max-height: 100px;
  line-height: 1.4;
}

#custInput:focus {
  outline: none;
  border-color: #111;
}

.send-round {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.send-round:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.widget__powered {
  text-align: center;
  font-size: 10px;
  color: #aaa;
  margin-top: 6px;
}

/* ---- Small screens: full-width sheet instead of floating card ---- */
@media (max-width: 480px) {
  .widget {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .launcher {
    right: 16px;
    bottom: 16px;
  }
}

.launcher{
  display:none !important;
}