:root{
  --site-ui-styled:1;
  --bg:#f4f7fb; --card:#ffffff; --border:#dce6f2; --line:#e8eef5;
  --text:#1c3150; --muted:#71829a; --blue:#1f6de8; --blue-soft:#edf5ff;
  --green:#08aa43; --green-soft:#effcf4; --red:#d84b4b; --red-soft:#fff5f5;
  --radius:24px; --shadow:0 10px 28px rgba(28,49,80,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Tahoma,system-ui,sans-serif}
body{padding-bottom:120px}
.wrap{max-width:460px;margin:0 auto;padding:12px}
.brand{display:flex;align-items:center;gap:10px;padding:10px 4px 14px}
.logo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#ef3e36;color:#fff;font-weight:900;font-size:29px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.brand .line1{font-size:15px;color:var(--muted);font-weight:700}
.brand .line2{font-size:24px;font-weight:900;line-height:1.05}
.hero{background:#eef4fb;border:1px solid var(--border);border-radius:22px;padding:14px 16px;margin-bottom:14px}
.hero h1{font-size:22px;line-height:1.2;margin:0 0 6px;font-weight:900}.hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.product-card{background:var(--card);border:1px solid var(--border);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px;scroll-margin-top:14px;transition:box-shadow .2s,border-color .2s,transform .2s}
.product-card.focused{border-color:#67a0ff;box-shadow:0 0 0 4px rgba(31,109,232,.12), var(--shadow);transform:translateY(-2px)}
/* V34: only a product opened for quantity editing gets the stronger red ring.
   Shadows do not change the card dimensions or move neighboring products. */
.product-card.focused.edit-highlight{
  border-color:#e53935;
  box-shadow:
    0 0 0 3px #e53935,
    0 0 0 7px rgba(229,57,53,.14),
    0 10px 28px rgba(28,49,80,.08);
}

.card-head{padding:16px 16px 8px}.card-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.card-head-copy{min-width:0;flex:1}.card-head :is(h2,h3){font-size:19px;line-height:1.28;margin:0 0 5px;font-weight:900}.subtitle{font-size:13px;color:var(--muted);line-height:1.45}.ask-one{flex:0 0 auto;min-width:72px;height:40px;border-radius:14px;border:2px solid #cfe0f6;background:#f6faff;color:#266ab2;font-size:15px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 2px 10px rgba(75,117,168,.06)}.ask-one :is(svg,.ui-icon){width:15px;height:15px;flex:0 0 15px}
.image-wrap{position:relative;margin:0 12px;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#eef2f6,#dce5ee)}
.image-wrap img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.slider-panel{position:absolute;left:14px;right:14px;bottom:12px;padding:0;background:transparent;border:none;box-shadow:none;pointer-events:none;container-type:inline-size}
.qty-bubble{display:inline-flex;align-items:center;justify-content:center;column-gap:2px;width:calc(50% - 40px);max-width:106px;height:24px;padding:0 3px;border-radius:999px;background:var(--blue);color:#fff;font-size:11px;font-size:clamp(10px,4.1cqw,13px);font-weight:900;line-height:20px;position:absolute;left:50%;top:50px;transform:translateX(-50%);box-shadow:0 3px 8px rgba(31,109,232,.18);white-space:nowrap;pointer-events:none}
.qty-bubble .qty-value{font-size:1.13em;font-weight:900;line-height:1}
.slider-track{position:relative;height:74px;padding-top:0;pointer-events:auto}
.slider-track input[type=range]{position:absolute;left:0;top:0;z-index:2;display:block;width:100%;height:34px;appearance:none;background:transparent;margin:0}
.slider-thumb-cue{position:absolute;left:var(--thumb-x,17px);top:17px;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--blue);pointer-events:none}
.slider-thumb-cue :is(svg,.ui-icon){display:block;width:18px;height:18px;flex:0 0 auto}
.slider-thumb-cue:after{content:'';position:absolute;left:50%;top:calc(100% + 6px);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--blue);transform:translateX(-50%);pointer-events:none}
.slider-track input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#2f79ef 0%,#2f79ef var(--progress,0%),transparent var(--progress,0%),transparent 100%),linear-gradient(rgba(207,224,243,.9),rgba(207,224,243,.9)) center/100% 2px no-repeat}
.slider-track input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(rgba(207,224,243,.9),rgba(207,224,243,.9)) center/100% 2px no-repeat}
.slider-track input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:#2f79ef}
.slider-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;border:7px solid var(--blue);box-shadow:0 3px 10px rgba(0,0,0,.14);margin-top:-13px}
.slider-track input[type=range]::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#fff;border:7px solid var(--blue)}
.slider-labels{position:absolute;left:0;right:0;top:50px;height:24px;font-size:12px;color:#fff;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.65);pointer-events:none}
.slider-labels span{position:absolute;top:50%;height:18px;transform:translate(-50%,-50%);line-height:18px;white-space:nowrap}
.slider-labels span:before{content:'';position:absolute;left:50%;bottom:calc(100% + 3px);width:2px;height:6px;border-radius:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transform:translateX(-50%)}
.slider-labels span:first-child{left:17px}
.slider-labels span:nth-child(2){left:calc(25% + 8.5px)}
.slider-labels span:nth-child(3){left:50%}
.slider-labels span:nth-child(4){left:calc(75% - 8.5px)}
.slider-labels span:last-child{left:calc(100% - 17px)}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
.info-box{background:#f7fafc;border:1px solid var(--border);border-radius:16px;padding:10px 8px;text-align:center}.info-box .k{font-size:12px;color:var(--muted);line-height:1.2;margin-bottom:4px}.info-box .v{font-size:13px;font-weight:900;line-height:1.25}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(244,247,251,0),rgba(244,247,251,.8) 14px,rgba(244,247,251,1) 46px)}
.dock-inner{max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 -2px 24px rgba(28,49,80,.12);padding:12px;display:flex;align-items:center;gap:10px}
.dock-summary{flex:1;min-width:0}.dock-top{font-size:12px;color:var(--muted);font-weight:700;line-height:1.2}.dock-total{font-size:18px;font-weight:900;line-height:1.18;padding-top:4px;letter-spacing:-.01em;word-break:break-word}
.dock-btn{appearance:none;border:none;background:linear-gradient(135deg,var(--blue),#3f85f2);color:#fff;min-width:124px;min-height:52px;border-radius:18px;font-size:17px;font-weight:900;padding:0 16px;box-shadow:0 6px 18px rgba(31,109,232,.22)}
.modal{position:fixed;inset:0;background:rgba(36,50,70,.36);display:grid;place-items:end center;padding:18px 12px;z-index:50}.modal[hidden]{display:none}
.dialog{width:min(460px,100%);max-height:min(92vh,860px);background:#fff;border-radius:30px;border:1px solid var(--border);box-shadow:0 16px 40px rgba(28,49,80,.2);overflow:hidden;display:flex;flex-direction:column}
.modal-head{padding:16px 16px 12px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.modal-title .subhead{display:block;font-size:14px;color:var(--muted);font-weight:700}.modal-title h3{margin:2px 0 0;font-size:32px;line-height:1.05;font-weight:900;white-space:nowrap}
.action-lite,.action-close{height:54px;padding:0 16px;border-radius:18px;border:2px solid #cfe0f6;background:var(--blue-soft);color:#266ab2;font-size:15px;font-weight:900;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.action-lite :is(svg,.ui-icon),.action-close :is(svg,.ui-icon){width:20px;height:20px}
.action-close{border-color:#efcbcb;background:var(--red-soft);color:#b53b3b}
.summary-scroll{overflow:auto;padding:0 16px 16px}
.group-head{margin:14px 0 10px;background:#edf5ff;border-radius:16px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:900;color:#245486}.group-head .count{font-size:15px;color:#48698d}
.summary-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line)}
.summary-row:last-of-type{border-bottom:none}
.delete-one{width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(180deg,#ff7f7f,#ef5252);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(219,74,74,.22)}
.delete-one :is(svg,.ui-icon){width:18px;height:18px}.summary-name{font-size:16px;font-weight:900;line-height:1.2}.summary-sub{font-size:12px;color:var(--muted);margin-top:4px}
.qty-pill{appearance:none;border:none;background:#eff5ff;color:var(--blue);border:2px solid #d2e1f4;border-radius:18px;padding:0 14px;min-width:106px;min-height:58px;font-size:17px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px}.qty-pill .arr{font-size:22px;line-height:1;opacity:.8}
.summary-add{width:100%;margin:16px 0 10px;min-height:70px;border-radius:20px;background:#f6faff;border:2px dashed #b8d3f4;color:var(--blue);display:flex;align-items:center;gap:14px;padding:0 16px;font-size:18px;font-weight:900}.summary-add .plus{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:34px;line-height:1}.summary-add .arrow{margin-left:auto;font-size:38px;font-weight:400;opacity:.72}
 .manage-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0 8px}
.manage-actions button{min-height:52px;border-radius:18px;border:2px solid #dce7f4;background:#eef5ff;color:#4b75a8;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 2px 10px rgba(75,117,168,.06)}
.manage-actions #delete-all{background:#fff;color:#bf5258;border-color:#e7c7ca}
.manage-actions :is(svg,.ui-icon){width:20px;height:20px;flex:0 0 20px}
.total-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px 2px 14px;border-bottom:1px solid var(--line)}
.total-row .label{display:flex;flex-direction:column;gap:4px;min-width:0}.total-row .label .main{font-size:18px;font-weight:900;line-height:1.1}.total-row .label .sub{font-size:13px;font-weight:700;color:var(--muted);line-height:1.2}.total-row .value{font-size:22px;font-weight:900;color:var(--blue);line-height:1.18;text-align:right;max-width:58%;letter-spacing:-.01em}
.sum-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px}
.primary-send{min-height:82px;border-radius:24px;display:flex;align-items:center;gap:14px;padding:0 16px;color:#fff;text-decoration:none;box-shadow:0 10px 22px rgba(28,49,80,.12)}
.primary-send.fb{background:#1d66ea}.primary-send.line{background:#07a63d}.primary-send .bubble{width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 58px;overflow:hidden}.primary-send.fb .bubble{color:#1d66ea;font-weight:900;font-size:31px}.primary-send.line .bubble{color:#07a63d;font-weight:900;font-size:17px}.send-text{display:flex;flex-direction:column;gap:6px;line-height:1}.send-text .top{font-size:15px;font-weight:700}.send-text .bottom{font-size:27px;font-weight:900}
.status{padding-top:10px;font-size:12px;line-height:1.45;color:#7a8798;text-align:center}.status.ok{color:#1c7a4d}
.hide{display:none!important}
.confirm{position:absolute;inset:0;background:rgba(255,255,255,.88);backdrop-filter:blur(2px);display:grid;place-items:center;padding:24px}.confirm[hidden]{display:none}.confirm-card{width:min(320px,100%);background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 20px 40px rgba(28,49,80,.16);padding:18px}.confirm-card h4{margin:0 0 8px;font-size:21px;font-weight:900}.confirm-card p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.55}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-actions button{min-height:46px;border-radius:15px;font-size:15px;font-weight:900;border:none}.confirm-cancel{background:#eef3f9;color:#355576}.confirm-ok{background:#ef5656;color:#fff}
.ask-modal{position:fixed;inset:0;background:rgba(36,50,70,.36);display:grid;place-items:center;padding:18px 12px;z-index:60}.ask-modal[hidden]{display:none}.ask-dialog{width:min(420px,100%);background:#fff;border-radius:28px;border:1px solid var(--border);box-shadow:0 16px 40px rgba(28,49,80,.2);padding:16px}.ask-dialog-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:12px}.ask-dialog-head h4{min-width:0;margin:0;font-size:21px;font-weight:900;line-height:1.4}.ask-dialog-close{display:inline-flex;align-items:center;justify-content:center;gap:6px;
flex:0 0 auto;min-height:46px;padding:0 10px;border-radius:16px;
border:2px solid #efcbcb;background:var(--red-soft);color:#b53b3b;
font-family:inherit;font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap;cursor:pointer}
.ask-dialog-close :is(svg,.ui-icon){width:19px;height:19px;flex:0 0 19px}
.ask-dialog-close:active{background:#fde9eb}
.ask-dialog-close:focus-visible{outline:3px solid #efb63e;outline-offset:3px}.ask-product-box{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:20px;background:#fbfdff}.ask-product-box img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#eef2f6}.ask-product-title{font-size:18px;font-weight:900;line-height:1.25;margin:0 0 4px}.ask-product-sub{font-size:13px;line-height:1.45;color:var(--muted)}.ask-qty-line{margin-top:12px;padding:12px 14px;border-radius:18px;background:#edf5ff;border:1px solid #d4e4f7;color:#245486;font-size:15px;font-weight:900}.ask-qty-line[hidden]{display:none}.ask-qty-line small{display:block;font-size:12px;color:#597696;font-weight:700;margin-top:4px}.ask-channel-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.ask-channel{min-height:76px;border-radius:22px;display:flex;align-items:center;gap:12px;padding:0 14px;color:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(28,49,80,.12)}.ask-channel.fb{background:#1d66ea}.ask-channel.line{background:#07a63d}.ask-channel .bubble{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 52px;overflow:hidden}.ask-channel.fb .bubble{color:#1d66ea;font-weight:900;font-size:29px}.ask-channel.line .bubble{color:#07a63d;font-weight:900;font-size:15px}.ask-channel .txt{display:flex;flex-direction:column;line-height:1;gap:5px}.ask-channel .txt .top{font-size:14px;font-weight:700}.ask-channel .txt .bottom{font-size:25px;font-weight:900}
@media (max-width:360px){
 .modal-title h3{font-size:27px}.action-lite,.action-close{padding:0 12px;font-size:13px;height:50px}
 .primary-send{min-height:76px}.send-text .top{font-size:14px}.send-text .bottom{font-size:24px}.primary-send .bubble{width:54px;height:54px;flex-basis:54px}
 .qty-pill{min-width:98px;min-height:54px;font-size:16px}.summary-add{font-size:16px;min-height:64px}
 .manage-actions button{min-height:48px;font-size:13px;border-radius:16px}
}
@media (max-width:340px){.manage-actions{grid-template-columns:1fr;}}

/* V20: header only has Close; secondary row is Copy | Share */
.modal-head{grid-template-columns:minmax(0,1fr) auto !important;gap:10px !important;}
.modal-title{min-width:0;}
.modal-title h3{font-size:30px;white-space:nowrap;}
.action-close{justify-self:end;}
.manage-actions #share-btn{background:#edf5ff;border-color:#c8def6;color:#226cb7;}
.manage-actions #share-btn:active{background:#deedff;}
.manage-actions button:focus-visible,.primary-send:focus-visible,.action-close:focus-visible{
 outline:3px solid #efb63e;outline-offset:2px;
}
/* A temporary feedback toast is invisible by default, so no footer text is left under the two send buttons. */
.status-toast[hidden]{display:none !important;}
.status-toast{
  position:absolute;left:50%;top:98px;transform:translateX(-50%);
  z-index:3;max-width:calc(100% - 40px);white-space:normal;
  border-radius:13px;padding:11px 16px;
  text-align:center;font-size:13px;line-height:1.4;
  color:#714d10;background:#fff8df;border:1px solid #f0d58f;
  box-shadow:0 7px 25px rgba(28,49,80,.12);pointer-events:none;
}
.status-toast.ok{color:#166a44;background:#effbf4;border-color:#b7ddc6;}
@media(max-width:360px){
  .modal-title .subhead{font-size:11px;}
  .modal-title h3{font-size:25px;}
  .action-close{height:46px;padding:0 10px;font-size:12px;gap:4px;}
  .action-close :is(svg,.ui-icon){width:17px;height:17px;}
  .manage-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:8px;}
  .manage-actions button{font-size:12px;min-height:45px;padding:0 6px;gap:5px;}
  .manage-actions :is(svg,.ui-icon){width:17px;height:17px;flex-basis:17px;}
  .sum-actions{gap:9px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .primary-send{min-width:0;min-height:69px;padding:0 7px;gap:7px;border-radius:17px;}
  .primary-send .bubble{width:41px;height:41px;flex:0 0 41px;}
  .primary-send.fb .bubble{font-size:25px;}
  .primary-send.line .bubble{font-size:12px;}
  .send-text{gap:5px;white-space:nowrap;}
  .send-text .top{font-size:12px;}
  .send-text .bottom{font-size:21px;}
}

/* V21: summary actions = ลบทั้งหมด | เพิ่มสินค้า */
.summary-add{display:none !important;}
.manage-actions-v21{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 0 10px;}
.manage-actions-v21 button{min-height:60px;border-radius:20px;border:2px solid #dce7f4;background:#eef5ff;color:#4b75a8;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 2px 10px rgba(75,117,168,.06);}
.manage-actions-v21 #delete-all{background:#fff;color:#c15a60;border-color:#e6c6c9;}
.manage-actions-v21 #add-more{background:#f6faff;color:var(--blue);border-color:#c8def6;}
.manage-actions-v21 .icon-badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;line-height:1;font-weight:900;flex:0 0 34px;}
.manage-actions-v21 .icon-badge.minus{background:linear-gradient(180deg,#ff8080,#ee5555);}
.manage-actions-v21 .icon-badge.plus{background:linear-gradient(180deg,#3e8dff,#1f6de8);}
@media (max-width:360px){
  .manage-actions-v21{gap:8px;padding:14px 0 8px;}
  .manage-actions-v21 button{min-height:50px;font-size:14px;border-radius:17px;padding:0 8px;gap:6px;}
  .manage-actions-v21 .icon-badge{width:28px;height:28px;flex-basis:28px;font-size:20px;}
}


/* V22: secondary share actions under total */
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0 0;}
.share-actions button{min-height:46px;border-radius:16px;border:2px solid #dbe6f2;background:#eef5ff;color:#5c7fa9;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 10px rgba(75,117,168,.06);}
.share-actions button#share-friend{background:#f6faff;color:#4b75a8;border-color:#c9ddf4;}
.share-actions :is(svg,.ui-icon){width:18px;height:18px;flex:0 0 18px;}
@media (max-width:360px){.share-actions{gap:8px;padding-top:12px;}.share-actions button{min-height:42px;font-size:12px;border-radius:14px;padding:0 8px;gap:6px;}.share-actions :is(svg,.ui-icon){width:17px;height:17px;flex-basis:17px;}}


/* V24: only the summary modal layout changes. Header + action footer stay visible. */
#summary-modal .dialog{
  display:flex;
  flex-direction:column;
  max-height:min(92vh,860px);
  max-height:min(92dvh,860px);
  overflow:hidden;
}
#summary-modal .modal-head{
  flex:0 0 auto;
  position:relative;
  z-index:2;
  background:#fff;
}
#summary-modal .summary-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-bottom:10px;
}
#summary-modal .summary-footer{
  flex:0 0 auto;
  position:relative;
  z-index:2;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -5px 16px rgba(32,62,92,.045);
  padding:7px 16px calc(15px + env(safe-area-inset-bottom,0px));
}
#summary-modal .summary-footer .total-row{padding:7px 2px 10px;}
#summary-modal .summary-footer .share-actions{padding-top:10px;}
#summary-modal .summary-footer .sum-actions{padding-top:12px;}
@media(max-width:360px){
  #summary-modal .summary-footer{padding:6px 16px calc(12px + env(safe-area-inset-bottom,0px));}
  #summary-modal .summary-footer .share-actions{padding-top:9px;}
  #summary-modal .summary-footer .sum-actions{padding-top:10px;}
}


/* V26: count distinct selected products; never add rolls, posts, and kg together. */
#dock .dock-inner{gap:10px;}
#dock .dock-summary{min-width:0;}
#dock .dock-top{font-size:12px;line-height:1.4;color:#667b95;font-weight:400;}
#dock .dock-top strong{font-weight:700;}
#dock .dock-total{padding-top:3px;font-size:16px;line-height:1.4;font-weight:800;letter-spacing:0;word-break:normal;}
#dock .dock-btn{min-width:98px;padding:0 15px;flex:none;}
.unit-totals{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;}
.unit-totals .unit-value{display:inline-flex;align-items:baseline;white-space:nowrap;}
.unit-totals .unit-value+.unit-value::before{content:'•';margin:0 .32em;color:#7489a1;font-weight:400;font-size:.75em;align-self:center;}
#summary-modal .summary-footer .mixed-count{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:7px 2px 10px;}
#summary-modal .mixed-count .label{display:block;line-height:1.4;font-size:13px;font-weight:400;color:#667b95;}
#summary-modal .mixed-count .label strong{font-weight:700;}
#summary-modal .mixed-count .value{max-width:100%;width:100%;text-align:left;font-size:clamp(18px,5.4vw,22px);line-height:1.4;letter-spacing:0;color:var(--blue);}
#summary-modal .summary-info{min-width:0;}
#summary-modal .summary-row{grid-template-columns:36px minmax(0,1fr) auto;}
#summary-modal .summary-name{line-height:1.45;overflow-wrap:anywhere;}
#summary-modal .qty-pill{white-space:nowrap;}
#summary-modal .modal-head,#summary-modal .summary-footer{flex-shrink:0;}
#summary-modal .summary-scroll{min-height:0;}
#open-summary:disabled{opacity:.55;cursor:default;}
#summary-modal button:focus-visible,#summary-modal a:focus-visible,.range:focus-visible{outline:3px solid #efb63e;outline-offset:3px;}
@media(max-width:360px){
 #dock .dock-total{font-size:14px;}
 #dock .dock-btn{min-width:86px;font-size:16px;padding:0 11px;}
 #summary-modal .summary-row{column-gap:8px;}
 #summary-modal .summary-name{font-size:14px;}
 #summary-modal .summary-sub{font-size:11px;line-height:1.5;}
 #summary-modal .qty-pill{min-width:82px;min-height:50px;font-size:15px;padding:0 9px;}
 #summary-modal .mixed-count .label{font-size:12px;}
}
@media(prefers-reduced-motion:reduce){.product-card{transition:none;}}


/* V27: two concise bottom-bar actions; the V26 layout is otherwise unchanged. */
#dock #open-summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:nowrap;
}
#dock #open-summary .dock-action-arrow{
  display:block;
  width:12px;
  height:12px;
  flex:0 0 12px;
}
#dock #open-summary:focus-visible{outline:3px solid #efb63e;outline-offset:3px;}

/* V28: only the catalog's bottom action bar and its new clear confirmation. */
#dock .dock-heading-row{
  display:flex;align-items:center;gap:7px;min-width:0;
}
#dock #dock-top{min-width:0;line-height:1.4;}
#dock .dock-clear{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:4px;flex:0 0 auto;height:28px;min-width:46px;padding:0 6px;
  border:1px solid #edc6c9;border-radius:9px;background:#fff6f6;color:#af4852;
  font-family:inherit;font-size:12px;font-weight:500;line-height:1;cursor:pointer;
}
/* A small visible pill with a larger, 44px-high tap area. */
#dock .dock-clear::after{content:'';position:absolute;inset:-8px 0;}
#dock .dock-clear :is(svg,.ui-icon){width:14px;height:14px;flex:0 0 14px;}
#dock .dock-clear:active{background:#fcebed;}
#dock .dock-clear:focus-visible{outline:3px solid #efb63e;outline-offset:3px;}
#dock .dock-clear[hidden],#dock #dock-send-icon[hidden]{display:none !important;}
#dock #open-summary{gap:7px;min-height:52px;}
#dock #open-summary .dock-action-plane{display:block;width:18px;height:18px;flex:0 0 18px;}
#dock #open-summary:disabled{
  background:#e6e9ed;color:#707780;box-shadow:none;opacity:1;
  cursor:not-allowed;transform:none;
}
@media(max-width:360px){
  #dock .dock-heading-row{gap:5px;}
  #dock .dock-top{font-size:11px;}
  #dock .dock-clear{font-size:11px;min-width:43px;padding:0 5px;gap:3px;height:28px;}
  #dock .dock-clear :is(svg,.ui-icon){width:13px;height:13px;flex-basis:13px;}
  #dock #open-summary{font-size:15px;min-width:86px;padding:0 9px;gap:6px;}
  #dock #open-summary .dock-action-plane{width:17px;height:17px;flex-basis:17px;}
}
/* A separate confirmation for the new dock button; existing summary controls stay unchanged. */
#dock-clear-dialog[hidden]{display:none !important;}
#dock-clear-dialog{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:20px;background:rgba(28,49,80,.38);overscroll-behavior:contain;
}
#dock-clear-dialog .dock-clear-card{
  width:min(340px,100%);max-height:100%;overflow-y:auto;
  border-radius:23px;background:white;border:1px solid #e1e7ef;
  padding:23px 20px 20px;box-shadow:0 16px 45px rgba(28,49,80,.18);
}
#dock-clear-dialog h2{font-size:22px;line-height:1.4;color:#253951;margin:0 0 7px;font-weight:800;}
#dock-clear-dialog p{font-size:14px;line-height:1.7;color:#6b7b8d;margin:0 0 18px;}
#dock-clear-dialog .dock-clear-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#dock-clear-dialog .dock-clear-choices button{
  font-family:inherit;min-height:46px;min-width:0;padding:8px;border:1px solid #dce5ef;
  border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;
  background:#f2f6fb;color:#38546f;
}
#dock-clear-dialog #dock-clear-confirm{background:#c84e58;border-color:#c84e58;color:#fff;}
#dock-clear-dialog button:focus-visible{outline:3px solid #efb63e;outline-offset:3px;}


/* V29: only the summary item rows and the small sending cue.
   Keep all V28 buttons, footer/header pinning, and catalog controls intact. */
#summary-modal #summary-lines .summary-row {
  padding-top: 8px;
  padding-bottom: 8px;
}
#summary-modal #summary-lines .summary-sub {
  margin-top: 2px;
}
#summary-modal .primary-send,
#summary-modal .primary-send .send-text {
  min-width: 0;
}
#summary-modal .primary-send .send-text .top {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
#summary-modal .primary-send .summary-send-arrow {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: #fff;
  pointer-events: none;
}
@media (min-width: 361px) and (max-width: 385px) {
  #summary-modal .primary-send { column-gap: 10px; }
}

/* V32: only the inquiry popup. There is no content below the two channel buttons. */
#ask-modal .ask-dialog{max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
#ask-modal .ask-channel-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
#ask-modal .ask-channel{min-width:0;}
#ask-modal .ask-channel .txt{min-width:0;white-space:nowrap;}
#ask-modal .ask-product-title{overflow-wrap:anywhere;}
@media(max-width:360px){
  #ask-modal .ask-dialog-head h4{font-size:18px;line-height:1.45;}
  #ask-modal .ask-dialog-close{padding:0 8px;gap:4px;font-size:12px;min-height:44px;border-radius:14px;}
  #ask-modal .ask-dialog-close :is(svg,.ui-icon){width:17px;height:17px;flex-basis:17px;}
  #ask-modal .ask-product-box{grid-template-columns:80px minmax(0,1fr);gap:10px;padding:10px;}
  #ask-modal .ask-product-title{font-size:16px;line-height:1.4;}
  #ask-modal .ask-product-sub{font-size:12px;line-height:1.5;}
  #ask-modal .ask-channel-actions{gap:9px;}
  #ask-modal .ask-channel{padding:0 8px;gap:7px;min-height:72px;border-radius:18px;}
  #ask-modal .ask-channel .bubble{width:40px;height:40px;flex:0 0 40px;}
  #ask-modal .ask-channel.fb .bubble{font-size:25px;}
  #ask-modal .ask-channel.line .bubble{font-size:12px;}
  #ask-modal .ask-channel .txt{gap:7px;}
  #ask-modal .ask-channel .txt .top{font-size:12px;}
  #ask-modal .ask-channel .txt .bottom{font-size:22px;}
}


/* V33 — inquiry buttons only. Cart, products and the main summary retain V32 styling. */
#products .ask-one{
  min-width:88px;height:44px;padding:0 10px;gap:7px;
  border:1px solid #dc640b;border-radius:14px;
  background:linear-gradient(135deg,#ed6a0c,#f58a22);
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  box-shadow:0 4px 12px rgba(237,106,12,.22);
  cursor:pointer;white-space:nowrap;touch-action:manipulation;
}
#products .ask-one :is(svg,.ui-icon){display:block;width:19px;height:19px;flex:0 0 19px;}
#products .ask-one:active{background:#d85d08;box-shadow:0 2px 6px rgba(237,106,12,.18);}
#products .ask-one:focus-visible{outline:3px solid #efb63e;outline-offset:3px;}
#ask-modal .ask-channel{color:#fff;touch-action:manipulation;}
#ask-modal .ask-channel .txt{gap:7px;line-height:1.15;}
#ask-modal .ask-channel .txt .top{
  display:flex;align-items:center;gap:4px;line-height:1.4;
  color:#fff;white-space:nowrap;
}
#ask-modal .ask-channel .txt .bottom{line-height:1.22;color:#fff;}
#ask-modal .ask-send-plane{display:block;width:16px;height:16px;flex:0 0 16px;color:#fff;}
#ask-modal .ask-channel:focus-visible{outline:3px solid #efb63e;outline-offset:3px;}
#ask-modal .ask-channel.fb:active{background:#1459d4;}
#ask-modal .ask-channel.line:active{background:#078d35;}
#ask-modal .ask-qty-line{line-height:1.5;}
#ask-modal .ask-qty-line[hidden]{display:none!important;}
@media(max-width:360px){
  #products .ask-one{min-width:80px;padding:0 8px;font-size:14px;gap:5px;}
  #products .ask-one :is(svg,.ui-icon){width:17px;height:17px;flex-basis:17px;}
  #ask-modal .ask-channel .txt{gap:6px;}
  #ask-modal .ask-channel .txt .top{gap:3px;}
  #ask-modal .ask-send-plane{width:14px;height:14px;flex-basis:14px;}
}


/* V35: plain introductory section + slim sticky identity bar.
   All new styling is scoped to home-*; product/summary/inquiry styles are unchanged. */
:root { --home-header-height: 60px; }
html { scroll-padding-top: calc(var(--home-header-height) + 12px); }
.home-header {
  position: sticky; top: 0; z-index: 40;
  background: #fff; border-bottom: 1px solid #e3eaf1;
  box-shadow: 0 2px 8px rgba(28,49,80,.045);
  padding-top: env(safe-area-inset-top,0px);
}
.home-header-inner {
  max-width: 460px; min-height: 60px; margin: 0 auto;
  padding: 8px 16px; display: flex; align-items: center; gap: 11px;
}
.home-header .logo {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; font-size: 26px; box-shadow: none;
}
.home-header-label {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  color: #263b50; font-size: 18px; line-height: 1.4; font-weight: 700;
  white-space: nowrap;
}
.home-fu { font-size: 22px; font-weight: 500; }
.home-intro {
  background: #fff; background-image: none;
  border: 1px solid var(--border); border-radius: 26px;
  padding: 23px 18px 18px; margin: 0 0 16px;
  text-align: center; box-shadow: 0 6px 20px rgba(28,49,80,.035);
}
.home-intro h1 {
  color: var(--text); font-size: clamp(28px,8.7vw,36px);
  font-weight: 900; line-height: 1.3; letter-spacing: -.4px; margin: 0;
}
.home-delivery {
  display: flex; justify-content: center; align-items: center; gap: 7px;
  font-size: clamp(24px,7.4vw,30px); font-weight: 800; line-height: 1.35;
  color: #157548; margin: 5px 0 0; white-space: nowrap;
}
.home-delivery > span:first-child { font-size: 29px; line-height: 1; flex: none; }
.home-area-note {
  margin: 5px 0 0; color: #6d7d8d; font-size: 12px; line-height: 1.5;
}
.home-description {
  color: #53677c; font-size: 13px; line-height: 1.65;
  margin: 14px 0 0; text-wrap: balance;
}
.home-benefits {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px;
  margin: 14px 0 0;
}
.home-benefit {
  min-width: 0; display: flex; align-items: center; justify-content: center;
  gap: 6px; border: 1px solid #dfebe5; border-radius: 14px;
  background: #f3f9f5; padding: 9px 5px;
  text-align: left; color: #536b5b; font-size: 11px; line-height: 1.6;
}
.home-benefit strong { font-weight: 700; color: #276143; }
.home-benefit-main { white-space: nowrap; }
.home-benefit-icon { font-size: 22px; line-height: 1; flex: none; }
.home-contacts {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px; margin-top: 16px;
}
.home-contact {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 0; min-height: 56px; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 17px;
  color: #fff; font-size: 20px; font-weight: 800; line-height: 1.35;
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: filter 120ms ease, transform 120ms ease;
}
.home-contact:link,.home-contact:visited { color: #fff; text-decoration: none; }
.home-contact-facebook { background: #1d66ea; box-shadow: 0 4px 12px rgba(29,102,234,.16); }
.home-contact-line { background: #079d40; box-shadow: 0 4px 12px rgba(7,157,64,.15); }
.home-contact-logo {
  width: 29px; height: 29px; flex: 0 0 29px; aspect-ratio: 1;
  border-radius: 50%; background: #fff; display: grid; place-items: center;
  overflow: hidden; line-height: 1;
}
.home-facebook-logo { color: #1d66ea; font-family: Arial,sans-serif; font-size: 24px; font-weight: 900; padding-top: 3px; }
.home-line-logo { color: #079d40; font-family: Arial,sans-serif; font-size: 8.6px; font-weight: 800; letter-spacing: -.2px; }
.home-contact-phone,.home-contact-phone:link,.home-contact-phone:visited {
  grid-column: 1 / -1; min-height: 49px;
  background: #ffe6a2; border-color: #f3d27c; color: #684a18;
  box-shadow: none; font-size: 18px; font-weight: 500;
}
.home-contact-phone strong { font-weight: 800; }
.home-contact-phone :is(svg,.ui-icon) { display: block; width: 21px; height: 21px; flex: 0 0 21px; }

.home-contact-mobile-only{}
.home-contact-qr{display:none}
.home-contact-qr:link,.home-contact-qr:visited{text-decoration:none}
.home-contact-qr-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;text-align:center;color:#27425f}
.home-contact-qr-img{display:block;width:108px;max-width:100%;height:auto;aspect-ratio:1;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(28,49,80,.08)}
.home-contact-qr-caption{font-size:12px;line-height:1.35;color:#667a90;font-weight:600}
.home-contact-qr-handle{font-size:12px;line-height:1.35;color:#214d8b;font-weight:800;word-break:break-word}
.home-contact-qr-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:14px;color:#fff;font-size:18px;font-weight:800;line-height:1.2;box-shadow:0 4px 12px rgba(28,49,80,.12)}
.home-contact-qr-facebook .home-contact-qr-button{background:#1d66ea}
.home-contact-qr-line .home-contact-qr-button{background:#079d40}

.home-contact:active { filter: brightness(.94); transform: translateY(1px); }
.home-contact:focus-visible { outline: 3px solid #a4671e; outline-offset: 3px; }
@media (max-width:360px) {
  .home-header-inner { padding: 8px 14px; gap: 9px; }
  .home-header-label { font-size: 17px; gap: 7px; }
  .home-intro { padding: 20px 14px 15px; border-radius: 24px; }
  .home-description { font-size: 12px; margin-top: 12px; }
  .home-benefits { gap: 6px; margin-top: 12px; }
  .home-benefit { font-size: 10px; gap: 4px; padding: 8px 4px; }
  .home-benefit-icon { font-size: 19px; }
  .home-contact { min-height: 52px; font-size: 18px; gap: 7px; padding: 8px; }
  .home-contact-phone { min-height: 47px; font-size: 17px; }
}
@media (prefers-reduced-motion:reduce) { .home-contact { transition: none; } }


/* V36: compact ONLY the existing V35 introductory card.
   Every selector is scoped to #home-intro. No catalog, dock, popup, or header changes. */
#home-intro {
  padding: 12px 12px 12px;
  margin-bottom: 12px;
}
#home-intro h1 {
  font-size: clamp(28px, 7.9vw, 32px);
  line-height: 1.26;
}
#home-intro .home-delivery {
  margin-top: 1px;
  gap: 6px;
  font-size: clamp(22px, 6.2vw, 26px);
  line-height: 1.3;
}
#home-intro .home-delivery > span:first-child {
  font-size: 24px;
}
#home-intro .home-area-note {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.5;
}
#home-intro .home-description {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
}
#home-intro .home-benefits {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 6px;
  margin-top: 8px;
}
#home-intro .home-benefit {
  min-width: 0;
  min-height: 36px;
  padding: 6px 4px;
  gap: 4px;
  border-radius: 12px;
  font-size: clamp(10.5px, 2.95vw, 12.5px);
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
}
#home-intro .home-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 18px;
  width: 18px;
}
#home-intro .home-benefit-main {
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.4;
}
#home-intro .home-contacts {
  gap: 6px;
  margin-top: 8px;
}
#home-intro .home-contact {
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 15px;
  gap: 7px;
  font-size: 18px;
  line-height: 1.35;
}
#home-intro .home-contact-logo {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
}
#home-intro .home-facebook-logo { font-size: 21px; }
#home-intro .home-line-logo { font-size: 7.8px; }
#home-intro .home-contact-phone {
  min-height: 44px;
  font-size: 17px;
}
#home-intro .home-contact-phone :is(svg,.ui-icon) {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
@media (max-width: 360px) {
  #home-intro { padding: 11px 10px; }
  #home-intro .home-description { font-size: 11px; }
  #home-intro .home-benefits { gap: 5px; }
  #home-intro .home-benefit { gap: 3px; padding: 6px 3px; }
  #home-intro .home-benefit-icon { font-size: 14px; width: 15px; flex-basis: 15px; }
  #home-intro .home-contact { font-size: 17px; }
  #home-intro .home-contact-phone { font-size: 16px; }
}


/* V39: compact sticky category navigation */
:root{--category-height:68px}
.category-nav{position:sticky;top:var(--home-header-height);z-index:39;margin:0 -12px 16px;padding:10px 12px;background:rgba(244,247,251,.97);border-bottom:1px solid #e3eaf1;box-shadow:0 5px 12px rgba(28,49,80,.04)}
.category-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;background:#fff;border:1px solid #e2e8f0;border-radius:18px}
.category-link{min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#5b6d83;background:transparent;border-radius:13px;font-size:14px;font-weight:700;white-space:nowrap;transition:background .15s,color .15s}
.category-link[aria-current="location"]{background:#ed6a0c;color:#fff;box-shadow:0 3px 8px rgba(237,106,12,.22)}
.category-link:focus-visible{outline:3px solid #1f6de8;outline-offset:2px}
.category-heading{display:flex;align-items:center;gap:10px;margin:22px 2px 12px;font-size:18px;line-height:1.5;color:#263b50}
.category-heading:first-child{margin-top:0}
.category-heading:before{content:"";height:22px;width:5px;background:#ed6a0c;border-radius:4px}
.category-heading small{margin-left:auto;font-size:12px;font-weight:400;color:#71829a}
html{scroll-padding-top:0}
#products .product-card,.category-heading{scroll-margin-top:calc(var(--home-header-height) + var(--category-height) + 12px)}
@media(max-width:360px){.category-link{font-size:12px}.category-buttons{gap:3px}.category-nav{padding-left:10px;padding-right:10px}}


/* V40: slimmer category bar, retaining four equally sized targets. */
:root{--category-height:45px}
.category-nav{padding-top:4px;padding-bottom:4px;margin-bottom:8px}
.category-buttons{padding:3px;border-radius:13px;gap:4px}
.category-link{min-height:30px;border-radius:9px;font-size:13px}
.home-intro{margin-bottom:8px}
.category-heading{margin-top:16px;margin-bottom:8px}
@media(max-width:360px){.category-link{font-size:12px}}

/* V41: tighten the marked note and space below the phone button. */
#home-intro{padding-bottom:6px;margin-bottom:2px}
#home-intro .home-area-note{margin:0;font-size:11px;line-height:1.2}
#home-intro .home-description{margin-top:2px}
.category-nav{padding-top:2px}

/* V42: five compact categories on one row. */
.category-buttons{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.category-link{font-size:12px;letter-spacing:-.2px}
@media(max-width:360px){.category-link{font-size:11px}.category-buttons{gap:1px}}

/* V43: one-line totals with native horizontal swiping. */
#dock-total,#summary-total{
 flex-wrap:nowrap;white-space:nowrap;min-width:0;max-width:100%;
 overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
 -webkit-overflow-scrolling:touch;scrollbar-width:thin;
 scrollbar-color:#b7c9df transparent;padding-bottom:3px;
}
#dock-total .unit-value,#summary-total .unit-value{flex:0 0 auto}
#dock-total::-webkit-scrollbar,#summary-total::-webkit-scrollbar{height:3px}
#dock-total::-webkit-scrollbar-thumb,#summary-total::-webkit-scrollbar-thumb{background:#b7c9df;border-radius:4px}
#dock-total:focus-visible,#summary-total:focus-visible{outline:2px solid #ed6a0c;outline-offset:2px;border-radius:4px}

/* V45: single horizontal navigation strip, with a page-top shortcut. */
.category-buttons{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.category-buttons::-webkit-scrollbar{display:none}
.category-buttons .category-link{flex:0 0 auto;min-width:70px;padding:0 12px;font-size:13px;letter-spacing:0}
@media(max-width:360px){.category-buttons .category-link{min-width:66px;padding:0 10px;font-size:12px}}

/* V46: ordering guide after the last product. */
.order-guide{margin:22px 0 12px;padding:20px 16px 16px;background:#fff;border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}
.order-guide h2{margin:0;color:var(--text);font-size:23px;line-height:1.35;font-weight:900}
.order-guide h2 span{color:#ed6a0c}
.order-guide-intro{margin:6px 0 18px;color:var(--muted);font-size:13px;line-height:1.6}
.order-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.order-step{display:flex;align-items:flex-start;gap:12px;padding:14px 12px;background:#f7faff;border:1px solid #e3ebf5;border-radius:18px}
.order-step-number{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;background:#fff0e4;color:#d85d08;border:1px solid #ffd9bb;border-radius:11px;font-size:17px;font-weight:900;line-height:1}
.order-step h3{margin:2px 0 4px;font-size:16px;line-height:1.4;color:#263b50}
.order-step p{margin:0;font-size:13px;line-height:1.6;color:#71829a}
.order-step:last-child{background:#f1faf4;border-color:#d9eddf}
.order-step:last-child .order-step-number{background:#def3e5;color:#23834b;border-color:#c6e6d2}
.order-contact-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.order-contact{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;overflow-wrap:anywhere;min-height:46px;padding:8px;border-radius:15px;text-decoration:none;font-size:17px;font-weight:700;color:#fff}
.order-contact.fb{background:#1d66ea}.order-contact.line{background:#07a63d}
.order-contact-logo{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#fff;flex:0 0 27px}
.order-contact.fb .order-contact-logo{color:#1d66ea;font:bold 25px Arial}
.order-contact.line .order-contact-logo{color:#07a63d;font:bold 8px Arial}
.order-contact:focus-visible{outline:3px solid #efb63e;outline-offset:3px}
@media(max-width:360px){.order-guide{padding:18px 12px 12px}.order-guide h2{font-size:21px}.order-step{gap:9px;padding:12px 10px}.order-step h3{font-size:15px}}


/* V47: reassurance section after the ordering guide. */
.trust-guide{margin:18px 0 12px;padding:20px 16px 16px;background:#fff;border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}
.trust-guide h2{margin:0;color:var(--text);font-size:23px;line-height:1.35;font-weight:900}
.trust-guide h2 span{color:#ed6a0c}
.trust-intro,.profile-subheading{margin:6px 0 18px;color:var(--muted);font-size:13px;line-height:1.6}
.trust-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.trust-card{display:flex;align-items:flex-start;gap:12px;padding:14px 12px;background:#f7faff;border:1px solid #e3ebf5;border-radius:18px}
.trust-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;background:#fff0e4;border:1px solid #ffdfc5;border-radius:12px;font-size:23px;line-height:1}
.trust-card h3{margin:1px 0 5px;font-size:16px;line-height:1.45;color:#263b50}
.trust-card p{margin:0;font-size:13px;line-height:1.6;color:#71829a}
.trust-card:last-child{background:#f1faf4;border-color:#d9eddf}
.trust-card:last-child .trust-icon{background:#def3e5;border-color:#c6e6d2}
.trust-contact-title{margin:20px 0 0;text-align:center;font-size:15px;line-height:1.5;color:#263b50;font-weight:700}
.trust-guide .order-contact-pair{margin-top:10px}
@media(max-width:360px){.trust-guide{padding:18px 12px 12px}.trust-guide h2,.work-gallery-rich .profile-heading h2{font-size:21px}.trust-card{gap:9px;padding:12px 10px}.trust-card h3{font-size:15px}}

/* V93: view the portfolio directly, without numbering, captions or a lightbox. */
.work-gallery{margin:18px 0 12px;padding:20px 14px 16px;background:#fff;border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}
.work-gallery h2{margin:0;font-size:23px;line-height:1.35;color:var(--text)}
.work-gallery h2 span{color:var(--theme-ink)}
.work-gallery-intro{margin:6px 0 16px;font-size:13px;line-height:1.6;color:var(--muted)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.work-card{margin:0;min-width:0;overflow:hidden;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-soft)}
.work-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){
 .work-gallery{position:relative;left:50%;transform:translateX(-50%);width:min(960px,calc(100vw - 48px));padding:24px}
 .work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}

/* V49: closing contact card. */
/* V95: compact contact cards, real QR codes, and a separate contact share action. */
.contact-footer{position:relative;overflow:hidden;margin:18px 0 14px;padding:20px 14px 14px;border:1px solid var(--theme-border);border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.contact-footer:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--theme-primary)}
.contact-footer-brand{display:flex;align-items:center;gap:9px;margin:0 0 8px;color:var(--theme-ink);font-size:14px;line-height:1.3;font-weight:700}
.contact-brand-fu{font-size:29px;line-height:1.25;font-weight:500}
.contact-footer h2{margin:0;color:var(--theme-text);font-size:clamp(22px,6vw,26px);font-weight:900;line-height:1.5}
.contact-footer-description{margin:4px 0 16px;color:#596875;font-size:13px;line-height:1.65}
.contact-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.contact-channel{--channel-color:#1557c0;display:flex;min-width:0;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border:1px solid #c9daf7;border-radius:18px;background:linear-gradient(180deg,#ecf3ff,#fff 65%);color:var(--channel-color);text-decoration:none}
.contact-channel-line{--channel-color:#087a35;border-color:#c4e6ce;background:linear-gradient(180deg,#eaf8ef,#fff 65%)}
.contact-channel-title{display:flex;align-items:center;justify-content:center;gap:7px;font-size:19px;font-weight:900;line-height:1.4;white-space:nowrap}
.contact-channel-logo{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px}
.contact-channel-logo :is(svg,.ui-icon){display:block;width:28px;height:28px}
.contact-line-logo{border-radius:50%;background:#08a53f;color:#fff;font:900 8px/1 Arial,sans-serif}
.contact-channel-account{max-width:100%;color:var(--channel-color);font:700 clamp(10px,2.9vw,12px)/1.5 Arial,sans-serif;white-space:nowrap}
.contact-channel-qr{display:block;width:112px;max-width:100%;height:auto;aspect-ratio:1;margin:2px 0 0;border-radius:7px;background:#fff}
.contact-channel-hint{font-size:11px;font-weight:600;line-height:1.5}
.contact-phone{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;margin-top:10px;padding:10px 8px;border:1px solid #e5d39b;border-radius:16px;background:#fff0bb;color:#614914;text-decoration:none;font-size:18px;line-height:1.4;white-space:nowrap}
.contact-phone strong{font-size:20px;font-weight:900}
.contact-phone :is(svg,.ui-icon){width:23px;height:23px;flex:0 0 23px}
.contact-share-area{margin-top:16px;padding-top:13px;border-top:1px solid var(--theme-border)}
.contact-share-caption{margin:0 0 9px;color:var(--theme-ink);font-size:13px;line-height:1.5;font-weight:700;text-align:center}
.contact-share-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.contact-share-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:47px;margin:0;padding:9px 6px;border:1px solid var(--theme-primary);border-radius:14px;font:700 14px/1.4 Tahoma,system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.contact-share-primary{background:var(--theme-primary);color:var(--theme-on)}
.contact-share-copy{background:#fff;color:var(--theme-ink)}
.contact-share-actions :is(svg,.ui-icon){width:18px;height:18px;flex:0 0 18px}
.contact-share-actions button:disabled{cursor:wait;opacity:.65}
.contact-footer a:focus-visible,.contact-footer button:focus-visible,.contact-footer textarea:focus-visible{outline:3px solid var(--theme-ink);outline-offset:3px}
.contact-share-status{margin:10px 0 0;color:var(--theme-ink);font-size:13px;line-height:1.65;text-align:center;overflow-wrap:anywhere}
.contact-share-fallback{margin-top:12px;padding:12px;border:1px solid var(--theme-border);border-radius:14px;background:#fff}
.contact-share-fallback label{display:block;margin-bottom:8px;font-size:13px;font-weight:700}
.contact-share-fallback textarea{display:block;width:100%;resize:vertical;min-height:300px;padding:10px;border:1px solid var(--theme-border);border-radius:9px;background:#fff;color:var(--theme-text);font:13px/1.7 Tahoma,system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.contact-share-fallback p{margin:8px 0 0;color:#596875;font-size:12px;line-height:1.6}
.contact-footer [hidden]{display:none!important}
@media(hover:hover){.contact-channel:hover{border-color:var(--channel-color);box-shadow:0 3px 10px rgba(28,49,80,.07)}.contact-share-copy:hover{background:var(--theme-soft)}}
@media(max-width:360px){.contact-footer{padding:18px 12px 12px}.contact-channel-title{font-size:17px;gap:5px}.contact-share-actions{gap:7px}.contact-share-actions button{font-size:12px;gap:5px}.contact-phone{font-size:16px}.contact-phone strong{font-size:19px}.contact-footer-description{font-size:12px}}


/* V50: match section jumps to the sticky navigation offset. */
#section-ordering,#section-confidence,#section-portfolio,#section-contact,#section-theme{
 scroll-margin-top:calc(var(--home-header-height) + var(--category-height) + 12px);
}

/* V51: keep the final contact controls clear of the fixed cart. */
body{padding-bottom:calc(var(--bottom-dock-height,112px) + 28px)}
.contact-footer{margin-bottom:0}

/* V52: final top shortcut stays separate from the active section indicator. */
.category-buttons .category-back-top{color:#266ab2;background:#edf5ff;margin-left:4px}
.category-buttons .category-back-top:active{background:#dbeaff}

/* V56: one moving orange highlight and gently following navigation */
.category-buttons{position:relative;isolation:isolate}
.category-buttons .category-link{position:relative;z-index:1;transition:color .24s ease}
.category-buttons .category-link[aria-current="location"]{background:transparent;box-shadow:none}
.category-marker{position:absolute;left:0;top:0;pointer-events:none;background:#ed6a0c;border-radius:11px;box-shadow:0 3px 8px rgba(237,106,12,.22);z-index:0}
.navigation-ready .category-marker{transition:transform .34s cubic-bezier(.22,.68,.25,1),width .34s ease,height .2s ease}
@media(prefers-reduced-motion:reduce){.navigation-ready .category-marker,.category-buttons .category-link{transition:none}}

/* V57: compact Messenger shortcut in the sticky header */
.home-header-inner{gap:9px}
.header-inquiry{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid #d8e8fc;border-radius:14px;background:#edf5ff;color:#2168d5;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap;transition:background .18s ease,transform .18s ease}
.header-inquiry :is(svg,.ui-icon){width:20px;height:20px;flex:none}
.header-inquiry:hover{background:#e1eeff}
.header-inquiry:active{transform:scale(.97);background:#d6e7ff}
.header-inquiry:focus-visible{outline:3px solid #84b6fa;outline-offset:2px}
@media(max-width:380px){.home-header-inner{padding-left:12px;padding-right:12px;gap:7px}.home-header-label{font-size:15px;gap:5px}.home-header .logo{width:34px;height:34px;flex-basis:34px;font-size:24px}.home-fu{font-size:20px}.header-inquiry{padding:0 9px;gap:4px;font-size:13px}}
@media(max-width:335px){.home-header-label{font-size:14px}.home-header-inner{gap:6px}.header-inquiry{padding:0 7px}.header-inquiry :is(svg,.ui-icon){width:18px;height:18px}}


/* V60: coordinated themes; social-channel and warning colors stay recognizable. */
:root{--bg:var(--theme-bg);--border:var(--theme-border);--text:var(--theme-text);--blue:var(--theme-primary);--blue-soft:var(--theme-soft)}
.category-nav{background:var(--theme-bg);border-color:var(--theme-border)}
.category-marker,.category-heading:before{background:var(--theme-primary);box-shadow:none}
#products .ask-one,#products .ask-one:active{background:var(--theme-primary);border-color:var(--theme-primary);box-shadow:none}
.order-guide h2 span,.trust-guide h2 span,.work-gallery h2 span,.contact-footer h2 span{color:var(--theme-primary)}
.order-step,.trust-card,.work-card{background:var(--theme-soft);border-color:var(--theme-border)}
.order-step-number,.trust-icon,.order-step:last-child .order-step-number,.trust-card:last-child .trust-icon{background:var(--theme-soft);border-color:var(--theme-border);color:var(--theme-primary)}
.order-step:last-child,.trust-card:last-child{background:var(--theme-soft);border-color:var(--theme-border)}
.contact-footer{background:linear-gradient(135deg,var(--theme-soft),#fff 65%,var(--theme-soft))}
.contact-footer:before{background:linear-gradient(90deg,var(--theme-primary),var(--theme-border))}
.category-buttons .category-back-top{background:var(--theme-soft);color:var(--theme-primary)}
.dock-btn:not(:disabled){background:var(--theme-primary);box-shadow:none}
.slider-track input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--theme-primary) 0%,var(--theme-primary) var(--progress,0%),transparent var(--progress,0%),transparent 100%),linear-gradient(var(--theme-border),var(--theme-border)) center/100% 2px no-repeat}
.slider-track input[type=range]::-moz-range-progress{background:var(--theme-primary)}
.slider-track input[type=range]::-moz-range-track{background:linear-gradient(var(--theme-border),var(--theme-border)) center/100% 2px no-repeat}
/* V90: compact appearance picker; 12 palettes + 10 approved portraits. */
.theme-picker{margin:18px 0 4px;padding:18px 16px;background:#fff;border:1px solid var(--theme-border);border-radius:22px}
.theme-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.theme-picker h2{margin:0;font-size:21px;font-weight:900;line-height:1.4}
.theme-random{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:42px;padding:8px 12px;border:1px solid var(--theme-primary);border-radius:12px;background:var(--theme-soft);color:var(--theme-ink);font:700 13px/1.4 Tahoma,system-ui,sans-serif;cursor:pointer}
.theme-random :is(svg,.ui-icon){width:18px;height:18px;flex-shrink:0}
.theme-picker p{font-size:12px;color:#596778;margin:12px 0 0;line-height:1.6}
.theme-picker .appearance-intro{margin:6px 0 18px}
.appearance-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.appearance-panel{min-width:0}
.appearance-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.appearance-panel h3{margin:0;font-size:15px;line-height:1.5}
.appearance-count{font-size:11px;color:var(--theme-ink);background:var(--theme-soft);border-radius:99px;padding:3px 8px;white-space:nowrap}
.theme-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.theme-swatch{position:relative;display:block;min-width:0;min-height:72px;margin:0;padding:3px;border:2px solid #e0e5ea;border-radius:12px;background:#fff;box-shadow:none;cursor:pointer;font:inherit;color:#324052;-webkit-tap-highlight-color:transparent}
.theme-swatch-preview{position:relative;display:block;height:40px;border-radius:7px;background:var(--swatch-soft);overflow:hidden}
.theme-preview-line{position:absolute;left:7px;top:9px;width:40%;height:3px;background:var(--swatch-ink);border-radius:3px;opacity:.7}
.theme-preview-short{top:16px;width:25%;opacity:.3}
.theme-preview-action{position:absolute;right:6px;bottom:6px;width:45%;height:10px;border-radius:4px;background:var(--swatch)}
.theme-swatch-label{display:block;margin:4px 0 1px;font-size:11px;line-height:1.5;white-space:nowrap}
.theme-swatch[aria-pressed="true"]{border-color:var(--theme-primary);box-shadow:0 0 0 1px var(--theme-primary);color:var(--theme-ink)}
.theme-swatch[aria-pressed="true"]:after{content:'✓';position:absolute;top:4px;right:4px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--swatch);color:var(--swatch-on);font:700 12px/1 Tahoma,sans-serif}
.theme-picker .appearance-selection{margin-top:9px;font-size:12px;color:#596778}
.appearance-selection strong{color:var(--theme-ink)}
.appearance-admin-panel{padding-top:18px;border-top:1px solid var(--theme-border)}
.admin-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px;align-items:center}
.admin-choice{position:relative;display:block;width:100%;max-width:64px;aspect-ratio:1;min-width:0;margin:0 auto;padding:2px;border:2px solid #e0e5ea;border-radius:50%;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.admin-choice-portrait{position:relative;display:block;width:100%;height:100%;aspect-ratio:1;overflow:hidden;border-radius:50%;background:var(--theme-soft)}
.admin-choice-portrait img{position:absolute;display:block;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;object-fit:fill;transform:none}
.admin-choice[aria-pressed="true"]{border-color:var(--theme-primary);box-shadow:0 0 0 1px var(--theme-primary)}
.admin-choice[aria-pressed="true"]:after{content:'✓';position:absolute;right:-1px;bottom:-1px;display:grid;place-items:center;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--theme-primary);color:var(--theme-on);font:700 12px/1 Tahoma,sans-serif}
.theme-swatch:focus-visible,.theme-random:focus-visible,.admin-choice:focus-visible{outline:3px solid var(--theme-ink);outline-offset:3px}
.theme-picker .appearance-note{margin-top:18px;padding-top:12px;border-top:1px solid var(--theme-border);font-size:11px}
.appearance-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover){.theme-swatch:hover,.admin-choice:hover{border-color:var(--theme-primary)}.theme-random:hover{background:var(--theme-border)}}
@media(min-width:900px){
 .theme-picker{position:relative;left:50%;transform:translateX(-50%);width:min(960px,calc(100vw - 48px));padding:24px}
 .appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
 .theme-swatches{grid-template-columns:repeat(6,minmax(0,1fr))}
 .appearance-admin-panel{padding-top:0;padding-left:24px;border-top:0;border-left:1px solid var(--theme-border)}
 .admin-choices{gap:14px 9px}
}

/* V62: eight color families, six light-to-dark shades per family. */
html,body{background:var(--theme-bg)}
body{transition:background-color .3s ease}
.category-nav{background:var(--theme-bg)}
.home-header{background:linear-gradient(90deg,#fff,var(--theme-soft));border-color:var(--theme-border)}
.home-intro,.product-card,.order-guide,.trust-guide,.work-gallery,.theme-picker{background:linear-gradient(135deg,#fff 70%,var(--theme-soft))}
.contact-footer{background:linear-gradient(135deg,var(--theme-bg),#fff 60%,var(--theme-soft))}
.category-buttons .category-link[aria-current="location"],#products .ask-one,#products .ask-one:active,.dock-btn:not(:disabled){color:var(--theme-on)}
.order-guide h2 span,.trust-guide h2 span,.work-gallery h2 span,.contact-footer h2 span,.theme-picker h2 span,.theme-random,.category-buttons .category-back-top,.order-step-number{color:var(--theme-ink)}
@media(prefers-reduced-motion:reduce){body{transition:none}}
.qty-bubble,.summary-add .plus{color:var(--theme-on)}
.qty-pill,.summary-add,.total-row .value,.manage-actions-v21 #add-more,#summary-modal .mixed-count .value{color:var(--theme-ink)}

/* V63: one shared responsive font size for both header labels. */
.home-header,.contact-brand-caption{--header-label-size:18px}
.home-header-label,.header-inquiry{font-size:var(--header-label-size)}
@media(max-width:420px){.home-header,.contact-brand-caption{--header-label-size:17px}}
@media(max-width:380px){.home-header,.contact-brand-caption{--header-label-size:15px}}
@media(max-width:335px){.home-header,.contact-brand-caption{--header-label-size:14px}}

/* V64: recognizable cart, distinct-product badge, existing summary flow. */
#dock .dock-heading-row{justify-content:space-between;gap:8px;min-height:43px}
#dock .dock-cart{order:-1;display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:2px 0;min-height:44px;font-family:inherit;color:#263b50;cursor:pointer;flex:0 1 auto}
#dock .dock-cart-symbol{position:relative;display:block;width:35px;height:35px;flex:0 0 35px;margin-right:5px}
#dock .dock-cart-symbol :is(svg,.ui-icon){width:32px;height:32px;display:block}
#dock .dock-cart-badge{position:absolute;right:-6px;top:-5px;min-width:22px;height:22px;padding:0 5px;border:2px solid #fff;border-radius:99px;background:#e34b26;color:#fff;font:bold 12px/18px Tahoma,sans-serif;text-align:center}
#dock .dock-cart-word{font-size:14px;font-weight:700;white-space:nowrap}
#dock .dock-cart:disabled{opacity:1;cursor:default;color:#71829a}
#dock .dock-cart:disabled .dock-cart-badge{background:#e6e9ed;color:#617086}
#dock .dock-cart:focus-visible{outline:3px solid #efb63e;outline-offset:2px;border-radius:8px}
#dock .dock-clear{min-width:36px;padding:0 5px;margin-left:auto}
#dock .dock-total{padding-top:3px}
@media(max-width:360px){#dock .dock-cart-word{font-size:12px}#dock .dock-cart{gap:4px}#dock .dock-heading-row{gap:4px}}

/* V65: illustrative admin portrait preceding the cart, without a new overlay. */
#dock .dock-heading-row{justify-content:flex-start;gap:6px}
#dock .dock-admin{order:-2;display:block;position:relative;flex:0 0 32px;width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 1px var(--theme-border);background:#f2f5f9}
#dock .dock-admin :is(svg,.ui-icon){display:block;width:100%;height:100%}
#dock .dock-admin:focus-visible{outline:3px solid #efb63e;outline-offset:3px}
/* V191: keep the mobile delete control in the cart heading and size its unit label separately. */
#dock .dock-cart{flex:0 1 auto;gap:4px}
#dock .dock-cart-symbol{margin-right:5px}
#dock .dock-cart-word{display:inline-flex;align-items:baseline;gap:4px;font-size:15px;font-weight:700;line-height:1.35;text-align:left;white-space:nowrap}
#dock .dock-cart-word > *{white-space:nowrap}
#dock .dock-clear{margin-left:auto}
@media(max-width:899px){
 #dock .dock-heading-row{flex-wrap:nowrap;gap:4px}
 #dock .dock-summary .dock-clear{position:relative;right:auto;bottom:auto;margin-left:auto;min-width:38px;padding:0 4px;gap:3px;font-size:11px;white-space:nowrap}
 #dock .dock-summary .dock-clear :is(svg,.ui-icon){width:13px;height:13px;flex-basis:13px}
 #dock .dock-cart{flex:0 0 auto;gap:3px}
 #dock .dock-cart-word .dock-cart-count{font-size:15px}
 #dock .dock-cart-word .dock-cart-unit{font-size:13px}
 #dock .dock-cart-symbol{width:28px;height:32px;flex-basis:28px}
 #dock .dock-cart-symbol :is(svg,.ui-icon){width:28px;height:32px}
}
@media(max-width:360px){
 #dock[data-mode="cart"] .dock-inner{padding-left:8px;padding-right:8px;gap:6px}
 #dock .dock-summary .dock-admin{--admin-portrait-size:36px}
 #dock .dock-heading-row{gap:3px}
 #dock .dock-cart{gap:2px}
 #dock .dock-cart-symbol{width:26px;flex-basis:26px;margin-right:4px}
 #dock .dock-cart-symbol :is(svg,.ui-icon){width:26px}
 #dock[data-mode="cart"] #open-summary{padding-left:6px;padding-right:6px;gap:4px}
}

/* V67: the home shortcut stays outside the horizontally scrolling menu. */
.category-nav-row{display:flex;align-items:center;min-width:0;padding:3px;background:#fff;border:1px solid var(--theme-border);border-radius:15px}
.category-home-slot{flex:0 0 auto;padding-right:4px;margin-right:3px;border-right:1px solid var(--theme-border)}
.category-nav .category-home{min-width:82px;min-height:40px;padding:0 9px;gap:6px;font-size:13px;letter-spacing:0;border-radius:10px;color:#5b6d83;background:transparent;box-shadow:none}
.category-nav .category-home[aria-current="location"]{background:var(--theme-primary);color:var(--theme-on)}
.category-nav .category-buttons{flex:1 1 0;min-width:0;gap:3px;padding:0;border:0;border-radius:10px;background:transparent}
.category-nav .category-buttons .category-link{min-height:40px;gap:6px;padding:0 10px;border-radius:10px}
.category-nav .category-icon{display:block;flex:0 0 18px;width:18px;height:18px}
.category-nav .category-link span{line-height:1.4}
.category-nav .category-marker{border-radius:10px}
.category-nav .category-link:focus-visible{outline:2px solid var(--theme-ink);outline-offset:-2px}
@media(max-width:360px){
 .category-nav .category-home{min-width:76px;padding:0 7px;font-size:12px;gap:5px}
 .category-nav .category-buttons .category-link{padding:0 9px;gap:5px}
 .category-nav .category-icon{width:17px;height:17px;flex-basis:17px}
}

/* V68: a recognizable Messenger action, independent of the page color theme. */
.home-header .header-inquiry{
 min-height:48px;padding:6px 12px;gap:7px;border:1px solid rgba(255,255,255,.3);
 border-radius:16px;background:linear-gradient(135deg,#0866ff 0%,#3355ed 55%,#683bdf 100%);
 color:#fff;text-decoration:none;box-shadow:0 5px 14px rgba(36,88,224,.24),inset 0 1px 0 rgba(255,255,255,.2);
 transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.home-header .header-inquiry .header-messenger-icon{width:28px;height:28px;flex:0 0 28px;display:block}
.header-inquiry-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.header-inquiry-title{font-size:var(--header-label-size);font-weight:700;line-height:1.2}
.header-inquiry-app{font-family:Tahoma,system-ui,sans-serif;font-size:10px;font-weight:500;line-height:1.1;letter-spacing:.15px}
.home-header .header-inquiry:hover{filter:brightness(1.06);box-shadow:0 6px 18px rgba(36,88,224,.32),inset 0 1px 0 rgba(255,255,255,.2)}
.home-header .header-inquiry:active{transform:translateY(1px) scale(.98);filter:brightness(.94);box-shadow:0 2px 6px rgba(36,88,224,.2)}
.home-header .header-inquiry:focus-visible{outline:3px solid #162e71;outline-offset:3px}
@media(max-width:380px){
 .home-header .header-inquiry{padding:6px 9px;gap:6px;border-radius:14px}
 .home-header .header-inquiry .header-messenger-icon{width:26px;height:26px;flex-basis:26px}
}
@media(max-width:335px){
 .home-header .header-inquiry{padding:6px 8px;gap:5px}
 .home-header .header-inquiry .header-messenger-icon{width:24px;height:24px;flex-basis:24px}
}
@media(prefers-reduced-motion:reduce){.home-header .header-inquiry{transition:none}}

/* V69: slightly larger labels within the existing menu and delivery rows. */
.category-nav .category-home{font-size:14px;padding-left:6px;padding-right:6px;gap:4px}
.category-nav .category-buttons .category-link{font-size:14px;padding-left:8px;padding-right:8px;gap:5px}
#home-intro .home-benefit{
 font-size:clamp(11.5px,calc(2.95vw + 1px),13.5px);
 padding:5px 2px;gap:3px;min-height:36px;
}
@media(max-width:360px){
 .category-nav .category-home{font-size:13px;padding-left:5px;padding-right:5px;gap:4px}
 .category-nav .category-buttons .category-link{font-size:13px;padding-left:7px;padding-right:7px;gap:4px}
 #home-intro .home-benefit{padding:5px 2px;gap:2px}
}

/* V72: product and delivery location stay visible together in the header. */
.home-header-label{align-items:center}
.home-header-label .home-fu{flex:0 0 auto}
.home-header-copy{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;max-width:100%}
#home-header-caption{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:var(--header-label-size);font-weight:700;line-height:1.25;white-space:nowrap}
#home-header-delivery{display:block;font-size:11px;font-weight:700;line-height:1.35;color:#157548;white-space:nowrap}
@media(max-width:335px){#home-header-delivery{font-size:10px}}

/* V73: hide delivery in Home mode; retain the copied icon in navigation mode. */
#home-header-delivery{display:inline-flex;align-items:center;gap:3px;max-width:100%;overflow:hidden}
/* Long location names must shrink inside the header, keeping the chat button and mobile viewport in place. */
#home-header-delivery > span:not([aria-hidden="true"]){min-width:0;overflow:hidden;text-overflow:ellipsis}
#home-header-delivery[hidden]{display:none}
#home-header-delivery > [aria-hidden="true"]{display:inline-flex;align-items:center;justify-content:center;font-size:1.12em;line-height:1;flex:0 0 auto}
#home-header-delivery img,#home-header-delivery :is(svg,.ui-icon){display:block;width:1.15em;height:1.15em;flex:0 0 auto;object-fit:contain}

/* V74: larger product description in a shorter introductory card. */
#home-intro{padding:8px 12px 5px}
#home-intro .home-description{margin-top:2px;font-size:14px;line-height:1.4}
#home-intro .home-benefits{margin-top:6px}
#home-intro .home-contacts{margin-top:6px}
@media(max-width:360px){
 #home-intro{padding:8px 10px 5px}
 #home-intro .home-description{font-size:13px}
}

/* V75: overlap the delivery messages so the existing row keeps its size. */
#home-intro .home-benefit-rotating{display:grid;grid-template-columns:minmax(0,1fr);position:relative}
#home-intro .home-benefit-slide{
 grid-area:1 / 1;display:flex;align-items:center;justify-content:center;
 min-width:0;gap:inherit;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
#home-intro .home-benefit-slide.is-current{opacity:1}
#home-intro .home-benefit-rotating:focus-visible{outline:2px solid #157548;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
 #home-intro .home-benefit-slide{transition:none}
}

/* V78: retain the larger portrait and match its frame to the active theme. */
#dock .dock-admin{
 flex:0 0 38px;width:38px;height:38px;padding:0;
 border:2px solid var(--theme-primary);background:#fff;
 box-shadow:0 1px 4px var(--theme-border);
}
#dock .dock-admin img{
 display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
 transform:none;transform-origin:center;
}

/* V79: briefly identify the quantity slider without changing the layout. */
#products .product-card.focused.quantity-guide{
 border-color:var(--theme-primary);transform:none;
 box-shadow:0 0 0 3px var(--theme-border),var(--shadow);
}
#products .product-card.quantity-guide .slider-track{
 background:var(--theme-soft);border-radius:10px;
 outline:3px solid var(--theme-primary);outline-offset:4px;
 box-shadow:0 0 0 7px var(--theme-soft);
}

/* V81: a single-line introduction and a separate selection button, closer to the bottom. */
#dock .dock-welcome[hidden],#dock .dock-summary[hidden],#dock #open-summary[hidden]{display:none!important}
#dock[data-mode="welcome"]{padding:0 10px calc(3px + env(safe-area-inset-bottom,0px));background:none}
#dock[data-mode="welcome"] .dock-inner{padding:0;border:0;background:transparent;box-shadow:none;gap:0}
#dock .dock-welcome{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
#dock .dock-admin.dock-welcome-avatar{flex:0 0 48px;width:48px;height:48px;box-shadow:0 2px 8px var(--theme-border)}
#dock .dock-welcome-message{
 position:relative;display:flex;align-items:center;flex:1;min-width:0;min-height:44px;margin:0;padding:9px;
 border:1px solid var(--theme-primary);border-radius:16px;background:#fff;
 color:var(--theme-text);font-family:inherit;font-size:14px;font-weight:600;
 text-align:left;box-shadow:none;
}
#dock .dock-welcome-message:before{
 content:'';position:absolute;left:-5px;top:50%;width:8px;height:8px;
 background:#fff;border-left:1px solid var(--theme-primary);border-bottom:1px solid var(--theme-primary);transform:translateY(-50%) rotate(45deg);
}
#dock .dock-welcome-stage{display:block;width:100%;min-width:0;max-width:100%;height:1.5em;line-height:1.5;white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}
#dock .dock-typing-caret{display:inline-block;width:2px;height:.95em;margin-left:2px;background:var(--theme-primary);vertical-align:-.1em;animation:dock-typing-blink 1s steps(1,end) infinite}
#dock .dock-welcome-select{
 appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 84px;
 width:84px;min-height:44px;margin:0;padding:0 7px;border:1px solid var(--theme-primary);border-radius:14px;
 background:var(--theme-primary);color:var(--theme-on);font-family:inherit;font-size:13px;font-weight:700;
 line-height:1.3;white-space:nowrap;cursor:pointer;box-shadow:0 2px 6px var(--theme-border);
}
#dock .dock-welcome-select:focus-visible{outline:2px solid var(--theme-ink);outline-offset:2px}
@media(max-width:360px){#dock .dock-welcome-message{font-size:13px}}
#dock .dock-welcome-message:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}
@keyframes dock-typing-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#dock .dock-typing-caret{animation:none;display:none}}
/* V215: plain instruction text travels beside the original animated hand. */
#products .quantity-guide-instruction{
 position:absolute;left:calc(100% + 4px);top:calc(50% + 8px);transform:translateY(-50%);z-index:3;
 width:max-content;max-width:calc(50cqw - 20px);padding:0;border:0;background:transparent;
 color:var(--theme-ink);font-size:clamp(11px,4cqw,13px);font-weight:700;line-height:1.3;white-space:normal;
 text-shadow:0 1px 3px #fff,0 0 4px #fff,0 0 2px #fff;pointer-events:none;
}
#products .quantity-guide-pointer{
 position:absolute;left:17px;top:9px;z-index:3;transform:translateX(-50%);pointer-events:none;
 color:var(--theme-ink);font-size:30px;line-height:1;text-shadow:0 1px 3px #fff;
 animation:quantity-guide-swipe 1.8s ease-in-out .2s 2 both;
}
@keyframes quantity-guide-swipe{
 0%,15%{left:17px;opacity:1}65%,85%{left:50%;opacity:1}100%{left:50%;opacity:0}
}
@media(prefers-reduced-motion:reduce){#products .quantity-guide-pointer{animation:none}}

/* V86: a wider portrait slot, with the larger image rising above it.
   Keep the original 38px / 48px layout heights and all bubble/button heights. */
#dock .dock-admin{
 --admin-portrait-size:44px;
 flex-basis:var(--admin-portrait-size);width:var(--admin-portrait-size);height:38px;
 overflow:visible;border:0;background:transparent;box-shadow:none;
}
#dock .dock-admin img{
 position:absolute;left:0;bottom:0;
 width:var(--admin-portrait-size);height:var(--admin-portrait-size);max-width:none;
 border:2px solid var(--theme-primary);border-radius:50%;background:#fff;
 box-shadow:0 1px 4px var(--theme-border);object-fit:cover;transform:none;
}
#dock .dock-admin.dock-welcome-avatar{
 --admin-portrait-size:56px;
 flex-basis:var(--admin-portrait-size);width:var(--admin-portrait-size);height:48px;
 box-shadow:none;
}
#dock .dock-admin.dock-welcome-avatar img{box-shadow:0 2px 8px var(--theme-border)}
#dock .dock-admin:focus-visible{outline:none}
#dock .dock-admin:focus-visible img{outline:3px solid #efb63e;outline-offset:3px}

/* V87: frame an exact crop of the approved sheet without altering any face.
   V86's layout slots and visible portrait sizes stay unchanged. */
#dock .dock-admin .dock-admin-face{
 display:block;position:absolute;left:0;bottom:0;
 width:var(--admin-portrait-size);height:var(--admin-portrait-size);
 overflow:hidden;border:2px solid var(--theme-primary);border-radius:50%;background:#fff;
 box-shadow:0 1px 4px var(--theme-border);
}
#dock .dock-admin.dock-welcome-avatar .dock-admin-face{box-shadow:0 2px 8px var(--theme-border)}
#dock .dock-admin .dock-admin-face img{
 position:absolute;display:block;bottom:auto;right:auto;margin:0;padding:0;
 border:0;border-radius:0;max-width:none;max-height:none;
 box-shadow:none;object-fit:fill;transform:none;
}
#dock .dock-admin:focus-visible img{outline:none}
#dock .dock-admin:focus-visible .dock-admin-face{outline:3px solid #efb63e;outline-offset:3px}

/* V88: a single 2px greeting at typing start, plus a soft theme-coloured halo.
   Transform and shadow affect painting only; the V86 layout heights are unchanged. */
#dock[data-mode="welcome"] .dock-welcome[data-admin-typing="true"] .dock-welcome-avatar .dock-admin-face{
 animation:admin-typing-greet .72s ease-in-out 1,admin-typing-halo 1.8s ease-in-out infinite;
}
@keyframes admin-typing-greet{
 0%,100%{transform:translateY(0)}
 45%{transform:translateY(-2px)}
}
@keyframes admin-typing-halo{
 0%,100%{box-shadow:0 2px 8px var(--theme-border),0 0 0 0 transparent}
 50%{box-shadow:0 2px 10px var(--theme-border),0 0 0 3px var(--theme-border)}
}
@media(prefers-reduced-motion:reduce){
 #dock[data-mode="welcome"] .dock-welcome[data-admin-typing="true"] .dock-welcome-avatar .dock-admin-face{
  animation:none;transform:none;
 }
}

/* V92: carry the selected admin into the existing two-line summary total. */
#summary-modal .summary-footer .mixed-count{flex-direction:row;align-items:center;gap:12px}
#summary-modal .summary-count-copy{display:flex;flex:1 1 0%;flex-direction:column;gap:3px;min-width:0}
#summary-modal .summary-admin{
 --summary-admin-size:clamp(48px,13vw,52px);
 position:relative;display:block;flex:0 0 var(--summary-admin-size);
 width:var(--summary-admin-size);height:var(--summary-admin-size);
 overflow:hidden;border:2px solid var(--theme-primary);border-radius:50%;background:#fff;
 box-shadow:0 2px 6px var(--theme-border);
}
#summary-modal .summary-admin img{
 position:absolute;display:block;max-width:none;max-height:none;margin:0;padding:0;
 border:0;border-radius:0;object-fit:fill;transform:none;
}


/* V96: desktop-responsive layout while preserving the existing mobile flow and functions. */
@media (min-width: 768px){
  :root{--desktop-wrap-width:min(1380px, calc(100vw - 48px));}
  .wrap{max-width:var(--desktop-wrap-width);padding:18px 20px 24px;}
  .home-header-inner{max-width:var(--desktop-wrap-width);padding-left:20px;padding-right:20px;}
  .category-nav{margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
  .dock-inner{max-width:min(680px, calc(100vw - 48px));margin-left:auto;margin-right:auto;}
  #dock[data-mode="welcome"] .dock-inner{max-width:460px;}
}

@media (min-width: 900px){
  :root{--desktop-wrap-width:min(1380px, calc(100vw - 56px));}
  body{padding-bottom:calc(var(--bottom-dock-height,112px) + 34px);}
  .home-header,.contact-brand-caption{--header-label-size:19px;}
  .home-header-inner{min-height:66px;padding-top:10px;padding-bottom:10px;}
  .home-header .logo{width:42px;height:42px;flex-basis:42px;font-size:28px;}
  .home-header .header-inquiry{min-height:46px;padding:7px 14px;}

  #home-intro{
    display:grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr);
    align-items:start;
    gap:10px 24px;
    padding:22px 24px 20px;
    text-align:left;
  }
  #home-intro h1,
  #home-intro .home-delivery,
  #home-intro .home-description,
  #home-intro .home-benefits{
    grid-column:1;
    text-align:left;
    justify-content:flex-start;
  }
  #home-intro h1{font-size:clamp(34px, 3vw, 42px);line-height:1.22;}
  #home-intro .home-delivery{font-size:clamp(24px, 2.2vw, 30px);margin-top:2px;}
  #home-intro .home-area-note{font-size:12px;}
  #home-intro .home-description{font-size:16px;line-height:1.55;margin-top:4px;max-width:48ch;}
  #home-intro .home-benefits{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:560px;
    margin-top:6px;
    gap:10px;
  }
  #home-intro .home-benefit{min-height:44px;padding:8px 10px;font-size:14px;}
  #home-intro .home-benefit-icon{font-size:18px;width:20px;flex-basis:20px;}
  #home-intro .home-contacts{
    grid-column:2;
    grid-row:1 / span 4;
    margin-top:0;
    align-self:stretch;
    padding:14px;
    gap:12px;
    border:1px solid var(--theme-border);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
  }
  #home-intro .home-contact{min-height:58px;font-size:20px;border-radius:18px;}
  #home-intro .home-contact-mobile-only{display:none;}
  #home-intro .home-contact-qr{
    display:flex;
    min-height:unset;
    padding:12px 10px 14px;
    border:1px solid var(--theme-border);
    border-radius:18px;
    background:#fff;
    color:var(--theme-ink);
    box-shadow:0 2px 8px rgba(28,49,80,.05);
  }
  #home-intro .home-contact-qr-card{gap:8px;}
  #home-intro .home-contact-qr-img{width:min(136px, 100%);}
  #home-intro .home-contact-qr-caption{font-size:12px;}
  #home-intro .home-contact-qr-handle{font-size:13px;}
  #home-intro .home-contact-qr-button{min-height:44px;width:100%;font-size:17px;border-radius:14px;}
  #home-intro .home-contact-phone{grid-column:1 / -1;min-height:52px;font-size:18px;}

  .category-nav{margin-bottom:14px;}
  .category-nav-row{padding:5px;border-radius:18px;}
  .category-home-slot{padding-right:6px;margin-right:5px;}
  .category-nav .category-home,
  .category-nav .category-buttons .category-link{min-height:42px;font-size:14px;}

  #products{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    align-items:start;
  }
  #products > .category-heading{
    grid-column:1 / -1;
    margin:8px 2px 2px;
  }
  #products > .product-card{
    margin-bottom:0;
    height:100%;
  }
  #products .card-head :is(h2,h3){font-size:21px;}
  #products .subtitle{font-size:14px;}
  #products .info-grid{gap:10px;padding:14px;}
  #products .info-box{padding:12px 10px;}
  #products .image-wrap img{aspect-ratio:4/3;}

  .order-guide,
  .trust-guide,
  .work-gallery,
  .contact-footer,
  .theme-picker{
    padding:24px;
    border-radius:28px;
  }
  .order-guide h2,
  .trust-guide h2,
  .work-gallery h2,
  .contact-footer h2{font-size:29px;}
  .order-guide-intro,
  .trust-intro,
  .profile-subheading,
  .work-gallery-intro,
  .contact-footer-description{font-size:15px;}
  .order-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .order-step{padding:18px 16px;border-radius:20px;}
  .order-step h3{font-size:18px;}
  .order-step p{font-size:14px;}
  .trust-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .trust-card{padding:18px 16px;border-radius:20px;}
  .trust-card h3{font-size:18px;}
  .trust-card p{font-size:14px;}
  .order-contact-pair{max-width:640px;margin-left:auto;margin-right:auto;}

  .work-gallery,
  .theme-picker{position:static;left:auto;transform:none;width:auto;}
  .work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}

  .contact-footer{
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(360px, .85fr);
    grid-template-areas:
      "brand channels"
      "title channels"
      "desc channels"
      "phone channels"
      "share channels";
    gap:10px 26px;
    align-items:start;
  }
  .contact-footer-brand{grid-area:brand;margin-bottom:0;}
  .contact-footer h2{grid-area:title;align-self:end;}
  .contact-footer-description{grid-area:desc;margin:0;max-width:40ch;}
  .contact-channel-grid{grid-area:channels;align-self:stretch;gap:14px;margin:0;}
  .contact-channel{padding:16px 12px 14px;border-radius:20px;}
  .contact-channel-title{font-size:21px;}
  .contact-channel-account{font-size:13px;}
  .contact-channel-qr{width:130px;}
  .contact-phone{grid-area:phone;max-width:370px;margin-top:2px;}
  .contact-share-area{grid-area:share;margin-top:4px;padding-top:16px;}
  .contact-share-caption{text-align:left;}
  .contact-share-actions{max-width:480px;}

  .theme-picker .appearance-intro{font-size:14px;}
  .theme-swatches{grid-template-columns:repeat(6,minmax(0,1fr));}

  .dock{padding-left:24px;padding-right:24px;}
  .dock-inner{max-width:min(680px, calc(100vw - 48px));margin-left:auto;margin-right:auto;}
  #dock[data-mode="welcome"] .dock-inner{max-width:520px;margin-left:auto;margin-right:auto;}

  #summary-modal{padding:20px;}
  #summary-modal .dialog{width:min(620px, calc(100vw - 40px));max-height:min(88vh, 920px);border-radius:32px;}
  #summary-modal .modal-head{padding:18px 20px 14px;}
  #summary-modal .summary-scroll{padding-left:20px;padding-right:20px;}
  #summary-modal .summary-footer{padding:10px 20px calc(18px + env(safe-area-inset-bottom,0px));}
  #summary-modal .manage-actions-v21{gap:10px;padding:16px 0 10px;}
  #summary-modal .manage-actions-v21 button{min-height:54px;font-size:15px;border-radius:18px;}
  #summary-modal .summary-footer .mixed-count{padding:10px 2px 12px;gap:14px;align-items:center;}
  #summary-modal .summary-admin{--summary-admin-size:54px;}
  #summary-modal .mixed-count .label{font-size:13px;}
  #summary-modal .mixed-count .value{font-size:31px;line-height:1.2;}
  #summary-modal .share-actions{gap:10px;padding-top:12px;}
  #summary-modal .share-actions button{min-height:48px;font-size:14px;border-radius:16px;}
  #summary-modal .sum-actions{gap:12px;padding-top:12px;}
  #summary-modal .primary-send{min-height:78px;padding:0 14px;gap:10px;border-radius:20px;}
  #summary-modal .primary-send .bubble{width:48px;height:48px;flex-basis:48px;}
  #summary-modal .primary-send.fb .bubble{font-size:28px;}
  #summary-modal .primary-send.line .bubble{font-size:13px;}
  #summary-modal .primary-send .send-text .top{font-size:14px;}
  #summary-modal .primary-send .send-text .bottom{font-size:24px;}
  #summary-modal .primary-send .summary-send-arrow{width:13px;height:13px;}
}

@media (min-width: 1200px){
  :root{--desktop-wrap-width:min(1480px, calc(100vw - 64px));}
  #products{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .order-steps{grid-template-columns:repeat(4,minmax(0,1fr));}
  .contact-footer{grid-template-columns:minmax(0, 1.2fr) minmax(420px, 520px);}
  .dock-inner{max-width:min(720px, calc(100vw - 64px));}
  #dock[data-mode="welcome"] .dock-inner{max-width:540px;}
  #summary-modal .dialog{width:min(660px, calc(100vw - 56px));}
}



/* V98: a taller balanced summary dialog and a larger welcome dock with three quick recommendations. */
#dock[data-mode="welcome"] .dock-inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  padding:10px 12px 12px;
  border:1px solid var(--theme-border);
  border-radius:26px;
  background:rgba(255,255,255,.98);
  box-shadow:0 -2px 24px rgba(28,49,80,.12);
}
#dock .dock-welcome{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  width:100%;
  min-width:0;
}
#dock .dock-welcome-main{display:flex;align-items:center;gap:8px;width:100%;min-width:0;}
#dock .dock-admin.dock-welcome-avatar{
  --admin-portrait-size:56px;
  flex:0 0 var(--admin-portrait-size);
  width:var(--admin-portrait-size);
  height:var(--admin-portrait-size);
}
#dock .dock-welcome-message{min-height:50px;padding:10px 12px;border-radius:18px;font-size:14px;}
#dock .dock-welcome-select{flex:0 0 96px;width:96px;min-height:50px;padding:0 10px;border-radius:16px;font-size:14px;}
#dock .dock-welcome-stage{display:block;width:100%;min-width:0;max-width:100%;min-height:1.5em;line-height:1.45;white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis;}
#dock .dock-recommendations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
#dock .dock-rec{
  appearance:none;display:flex;align-items:center;justify-content:center;min-width:0;min-height:42px;
  padding:8px 10px;border:1px solid var(--theme-border);border-radius:15px;background:#fff;
  color:var(--theme-ink);font-family:inherit;font-size:12px;font-weight:700;line-height:1.35;
  text-align:center;cursor:pointer;box-shadow:0 1px 4px rgba(28,49,80,.06);
}
#dock .dock-rec strong{display:block;font-size:13px;font-weight:900;color:var(--theme-primary);line-height:1.25;}
#dock .dock-rec small{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6a7e96;}
#dock .dock-rec:hover{background:var(--theme-soft);border-color:var(--theme-primary);}
#dock .dock-rec:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px;}
@media(max-width:420px){
  #dock[data-mode="welcome"] .dock-inner{padding:8px 10px 10px;border-radius:24px;}
  #dock .dock-welcome-main{gap:6px;}
  #dock .dock-admin.dock-welcome-avatar{--admin-portrait-size:52px;height:var(--admin-portrait-size);}
  #dock .dock-welcome-message{min-height:46px;padding:9px 10px;font-size:13px;}
  #dock .dock-welcome-select{flex-basis:88px;width:88px;min-height:46px;font-size:13px;}
  #dock .dock-recommendations{gap:6px;}
  #dock .dock-rec{min-height:40px;padding:7px 8px;font-size:11px;border-radius:14px;}
  #dock .dock-rec strong{font-size:12px;}
}
@media(min-width:900px){
  #dock[data-mode="welcome"] .dock-inner{max-width:min(760px, calc(100vw - 48px));padding:12px 14px 14px;border-radius:28px;}
  #dock .dock-welcome-main{gap:10px;}
  #dock .dock-admin.dock-welcome-avatar{--admin-portrait-size:60px;height:var(--admin-portrait-size);}
  #dock .dock-welcome-message{min-height:54px;padding:11px 14px;font-size:15px;border-radius:19px;}
  #dock .dock-welcome-select{flex-basis:108px;width:108px;min-height:54px;font-size:15px;border-radius:17px;}
  #dock .dock-rec{min-height:46px;font-size:13px;}
  #dock .dock-rec strong{font-size:14px;}

  #summary-modal{place-items:center;padding:24px;}
  #summary-modal .dialog{width:min(660px, calc(100vw - 56px));height:min(80vh, 790px);max-height:min(80vh, 790px);border-radius:32px;}
  #summary-modal .modal-head{padding:20px 22px 16px;}
  #summary-modal .summary-scroll{padding:4px 22px 18px;flex:1 1 auto;}
  #summary-modal .summary-footer{padding:12px 22px calc(20px + env(safe-area-inset-bottom,0px));}
  #summary-modal .group-head{margin-top:12px;}
  #summary-modal .summary-row{padding:18px 2px;}
  #summary-modal .summary-footer .mixed-count{padding:10px 2px 14px;}
}


/* V99: desktop cart floats cleanly without an opaque full-width bottom veil. */
@media (min-width:768px){
  #dock{background:none !important;pointer-events:none;padding-top:6px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
  #dock .dock-inner{pointer-events:auto;box-shadow:0 8px 28px rgba(28,49,80,.15);}
  #dock[data-mode="welcome"] .dock-inner{pointer-events:auto;}
  #dock[data-mode="cart"] .dock-inner{background:#fff;border-color:var(--theme-border);}
  #dock[data-mode="cart"] #dock-total{scrollbar-width:thin;min-width:0;}
}

/* V100: Mouse-guided product advice on desktop; mobile retains scroll advice. */
@media (min-width: 900px) and (hover:hover) and (pointer:fine){
  #dock[data-mode="welcome"] .dock-recommendations{display:none!important;}
  #dock[data-mode="welcome"] .dock-inner{max-width:min(700px,calc(100vw - 48px));padding:12px 15px;}
  #dock .dock-welcome{gap:0;}
  #dock .dock-welcome-message{font-size:17px;}
  #products .product-card{transition:border-color .16s ease,box-shadow .16s ease;}
  /* V195: cart hover stays live when welcome-advisor typing is inactive. */
  #products:not([data-cart-active]) .product-card.admin-hover,
  #products[data-cart-active] .product-card:hover{
    border-color:#e53935;
    box-shadow:0 0 0 3px #e53935,0 10px 22px rgba(28,49,80,.12);
  }
}

/* V217: desktop guidance uses the same themed frame and soft fill as mobile.
   Preserve visible focus for actual keyboard use. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  #products .product-card.quantity-guide .range:not(:focus-visible){outline:none;}
}

/* V103: desktop clicks on product cards demonstrate the quantity slider.
   Hover alone remains a non-disruptive highlight. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
 #products .product-card[data-product]{cursor:pointer;}
 #products .product-card .range,
 #products .product-card .ask-one{cursor:pointer;}
 #products:not([data-cart-active]) .product-card.admin-hover.quantity-guide,
 #products[data-cart-active] .product-card.quantity-guide:hover{
  border-color:#e53935;
  box-shadow:0 0 0 3px #e53935,0 10px 22px rgba(28,49,80,.12);
 }
 #products .quantity-guide-instruction{z-index:5;}
 #products .quantity-guide-pointer{z-index:5;}
}


/* V108: compact desktop intro using the older wide QR layout as inspiration. */
@media (min-width: 900px){
  #home-intro{
    grid-template-columns:minmax(0, 1.45fr) minmax(330px, .72fr);
    gap:8px 20px;
    padding:18px 18px 16px;
  }
  #home-intro h1{font-size:clamp(31px,2.5vw,38px);line-height:1.18;margin:0;}
  #home-intro .home-delivery{font-size:clamp(22px,1.95vw,28px);margin-top:0;line-height:1.2;}
  #home-intro .home-description{font-size:14px;line-height:1.45;margin-top:2px;max-width:44ch;}
  #home-intro .home-benefits{max-width:470px;gap:8px;margin-top:4px;}
  #home-intro .home-benefit{min-height:36px;padding:6px 8px;font-size:12.5px;border-radius:12px;}
  #home-intro .home-benefit-icon{font-size:16px;width:18px;flex-basis:18px;}

  #home-intro .home-contacts{
    padding:10px 12px 12px;
    gap:10px;
    border-radius:18px;
    align-content:start;
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  }
  #home-intro .home-contact-qr{
    padding:6px 6px 8px;
    border-radius:14px;
    box-shadow:none;
    background:transparent;
    border-color:#e6efe7;
  }
  #home-intro .home-contact-qr-card{gap:4px;}
  #home-intro .home-contact-qr-img{width:min(118px,100%);border-radius:8px;box-shadow:none;}
  #home-intro .home-contact-qr-caption{font-size:10px;line-height:1.2;color:#718397;}
  #home-intro .home-contact-qr-handle{font-size:10.5px;line-height:1.2;letter-spacing:0;}
  #home-intro .home-contact-qr-button{min-height:35px;padding:0 14px;font-size:15px;border-radius:12px;box-shadow:none;}
  #home-intro .home-contact-phone{min-height:40px;font-size:15px;border-radius:14px;margin-top:2px;}
  #home-intro .home-contact-phone :is(svg,.ui-icon){width:18px;height:18px;flex-basis:18px;}
}

@media (min-width: 1200px){
  #home-intro{
    grid-template-columns:minmax(0, 1.52fr) minmax(390px, .7fr);
    padding:16px 18px 14px;
  }
  #home-intro .home-contacts{padding:8px 10px 10px;gap:8px;}
  #home-intro .home-contact-qr{padding:4px 4px 6px;}
  #home-intro .home-contact-qr-card{gap:3px;}
  #home-intro .home-contact-qr-img{width:min(104px,100%);}
  #home-intro .home-contact-qr-caption{font-size:9.5px;}
  #home-intro .home-contact-qr-handle{font-size:10px;}
  #home-intro .home-contact-qr-button{min-height:32px;font-size:14px;border-radius:11px;}
  #home-intro .home-contact-phone{min-height:38px;font-size:14px;}
}


/* V109: compact desktop header. QR above one contact-action row, left text tightly stacked. */
.home-contact-desktop-action{display:none}
@media (min-width:900px){
 #home-intro{
   grid-template-columns:minmax(0,1fr) minmax(330px, 0.70fr);
   grid-template-rows:repeat(4,min-content);
   align-content:start;
   row-gap:6px;
   column-gap:20px;
   padding:14px 18px;
 }
 #home-intro h1{margin:0;font-size:clamp(27px,2.4vw,35px);line-height:1.2;}
 #home-intro .home-delivery{margin:0;font-size:clamp(21px,1.9vw,27px);line-height:1.25;}
 #home-intro .home-description{margin:0;font-size:13px;line-height:1.45;}
 #home-intro .home-benefits{margin:0;max-width:440px;gap:7px;}
 #home-intro .home-benefit{min-height:34px;padding:5px 7px;font-size:12px;}
 #home-intro .home-contacts{
   display:grid;
   grid-column:2;
   grid-row:1 / span 4;
   grid-template-columns:repeat(6,minmax(0,1fr));
   grid-template-rows:auto 35px;
   align-content:center;
   gap:6px 8px;
   padding:8px 10px;
   border-radius:17px;
   align-self:center;
 }
 #home-intro .home-contact-qr{
   grid-row:1;
   grid-column:span 3;
   padding:0;
   border:0;
   border-radius:0;
   background:transparent;
   box-shadow:none;
   min-height:0;
 }
 #home-intro .home-contact-qr-card{gap:0;}
 #home-intro .home-contact-qr-img{width:clamp(88px,8.7vw,110px);border-radius:5px;box-shadow:none;}
 #home-intro .home-contact-qr-caption,
 #home-intro .home-contact-qr-handle,
 #home-intro .home-contact-qr-button{display:none!important;}
 #home-intro .home-contact-phone{display:none!important;}
 #home-intro .home-contact-desktop-action{
   display:flex;
   grid-row:2;
   grid-column:span 2;
   min-height:35px;
   height:35px;
   padding:0 4px;
   border-radius:10px;
   font-size:13px;
   font-weight:800;
   line-height:1;
   white-space:nowrap;
   box-shadow:none;
 }
 #home-intro .home-contact-desktop-phone{order:3;background:#ffe6a2;color:#684a18;border:1px solid #f3d27c;}
 #home-intro .home-contact-desktop-phone:link,#home-intro .home-contact-desktop-phone:visited{color:#684a18;}
 #home-intro .home-contact-desktop-facebook{order:4;background:#1d66ea;color:#fff;}
 #home-intro .home-contact-desktop-line{order:5;background:#079d40;color:#fff;}
}
@media (min-width:1200px){
 #home-intro{grid-template-columns:minmax(0,1fr) minmax(370px,0.55fr);}
 #home-intro .home-contacts{padding:7px 10px;}
 #home-intro .home-contact-qr-img{width:98px;}
}


/* V110: two distinct QR contact cards, each with its own action.
   Phone remains a full-width, legible action beneath both QR codes. */
@media(min-width:900px){
 #home-intro .home-contacts{
   grid-template-columns:repeat(2,minmax(0,1fr));
   grid-template-rows:auto 40px;
   gap:7px 9px;
   padding:9px;
   align-content:center;
 }
 #home-intro .home-contact-qr{
   grid-row:1;
   grid-column:auto;
   min-width:0;
   border:1px solid var(--theme-border);
   border-radius:13px;
   background:#fff;
   padding:7px 6px 8px;
   box-shadow:0 1px 4px rgba(32,55,78,.04);
 }
 #home-intro .home-contact-qr-card{gap:6px;}
 #home-intro .home-contact-qr-img{width:clamp(82px,8.3vw,105px);}
 #home-intro .home-contact-qr-button{
   display:inline-flex!important;
   min-height:31px;
   width:100%;
   border-radius:9px;
   font-size:14px;
   padding:0 8px;
 }
 #home-intro .home-contact-desktop-facebook,
 #home-intro .home-contact-desktop-line{display:none!important;}
 #home-intro .home-contact-desktop-phone{
   display:flex;
   grid-row:2;
   grid-column:1/-1;
   width:100%;
   height:40px;
   min-height:40px;
   gap:7px;
   border-radius:11px;
   font-size:16px;
   letter-spacing:.15px;
   background:#ffe6a2;
   color:#684a18;
   border:1px solid #f3d27c;
 }
}
@media(min-width:1200px){
 #home-intro .home-contacts{padding:8px;gap:6px 8px;}
 #home-intro .home-contact-qr{padding:5px 6px 7px;}
 #home-intro .home-contact-qr-img{width:95px;}
}


/* V111: telephone is a standalone desktop action in the empty middle area.
   QR cards remain on the right; mobile phone stays in its original location. */
@media(min-width:900px){
 #home-intro{position:relative;}
 #home-intro .home-contact-desktop-phone{
   position:absolute;
   display:inline-flex!important;
   grid-row:auto;
   grid-column:auto;
   right:calc(35% + 20px);
   top:50%;
   transform:translateY(-50%);
   width:clamp(170px,19vw,230px);
   min-height:44px;
   height:44px;
   margin:0;
   padding:0 12px;
   white-space:nowrap;
   border-radius:13px;
   font-size:clamp(14px,1.3vw,17px);
   font-weight:800;
   box-shadow:0 3px 9px rgba(114,86,31,.1);
   z-index:1;
 }
 #home-intro .home-contact-desktop-phone:hover{filter:brightness(.97);}
 #home-intro .home-contacts{grid-template-rows:auto;}
}
@media(min-width:1200px){
 #home-intro .home-contact-desktop-phone{right:calc(33% + 28px);}
}

/* V112: two independent QR cards (no shared wrapper) and phone
   directly under shop information. Changes desktop only. */
@media (min-width:900px){
 #home-intro{
   display:grid;
   grid-template-columns:minmax(0,1fr) clamp(145px,14vw,180px) clamp(145px,14vw,180px);
   grid-template-rows:repeat(4,auto) minmax(40px,auto);
   gap:5px 12px;
   align-content:start;
   padding:14px 17px;
 }
 #home-intro h1{grid-column:1;grid-row:1;margin:0;}
 #home-intro .home-delivery{grid-column:1;grid-row:2;margin:0;}
 #home-intro .home-description{grid-column:1;grid-row:3;margin:0;}
 #home-intro .home-benefits{grid-column:1;grid-row:4;margin:0;max-width:440px;}
 #home-intro .home-contacts{
   display:contents;
   border:0;
   padding:0;
   margin:0;
   box-shadow:none;
   background:none;
 }
 #home-intro .home-contact-mobile-only,
 #home-intro .home-contacts #home-contact-phone,
 #home-intro .home-contact-desktop-facebook,
 #home-intro .home-contact-desktop-line{display:none!important;}
 #home-intro .home-contact-qr{
   display:flex;
   position:relative;
   grid-row:1 / 6;
   width:100%;
   min-width:0;
   align-self:stretch;
   padding:8px;
   background:#fff;
   border:1px solid var(--theme-border);
   border-radius:15px;
   box-shadow:0 2px 7px rgba(28,49,80,.05);
   color:var(--theme-ink);
 }
 #home-intro .home-contact-qr-facebook{grid-column:2;}
 #home-intro .home-contact-qr-line{grid-column:3;}
 #home-intro .home-contact-qr-card{gap:9px;justify-content:center;}
 #home-intro .home-contact-qr-img{width:clamp(92px,8.5vw,112px);border-radius:6px;box-shadow:none;}
 #home-intro .home-contact-qr-caption,
 #home-intro .home-contact-qr-handle{display:none!important;}
 #home-intro .home-contact-qr-button{
   display:inline-flex!important;
   min-height:36px;
   width:100%;
   font-size:15px;
   border-radius:10px;
 }
 #home-intro .home-contact-desktop-phone{
   display:flex!important;
   position:static;
   transform:none;
   right:auto;
   top:auto;
   grid-column:1;
   grid-row:5;
   align-self:end;
   justify-self:start;
   width:fit-content;
   min-width:235px;
   max-width:100%;
   min-height:39px;
   height:39px;
   margin-top:5px;
   padding:0 18px;
   font-size:16px;
   font-weight:800;
   white-space:nowrap;
   border-radius:12px;
   background:#ffe6a2;
   color:#684a18;
   border:1px solid #f3d27c;
   box-shadow:0 2px 7px rgba(114,86,31,.08);
 }
}
@media (min-width:1200px){
 #home-intro{grid-template-columns:minmax(0,1fr) 170px 170px;gap:5px 12px;}
 #home-intro .home-contact-qr-img{width:106px;}
}


/* V113: telephone follows delivery checks in the SAME row; QR images are frameless. */
@media(min-width:900px){
 #home-intro{
  grid-template-columns:minmax(0,1fr) clamp(132px,12vw,170px) clamp(132px,12vw,170px);
  grid-template-rows:repeat(4,min-content);
  row-gap:6px;
  column-gap:14px;
  align-items:start;
 }
 #home-intro .home-benefits{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  max-width:none;
  min-width:0;
  grid-column:1;
  grid-row:4;
 }
 #home-intro .home-benefit{flex:0 1 auto;min-width:0;white-space:nowrap;padding:5px 9px;font-size:11px;}
 #home-intro .home-benefit-rotating{min-width:130px;}
 #home-intro .home-contact-desktop-phone{
  display:inline-flex!important;
  position:static!important;
  transform:none!important;
  flex:0 0 auto;
  grid-column:auto;
  grid-row:auto;
  align-self:center;
  justify-self:auto;
  width:auto;
  min-width:0;
  max-width:none;
  height:34px;
  min-height:34px;
  margin:0;
  padding:0 13px;
  border-radius:11px;
  font-size:13px;
  white-space:nowrap;
 }
 #home-intro .home-contact-qr{
  grid-row:1 / 5;
  align-self:stretch;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
 }
 #home-intro .home-contact-qr-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  height:100%;
  width:100%;
  padding:0;
  gap:8px;
 }
 #home-intro .home-contact-qr-img{
  width:clamp(94px,9vw,118px);
  margin:0 auto;
  box-shadow:none;
  border:0;
  border-radius:0;
 }
 #home-intro .home-contact-qr-button{
  width:100%;
  height:36px;
  min-height:36px;
  margin-top:auto;
  border-radius:10px;
 }
}
@media (min-width:900px) and (max-width:1100px){
 #home-intro{grid-template-columns:minmax(0,1fr) 126px 126px;column-gap:8px;}
 #home-intro .home-benefits{gap:5px;}
 #home-intro .home-benefit{padding:5px;font-size:10px;}
 #home-intro .home-benefit-rotating{min-width:110px;}
 #home-intro .home-contact-desktop-phone{font-size:11px;padding:0 7px;}
 #home-intro .home-contact-qr-img{width:96px;}
}


/* V114: three equally spaced action buttons beneath two frameless QR codes. */
@media (min-width:900px){
 #home-intro{
  grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,clamp(135px,13vw,173px)));
  grid-template-rows:repeat(4,min-content);
  column-gap:12px;
 }
 #home-intro .home-benefits{grid-column:1;grid-row:4;gap:8px;max-width:none;}
 #home-intro .home-contact-desktop-phone{
  display:flex!important;
  grid-column:2;
  grid-row:4;
  position:static!important;
  transform:none!important;
  justify-self:stretch;
  align-self:end;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:none;
  height:36px;
  min-height:36px;
  padding:0 6px;
  margin:0;
  font-size:clamp(11px,1.02vw,14px);
  font-weight:800;
  border-radius:10px;
  white-space:nowrap;
 }
 #home-intro .home-contact-qr-facebook{grid-column:3;}
 #home-intro .home-contact-qr-line{grid-column:4;}
 #home-intro .home-contact-qr{grid-row:1 / 5;}
 #home-intro .home-contact-qr-card{justify-content:space-between;height:100%;}
 #home-intro .home-contact-qr-button{height:36px;min-height:36px;font-size:14px;margin-top:auto;}
}
@media (min-width:900px) and (max-width:1100px){
 #home-intro{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,126px));column-gap:8px;}
 #home-intro .home-contact-desktop-phone{font-size:11px;padding:0 2px;}
 #home-intro .home-benefits{gap:5px;}
}



/* V115: larger desktop typography without increasing header/nav height. */
@media (min-width:900px){
 #home-intro h1{font-size:clamp(30px,2.55vw,38px)!important;line-height:1.1!important;}
 #home-intro .home-delivery{font-size:clamp(22px,1.95vw,28px)!important;line-height:1.12!important;}
 #home-intro .home-description{font-size:14px!important;line-height:1.22!important;letter-spacing:0!important;}
 #home-intro .home-benefit{font-size:12px!important;line-height:1.12!important;font-weight:700;}
 #home-intro .home-benefit-main{line-height:1.1!important;}
 #home-intro .home-benefit-icon{font-size:14px!important;width:16px!important;flex-basis:16px!important;}
 #home-intro .home-contact-desktop-phone{font-size:13px!important;line-height:1!important;}
 #home-intro .home-contact-qr-button{font-size:15px!important;line-height:1!important;}
 
 .category-nav .category-home,
 .category-nav .category-buttons .category-link{font-size:14px!important;line-height:1!important;}
 .category-nav .category-icon{width:15px;height:15px;flex-basis:15px;}
}
@media (min-width:1200px){
 #home-intro .home-description{font-size:15px!important;}
 #home-intro .home-benefit{font-size:12.5px!important;}
 .category-nav .category-home,
 .category-nav .category-buttons .category-link{font-size:14.5px!important;}
}


/* V116: readable delivery labels and all three desktop contact buttons;
   fixed heights keep the entire header unchanged. */
@media (min-width:900px){
 #home-intro .home-benefit{
  font-size:clamp(14px,1.15vw,16px)!important;
  line-height:1!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 9px!important;
  gap:5px!important;
  box-sizing:border-box;
 }
 #home-intro .home-benefit-icon{
  font-size:17px!important;width:19px!important;flex-basis:19px!important;
 }
 #home-intro .home-benefit-main{font-size:inherit!important;line-height:1!important;}
 #home-intro .home-contact-desktop-phone,
 #home-intro .home-contact-qr-button{
  font-size:clamp(15px,1.16vw,17px)!important;
  line-height:1!important;
  height:36px!important;min-height:36px!important;
  font-weight:800!important;
  padding:0 5px!important;
  box-sizing:border-box;
 }
 #home-intro .home-contact-desktop-phone{letter-spacing:-.25px;}
}
@media (min-width:900px) and (max-width:1100px){
 #home-intro .home-benefit{font-size:13px!important;padding:0 5px!important;}
 #home-intro .home-contact-desktop-phone{font-size:13px!important;letter-spacing:-.35px;}
 #home-intro .home-contact-qr-button{font-size:15px!important;}
}



/* V117: icons on top action buttons and a stronger desktop call button without growing the header area. */
.home-top-btn-icon{
 display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
 min-width:20px;height:20px;padding:0 6px;border-radius:999px;
 background:rgba(255,255,255,.22);color:inherit;font-weight:900;line-height:1;letter-spacing:0;
}
.home-top-btn-icon-fb{min-width:20px;width:20px;padding:0;border-radius:50%;background:#fff;color:#1d66ea;font-family:Arial,sans-serif;font-size:16px;}
.home-top-btn-icon-line{min-width:30px;padding:0 6px;border-radius:999px;background:#fff;color:#079d40;font-family:Arial,sans-serif;font-size:9px;font-weight:800;}
.home-top-btn-icon-phone{min-width:22px;padding:0;background:transparent;color:inherit;font-size:14px;}
#home-intro .home-contact-qr-button{gap:7px;white-space:nowrap;}
#home-intro .home-contact-desktop-phone{display:flex;align-items:center;justify-content:center;gap:7px;}
#home-intro .home-contact-desktop-phone strong{font-weight:900;letter-spacing:-.15px;}

@media (min-width:900px){
 #home-intro .home-contact-desktop-phone{
  font-size:15px!important;
  line-height:1!important;
  padding:0 8px!important;
  background:#ffd773;
  border-color:#e8c15f;
  box-shadow:0 2px 6px rgba(114,86,31,.10);
 }
 #home-intro .home-contact-desktop-phone .home-top-btn-icon-phone{font-size:15px;}
 #home-intro .home-contact-qr-button{
  font-size:15px!important;
  font-weight:800;
  gap:7px;
  padding:0 8px;
 }
}
@media (min-width:900px) and (max-width:1100px){
 #home-intro .home-contact-desktop-phone{font-size:14px!important;padding:0 4px!important;}
 #home-intro .home-contact-qr-button{font-size:14px!important;padding:0 5px;}
}



/* V118: restore the intended mobile header contact layout. */
@media (max-width: 899px){
  #home-intro .home-contacts{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px 12px;
    align-items:stretch;
  }
  #home-intro .home-contact-desktop-action,
  #home-intro .home-contact-qr{
    display:none !important;
  }
  #home-intro .home-contact-mobile-only{
    display:flex !important;
    min-height:56px;
    font-size:18px;
    font-weight:800;
    border-radius:18px;
  }
  #home-intro .home-contact-phone{
    display:flex !important;
    grid-column:1 / -1;
    min-height:58px;
    font-size:18px;
    border-radius:18px;
  }
}


/* V119: restore compact, old-style mobile contacts and the single-row advisor. */
@media (max-width:899px){
 #home-intro .home-contacts{gap:6px;margin-top:8px;}
 #home-intro .home-contact-mobile-only{
   display:flex!important;min-height:44px!important;padding:6px 8px!important;
   border-radius:15px!important;gap:7px!important;font-size:18px!important;
   line-height:1.35!important;
 }
 #home-intro .home-contact-mobile-only .home-contact-logo{width:25px;height:25px;flex-basis:25px;}
 #home-intro .home-contact-phone{
   display:flex!important;grid-column:1/-1;min-height:44px!important;
   padding:6px 8px!important;border-radius:15px!important;
   font-size:17px!important;gap:7px!important;line-height:1.35!important;
 }
 #home-intro .home-contact-phone :is(svg,.ui-icon){width:20px;height:20px;flex-basis:20px;}
 #dock[data-mode="welcome"]{padding:0 10px calc(3px + env(safe-area-inset-bottom,0px));background:none;}
 #dock[data-mode="welcome"] .dock-inner{
   display:flex;align-items:center;max-width:460px;padding:0!important;
   border:0!important;border-radius:0!important;background:transparent!important;
   box-shadow:none!important;gap:0!important;
 }
 #dock .dock-welcome{display:flex;flex-direction:row;align-items:center;gap:6px;width:100%;min-width:0;}
 #dock .dock-welcome-main{display:flex;align-items:center;gap:6px;width:100%;min-width:0;}
 #dock .dock-admin.dock-welcome-avatar{
   --admin-portrait-size:48px!important;flex:0 0 48px;width:48px;height:48px;
 }
 #dock .dock-welcome-message{
   min-height:44px!important;padding:9px!important;border-radius:16px!important;
   font-size:14px!important;
 }
 #dock .dock-welcome-stage{height:1.5em;line-height:1.5;}
 #dock .dock-welcome-select{
   flex:0 0 84px!important;width:84px!important;min-height:44px!important;
   padding:0 7px!important;border-radius:14px!important;font-size:13px!important;
 }
 #dock .dock-recommendations{display:none!important;}
}
@media (max-width:360px){
 #home-intro .home-contact-mobile-only{font-size:16px!important;}
 #home-intro .home-contact-phone{font-size:16px!important;}
 #dock .dock-welcome-message{font-size:13px!important;}
}
/* V121: widen random button while retaining existing 42px height. */
#section-theme .theme-random{height:42px;min-height:42px;min-width:132px;padding:0 18px;box-sizing:border-box;font-size:14px;}
@media(max-width:360px){#section-theme .theme-random{min-width:116px;padding:0 12px;}}
/* V122: add breathing room below the final appearance card so the floating message dock does not overlap it. */
#section-theme{margin-bottom:72px;}
@media(max-width:767px){#section-theme{margin-bottom:88px;}}


/* V123: matching four-column desktop ordering/trust rows and more readable card text. */
@media (min-width:900px){
  #section-ordering .order-step h3,
  #section-confidence .trust-card h3{font-size:19px;line-height:1.45;}
  #section-ordering .order-step p,
  #section-confidence .trust-card p{font-size:16px;line-height:1.65;}
}
@media (min-width:1100px){
  #section-ordering .order-steps,
  #section-confidence .trust-list{grid-template-columns:repeat(4,minmax(0,1fr));}
  #section-ordering .order-step,
  #section-confidence .trust-card{padding:16px 12px;gap:9px;}
  #section-ordering .order-step h3,
  #section-confidence .trust-card h3{font-size:18px;}
  #section-ordering .order-step p,
  #section-confidence .trust-card p{font-size:15px;}
}

/* V125: match appearance heading and intro typography to the confidence section. */
#section-theme h2{font-size:23px;line-height:1.35;}
#section-theme .appearance-intro{font-size:13px;line-height:1.6;}
@media(max-width:360px){#section-theme h2{font-size:21px;}}
@media(min-width:900px){
  #section-theme h2{font-size:29px;}
  #section-theme .appearance-intro{font-size:15px;}
}
/* Closing gallery actions now stand on their own, without an extra caption. */
#section-portfolio .order-contact-pair{margin-top:16px;}

/* V126: clearer desktop phone action; keep original 36px row height and mobile layout. */
@media(min-width:900px){
 #home-intro .home-contact-desktop-phone{
  background:#fff0b9!important;border:1px solid #f0d68e!important;
  color:#654710!important;box-shadow:none!important;
  font-size:clamp(15px,1.22vw,18px)!important;
  height:36px!important;min-height:36px!important;padding:0 5px!important;gap:5px!important;
  letter-spacing:0!important;
 }
 #home-intro .home-contact-desktop-phone strong{font-size:1.05em;font-weight:900;letter-spacing:0!important;}
 #home-intro .home-contact-desktop-phone .home-top-btn-icon-phone{font-size:17px!important;}
}
/* V126: larger random-button label, unchanged button height. */
#section-theme .theme-random{font-size:17px;min-height:42px;height:42px;}

/* V127: reserve a real desktop column for the phone number; prevent text overflow into Messenger. */
@media(min-width:900px){
 #home-intro{grid-template-columns:minmax(0,1fr) minmax(198px,210px) repeat(2,minmax(110px,145px))!important;}
 #home-intro .home-contact-desktop-phone{
   min-width:0!important;width:100%!important;max-width:100%!important;
   padding:0 8px!important;gap:5px!important;
   font-size:16px!important;letter-spacing:0!important;
   overflow:hidden;white-space:nowrap;
 }
 #home-intro .home-contact-desktop-phone span:last-child{white-space:nowrap;flex:0 0 auto;}
 #home-intro .home-contact-desktop-phone strong{font-size:16px!important;letter-spacing:0!important;}
 #home-intro .home-contact-desktop-phone .home-top-btn-icon-phone{flex:0 0 22px;min-width:22px;}
}
@media(min-width:900px) and (max-width:1050px){
 #home-intro{column-gap:8px!important;grid-template-columns:minmax(0,1fr) 198px repeat(2,110px)!important;}
}

/* V128: desktop-only contact CTA and consistent, legible typography at 2/3 product columns. */
@media(min-width:900px){
 #home-intro{grid-template-columns:minmax(0,1fr) 208px repeat(2,minmax(132px,150px))!important;column-gap:10px!important;}
 #home-intro .home-contact-desktop-phone,
 #home-intro .home-contact-qr-button{height:36px!important;min-height:36px!important;font-size:16px!important;line-height:1!important;}
 #home-intro .home-contact-qr-button{padding:0 5px!important;gap:5px!important;white-space:nowrap;}
 #home-intro .home-contact-qr-button .home-top-btn-icon{flex-shrink:0;}
 #home-intro .home-contact-desktop-phone{width:100%!important;min-width:0!important;padding:0 6px!important;}
 #home-intro .home-contact-desktop-phone strong{font-size:16px!important;}
 /* Do not reduce labels just because the catalog switches to two columns. */
 #products .card-head :is(h2,h3){font-size:21px;}
 #products .subtitle{font-size:14px;}
 #products .info-box .k{font-size:13px;}
 #products .info-box .v{font-size:15px;}
 #products .ask-one{font-size:16px;}
 .category-nav .category-home,.category-nav .category-buttons .category-link{font-size:14.5px!important;}
 #home-intro .home-description{font-size:15px!important;}
 #home-intro .home-benefit{font-size:14px!important;}
}
@media(min-width:900px) and (max-width:1050px){
 #home-intro{grid-template-columns:minmax(0,1fr) 208px repeat(2,132px)!important;column-gap:8px!important;}
}

/* V129: desktop contact-action bottom edges align; avoid oversized empty end-of-page space. */
@media(min-width:900px){
 #home-intro .home-benefits{align-self:end!important;align-items:end!important;}
 #home-intro .home-benefit{height:36px!important;min-height:36px!important;align-self:end;}
 #home-intro .home-contact-desktop-phone{align-self:end!important;margin:0!important;}
 #home-intro .home-contact-qr-card{justify-content:space-between;}
 #home-intro .home-contact-qr-button{height:36px!important;min-height:36px!important;margin-top:auto;}
 #section-theme{margin-bottom:0;}
 body{padding-bottom:calc(var(--bottom-dock-height,112px) + 14px);}
}
/* V130: CDN brand icon in the sticky header, keeping existing responsive dimensions. */
.home-header .logo{background:transparent;box-shadow:none;overflow:hidden;}
.home-header .logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;}

/* V133: on desktop, show the three original-size contact actions in the sticky top header while the catalog navigation is active. */
.header-desktop-contacts[hidden]{display:none!important;}
.header-desktop-contacts{display:none;}
@media(min-width:900px){
 .home-header-inner{position:relative;}
 .home-header.desktop-catalog-active .header-desktop-contacts{
   display:flex;align-items:center;justify-content:center;gap:10px;
   position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
   width:max-content;max-width:calc(100% - 365px);z-index:1;
 }
 .header-desktop-contacts a{
   display:inline-flex;align-items:center;justify-content:center;gap:7px;
   height:36px;min-height:36px;box-sizing:border-box;border-radius:11px;
   white-space:nowrap;text-decoration:none;font:800 16px/1 Tahoma,system-ui,sans-serif;
 }
 .header-desktop-phone{width:208px;background:#ffefbc;border:1px solid #f3d27c;color:#684a18;}
 .header-desktop-phone strong{font-weight:900;}
 .header-desktop-facebook{width:150px;background:#1d66ea;color:#fff;}
 .header-desktop-line{width:150px;background:#079d40;color:#fff;}
 .header-social-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;background:#fff;border-radius:99px;font-family:Arial,sans-serif;font-weight:900;}
 .header-fb-mark{width:20px;height:20px;color:#1d66ea;font-size:17px;}
 .header-line-mark{width:33px;height:19px;color:#079d40;font-size:9px;}
 .header-desktop-contacts a:focus-visible{outline:3px solid #efb63e;outline-offset:2px;}
}
@media(min-width:900px) and (max-width:1199px){
 .home-header.desktop-catalog-active .home-header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:8px;}
 .home-header.desktop-catalog-active .header-desktop-contacts{position:static;transform:none;grid-column:3;max-width:none;gap:7px;}
 .home-header.desktop-catalog-active .header-inquiry{grid-column:4;margin-left:0;}
 .home-header.desktop-catalog-active .header-desktop-phone{width:178px;}
 .home-header.desktop-catalog-active .header-desktop-facebook,
 .home-header.desktop-catalog-active .header-desktop-line{width:124px;}
 .home-header.desktop-catalog-active .header-desktop-contacts a{font-size:13px;gap:4px;}
}
@media(max-width:899px){.header-desktop-contacts{display:none!important;}}


/* V135: compact mobile page end; the measured dock height includes its safe-area inset. */
@media(max-width:899px){
 #section-theme{margin-bottom:0;}
 body{padding-bottom:calc(var(--bottom-dock-height,112px) + 4px);}
}

/* V136: wrap configurable mobile contact labels inside their columns; retain the separate channel line. */
@media(max-width:899px){
 /* Long area names wrap without widening the mobile layout viewport. */
 #home-intro .home-delivery{white-space:normal;}
 #home-intro .home-delivery > span:last-child{min-width:0;overflow-wrap:anywhere;}
 .order-contact-label{min-width:0;line-height:1.4;white-space:normal;overflow-wrap:anywhere;}
 .order-contact-channel{display:block;}
}

/* V137: approved desktop send-button typography, preserving existing button dimensions. */
@media(min-width:900px){
 #summary-modal .primary-send{justify-content:center;gap:14px;}
 #summary-modal .primary-send .send-text{
  align-items:flex-start;gap:3px;min-width:82px;white-space:nowrap;text-align:left;
 }
 #summary-modal .primary-send .send-text .top{font-size:18px;line-height:1.2;font-weight:700;gap:6px;}
 #summary-modal .primary-send .send-text .bottom{font-size:30px;line-height:1.1;font-weight:900;}
 #summary-modal .primary-send .summary-send-arrow{width:15px;height:15px;flex-basis:15px;}
}

/* V138: desktop delivery caption matches the Home navigation font size within the existing header. */
@media(min-width:900px){
 #home-header-delivery{font-size:14.5px;line-height:1.2;}
}

/* V140: give the wide-desktop intro contacts more space between actions and at the right edge. */
@media(min-width:1200px){
 #home-intro{column-gap:20px!important;padding-right:40px;}
}

/* V141: vivid contact cards; the live CDN QR images remain separate from the decorative background. */
#section-contact .contact-channel{
 --channel-color:#075ed6;
 --channel-start:#087af4;
 --channel-end:#0056cc;
 position:relative;
 isolation:isolate;
 overflow:hidden;
 justify-content:space-between;
 gap:7px;
 padding:14px 9px 12px;
 border:1px solid rgba(255,255,255,.35);
 border-radius:20px;
 background:linear-gradient(145deg,var(--channel-start),var(--channel-end));
 color:#fff;
 box-shadow:0 7px 18px rgba(0,73,162,.12),inset 0 1px 0 rgba(255,255,255,.2);
 transition:box-shadow .18s ease;
}
#section-contact .contact-channel-line{
 --channel-color:#007d35;
 --channel-start:#009c40;
 --channel-end:#007c32;
 box-shadow:0 7px 18px rgba(0,107,46,.12),inset 0 1px 0 rgba(255,255,255,.2);
}
#section-contact .contact-channel::before,
#section-contact .contact-channel::after{
 content:"";
 position:absolute;
 z-index:0;
 pointer-events:none;
 width:165%;
 aspect-ratio:1;
 border-radius:44%;
 transform:rotate(-27deg);
}
#section-contact .contact-channel::before{
 top:0;left:0;transform:translate(-48%,-72%) rotate(-27deg);
 background:rgba(255,255,255,.11);
 box-shadow:0 0 0 22px rgba(255,255,255,.045),0 0 0 65px rgba(255,255,255,.035);
}
#section-contact .contact-channel::after{
 right:0;bottom:0;transform:translate(72%,38%) rotate(-27deg);
 background:rgba(255,255,255,.11);
 box-shadow:0 0 0 25px rgba(255,255,255,.045),0 0 0 74px rgba(255,255,255,.035);
}
#section-contact .contact-channel > *{position:relative;z-index:1;flex-shrink:0;}
#section-contact .contact-channel-title{gap:7px;font-size:20px;line-height:1.4;color:#fff;text-shadow:0 1px 2px rgba(0,40,80,.13);}
#section-contact .contact-channel-logo{
 width:28px;height:28px;flex-basis:28px;
 border-radius:50%;background:#fff;color:var(--channel-color);
 text-shadow:none;
}
#section-contact .contact-channel-logo :is(svg,.ui-icon){width:24px;height:24px;}
#section-contact .contact-channel-account{color:#fff;font-size:11px;line-height:1.5;}
#section-contact .contact-channel-qr-frame{
 display:block;width:136px;max-width:100%;aspect-ratio:1;
 padding:9px;margin:2px auto 3px;border:1px solid rgba(255,255,255,.85);
 border-radius:16px;background:#fff;
 box-shadow:0 9px 19px rgba(0,31,77,.22),0 2px 4px rgba(0,31,77,.1);
}
#section-contact .contact-channel-qr{
 display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;
 margin:0;border:0;border-radius:0;background:#fff;
}
#section-contact .contact-channel-hint{
 display:flex;align-items:center;justify-content:center;gap:6px;
 width:100%;max-width:194px;min-height:32px;
 padding:6px 7px;border-radius:999px;
 background:#fff;color:var(--channel-color);
 font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;
 box-shadow:0 3px 8px rgba(0,36,79,.12);
}
/* V143: scan icon before the caption, replacing the trailing arrow. */
#section-contact .contact-channel-scan{
 display:block;flex:0 0 19px;width:19px;height:19px;color:currentColor;
}
#section-contact .contact-channel:focus-visible{outline:3px solid #182d46;outline-offset:3px;}
@media(min-width:900px){
 #section-contact .contact-channel{padding:15px 12px 14px;gap:6px;border-radius:22px;}
 #section-contact .contact-channel-title{font-size:22px;}
 #section-contact .contact-channel-account{font-size:12px;}
 #section-contact .contact-channel-qr-frame{width:158px;padding:10px;border-radius:18px;}
 #section-contact .contact-channel-hint{min-height:34px;font-size:12px;}
}
@media(max-width:360px){
 #section-contact .contact-channel{padding:12px 7px 10px;gap:6px;}
 #section-contact .contact-channel-title{font-size:18px;gap:5px;}
 #section-contact .contact-channel-account{font-size:9.5px;}
 #section-contact .contact-channel-qr-frame{padding:7px;border-radius:13px;}
 #section-contact .contact-channel-hint{font-size:10px;gap:4px;padding-inline:4px;}
 #section-contact .contact-channel-scan{flex-basis:17px;width:17px;height:17px;}
}
@media(hover:hover){
 #section-contact .contact-channel:hover{border-color:rgba(255,255,255,.7);box-shadow:0 9px 22px rgba(0,49,99,.22),inset 0 1px 0 rgba(255,255,255,.25);}
}
@media(prefers-reduced-motion:reduce){
 #section-contact .contact-channel{transition:none;}
}

/* V142: larger account labels and scan/contact captions in both footer cards. */
#section-contact .contact-channel-account{font-size:13px;}
#section-contact .contact-channel-hint{font-size:14px;padding-block:4px;}
@media(max-width:360px){
 #section-contact .contact-channel-account{font-size:11px;}
 #section-contact .contact-channel-hint{font-size:12px;}
}
@media(min-width:900px){
 #section-contact .contact-channel-account{font-size:14px;}
 #section-contact .contact-channel-hint{font-size:14px;}
}
@media(min-width:1200px){
 #section-contact .contact-channel-account{font-size:16px;}
 #section-contact .contact-channel-hint{font-size:16px;}
}

/* V147: the standalone mobile slogan matches the product title at every screen width. */
@media(max-width:899px){
 .home-header:not(.desktop-catalog-active) #home-header-caption{font-size:var(--header-label-size);}
}

/* V146: the footer slogan shares the responsive product-title font size. */
#section-contact .contact-brand-caption{font-size:var(--header-label-size);}

/* V149: the mobile header delivery label matches the free-delivery benefit text. */
@media(max-width:899px){
 #home-header-delivery{font-size:clamp(11.5px,calc(2.95vw + 1px),13.5px);}
}

/* V153: keep the mobile appearance picker compact, with randomize between colors and portraits. */
@media(max-width:899px){
 #section-theme{padding:14px 14px 12px;border-radius:20px;}
 #section-theme .theme-picker-head{justify-content:center;}
 #section-theme h2{font-size:21px;line-height:1.35;}
 #section-theme .appearance-intro{margin:3px 0 12px;font-size:12px;line-height:1.6;text-align:center;}
 #section-theme .appearance-grid{gap:12px;}
 #section-theme .appearance-panel-head{margin-bottom:6px;}
 #section-theme .appearance-panel h3{font-size:14px;line-height:1.5;}
 #section-theme .appearance-count{font-size:10px;line-height:1.4;padding:2px 7px;}
 #section-theme .theme-swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
 #section-theme .theme-swatch{min-height:54px;padding:3px;border-radius:10px;}
 #section-theme .theme-swatch-preview{height:26px;border-radius:6px;}
 #section-theme .theme-preview-line{left:5px;top:6px;height:2px;}
 #section-theme .theme-preview-short{top:11px;}
 #section-theme .theme-preview-action{right:5px;bottom:4px;height:7px;}
 #section-theme .theme-swatch-label{margin:3px 0 0;font-size:11px;line-height:1.35;}
 #section-theme .appearance-admin-panel{padding-top:0;border-top:0;}
 #section-theme .admin-choices{gap:8px 6px;}
 #section-theme .admin-choice{max-width:52px;}
 /* V155: the desktop-style outlined button stays centered and responds without moving. */
 #section-theme .theme-random{
  justify-self:center;width:auto;min-width:132px;height:44px;min-height:44px;padding:0 18px;
  border:1px solid var(--theme-primary);border-radius:12px;
  background:var(--theme-soft);color:var(--theme-ink);box-shadow:none;font-size:17px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
 }
 #section-theme .theme-random:active{background:var(--theme-border);}
}
@media(max-width:899px) and (max-height:740px){
 #section-theme{padding:10px;}
 #section-theme h2{font-size:20px;}
 #section-theme .appearance-intro{margin:3px 0 8px;line-height:1.4;}
 #section-theme .appearance-grid{gap:8px;}
 #section-theme .appearance-panel-head{margin-bottom:4px;}
 #section-theme .theme-swatches{gap:5px;}
 #section-theme .theme-swatch{min-height:48px;}
 #section-theme .theme-swatch-preview{height:20px;}
 #section-theme .theme-swatch-label{margin-top:2px;}
 #section-theme .admin-choices{gap:6px;}
 #section-theme .admin-choice{max-width:46px;}
}
@media(max-width:899px) and (max-height:640px){
 #section-theme .theme-picker-head{margin-bottom:8px;}
 #section-theme .appearance-intro{display:none;}
 #section-theme .theme-swatches{grid-template-columns:repeat(6,minmax(0,1fr));}
 #section-theme .theme-swatch{min-height:44px;}
 #section-theme .theme-swatch-preview{height:19px;}
 #section-theme .theme-swatch-label{font-size:clamp(9px,2.75vw,11px);line-height:1.2;}
 #section-theme .theme-preview-line{width:32%;}
 #section-theme .theme-preview-short{width:20%;}
 #section-theme .admin-choice{max-width:44px;}
}

/* V154: use the available mobile screen height and give each picker group more room. */
@media(max-width:899px){
 #section-theme{
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--home-header-height,66px) - var(--category-height,56px) - var(--bottom-dock-height,72px) - 32px);
  min-height:calc(100dvh - var(--home-header-height,66px) - var(--category-height,56px) - var(--bottom-dock-height,72px) - 32px);
 }
 #section-theme .theme-picker-head,#section-theme .appearance-intro{flex:none;}
 #section-theme .appearance-grid{flex:1;align-content:space-between;}
}
@media(max-width:899px) and (min-height:641px){
 #section-theme{padding:16px;border-radius:22px;}
 #section-theme h2{font-size:21px;}
 #section-theme .appearance-intro{margin:6px 0 10px;}
 #section-theme .appearance-grid{gap:12px;}
 #section-theme .appearance-panel-head{margin-bottom:8px;}
 #section-theme .theme-swatches{gap:8px;}
 #section-theme .theme-swatch{min-height:52px;border-radius:11px;}
 #section-theme .theme-swatch-preview{height:24px;}
 #section-theme .theme-swatch-label{margin-top:3px;}
 #section-theme .admin-choices{gap:8px;}
 #section-theme .admin-choice{max-width:50px;}
}
@media(max-width:899px) and (min-height:741px){
 #section-theme{padding:18px;}
 #section-theme .appearance-intro{margin-bottom:14px;}
 #section-theme .appearance-grid{gap:16px;}
 #section-theme .theme-swatch{min-height:56px;}
 #section-theme .theme-swatch-preview{height:28px;}
 #section-theme .admin-choices{gap:10px 8px;}
 #section-theme .admin-choice{max-width:54px;}
}

/* V156: a full-width mobile random button, with spare space shared above and below the groups. */
@media(max-width:899px){
 #section-theme .theme-random{justify-self:stretch;width:100%;min-width:0;}
 #section-theme .appearance-grid{align-content:space-evenly;row-gap:12px;}
}
@media(max-width:899px) and (max-height:640px){
 #section-theme .appearance-grid{row-gap:8px;}
}

/* V158: retain the original yellow phone buttons; gently move only their icons. */
@keyframes phone-icon-glide{
 0%,20%,100%{transform:translateX(0);}
 5%{transform:translateX(-2px);}
 10%{transform:translateX(2px);}
 15%{transform:translateX(-1px);}
}
@media(prefers-reduced-motion:no-preference){
 .header-desktop-phone > span:first-child,
 #home-intro .home-contact-desktop-phone .home-top-btn-icon-phone,
 #home-contact-phone > :is(svg,.ui-icon),
 .contact-phone > :is(svg,.ui-icon){
  animation:phone-icon-glide 5.6s ease-in-out infinite;
 }
}


/* V161: center the desktop random button in the divider and balance the home spacing. */
.appearance-random-divider{display:none;}

@media(min-width:900px){
 #section-theme .appearance-grid{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:24px;}
 #section-theme .appearance-random-divider{display:flex;flex-direction:column;align-items:center;gap:16px;}
 #section-theme .appearance-random-divider::before,
 #section-theme .appearance-random-divider::after{content:'';width:1px;flex:1;background:var(--theme-border);}
 #section-theme .theme-random{width:180px;min-width:180px;height:42px;min-height:42px;}
 #section-theme .appearance-admin-panel{padding-left:0;border-left:0;}

}


/* V163: all three outer gaps use the existing 4px space below the category frame. */
.wrap{--home-frame-gap:4px;padding-top:var(--home-frame-gap);}
#home-intro{margin-bottom:var(--home-frame-gap);}
.category-nav{padding-top:0;padding-bottom:var(--home-frame-gap);}



/* V164: retain the existing button geometry, with the header's Messenger colors. */
#dock .dock-welcome-select.is-messenger-send{
 background:linear-gradient(135deg,#0866ff 0%,#3355ed 55%,#683bdf 100%);
 color:#fff;border-color:rgba(255,255,255,.3);
 box-shadow:0 5px 14px rgba(36,88,224,.24),inset 0 1px 0 rgba(255,255,255,.2);
}


/* V165: larger send label and a horizontal paper plane, retaining button dimensions. */
#dock .dock-welcome-select.is-messenger-send{font-size:20px!important;gap:7px;line-height:1;}
#dock .dock-welcome-select.is-messenger-send :is(svg,.ui-icon){width:24px;height:24px;flex:0 0 24px;}


/* V167: float the desktop welcome controls and balance spacing around the final panel. */
@media(min-width:900px){
 .wrap{padding-bottom:0;}
 #section-theme{margin-bottom:0;}
 body{padding-bottom:calc(var(--bottom-dock-height,112px) + 18px);}
 #dock[data-mode="welcome"] .dock-inner{
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  pointer-events:none;
 }
 #dock[data-mode="welcome"] .dock-welcome-main > *{pointer-events:auto;}
}


/* V168: a 4px gap between the sticky header and category frame, matching its lower inset. */
#home-intro{margin-bottom:0;}
.category-nav{padding-top:var(--home-frame-gap,4px);}


/* V191: shared desktop hover/press feedback includes the dock delete button. */
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 :is(#home-header,#home-intro,#section-ordering,#section-confidence,#section-portfolio,#section-contact,#section-theme,#products,#dock,#ask-modal,#summary-modal,#line-qr-modal,#dock-clear-dialog) :is(a[data-page-inquiry],a[href^="tel:"],.ask-channel,.ask-one,.theme-random,.primary-send,#contact-share-button,#contact-copy-button,#open-summary:not(:disabled),#dock-welcome-select,.action-close,.ask-dialog-close,.line-qr-close,#delete-all,#add-more,#copy-btn,#share-friend,.delete-one,.qty-pill,#dock-clear-confirm,#dock-clear-cancel,#dock-clear){cursor:pointer;transition:translate .16s ease,filter .16s ease,box-shadow .16s ease;}
 :is(#home-header,#home-intro,#section-ordering,#section-confidence,#section-portfolio,#section-contact,#section-theme,#products,#dock,#ask-modal,#summary-modal,#line-qr-modal,#dock-clear-dialog) :is(a[data-page-inquiry],a[href^="tel:"],.ask-channel,.ask-one,.theme-random,.primary-send,#contact-share-button,#contact-copy-button,#open-summary:not(:disabled),#dock-welcome-select,.action-close,.ask-dialog-close,.line-qr-close,#delete-all,#add-more,#copy-btn,#share-friend,.delete-one,.qty-pill,#dock-clear-confirm,#dock-clear-cancel,#dock-clear):hover{translate:0 -2px;filter:brightness(1.06) drop-shadow(0 4px 5px rgba(28,49,80,.18));}
 :is(#home-header,#home-intro,#section-ordering,#section-confidence,#section-portfolio,#section-contact,#section-theme,#products,#dock,#ask-modal,#summary-modal,#line-qr-modal,#dock-clear-dialog) :is(a[data-page-inquiry],a[href^="tel:"],.ask-channel,.ask-one,.theme-random,.primary-send,#contact-share-button,#contact-copy-button,#open-summary:not(:disabled),#dock-welcome-select,.action-close,.ask-dialog-close,.line-qr-close,#delete-all,#add-more,#copy-btn,#share-friend,.delete-one,.qty-pill,#dock-clear-confirm,#dock-clear-cancel,#dock-clear):active{translate:0 0;filter:brightness(.97);}
}
@media(prefers-reduced-motion:reduce){
 :is(#home-header,#home-intro,#section-ordering,#section-confidence,#section-portfolio,#section-contact,#section-theme,#products,#dock,#ask-modal,#summary-modal,#line-qr-modal,#dock-clear-dialog) :is(a[data-page-inquiry],a[href^="tel:"],.ask-channel,.ask-one,.theme-random,.primary-send,#contact-share-button,#contact-copy-button,#open-summary:not(:disabled),#dock-welcome-select,.action-close,.ask-dialog-close,.line-qr-close,#delete-all,#add-more,#copy-btn,#share-friend,.delete-one,.qty-pill,#dock-clear-confirm,#dock-clear-cancel,#dock-clear){transition:none;}
 :is(#home-header,#home-intro,#section-ordering,#section-confidence,#section-portfolio,#section-contact,#section-theme,#products,#dock,#ask-modal,#summary-modal,#line-qr-modal,#dock-clear-dialog) :is(a[data-page-inquiry],a[href^="tel:"],.ask-channel,.ask-one,.theme-random,.primary-send,#contact-share-button,#contact-copy-button,#open-summary:not(:disabled),#dock-welcome-select,.action-close,.ask-dialog-close,.line-qr-close,#delete-all,#add-more,#copy-btn,#share-friend,.delete-one,.qty-pill,#dock-clear-confirm,#dock-clear-cancel,#dock-clear):hover{translate:none;}
}


/* V171: use the footer handset icon in both desktop phone controls. */
.matched-phone-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.matched-phone-icon :is(svg,.ui-icon){display:block;width:22px;height:22px;flex-shrink:0;}


/* V172: more horizontal breathing room for desktop phone actions. */
@media(min-width:900px){
 #home-intro{grid-template-columns:minmax(0,1fr) 248px repeat(2,minmax(132px,150px))!important;}
 #home-intro .home-contact-desktop-phone{padding-left:24px!important;padding-right:24px!important;}
 .header-desktop-phone{width:248px;padding-left:24px;padding-right:24px;}
 .home-header.desktop-catalog-active .header-desktop-phone{width:218px;}
}
@media(min-width:900px) and (max-width:1050px){
 #home-intro{grid-template-columns:minmax(0,1fr) 248px repeat(2,132px)!important;}
}


/* V173: a wider desktop Messenger button and a more legible secondary label. */
@media(min-width:900px){
 .home-header .header-inquiry{min-width:168px;padding-left:22px;padding-right:22px;}
 .home-header .header-inquiry-app{font-size:13px;}
}


/* V196: desktop navigation feedback without changing the active section marker. */
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 /* Reserve room for the raised hover border without changing the navigation height. */
 .category-nav .category-buttons{padding-block:3px;margin-block:-3px;}
 .category-nav .category-link{cursor:pointer;transition:translate .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,filter .16s ease;}
 .category-nav .category-link:hover{translate:0 -1px;}
 .category-nav .category-link:not([aria-current="location"]):hover{background:var(--theme-soft);color:var(--theme-ink);box-shadow:inset 0 0 0 1px var(--theme-border),0 3px 8px rgba(28,49,80,.10);}
 .category-nav .category-link[aria-current="location"]:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);filter:brightness(1.06);}
 .category-nav .category-link:active,
 .category-nav .category-link[aria-current="location"]:active{translate:0 0;filter:brightness(.97);}
}
@media(prefers-reduced-motion:reduce){
 .category-nav .category-link{transition:none;}
 .category-nav .category-link:hover{translate:none;}
}


/* V199: desktop portrait choices step forward with a short, friendly greeting. */
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 #section-theme .admin-choice{
  --greeting-x:-50%;
  transform-origin:center;
  transition:transform .26s cubic-bezier(.2,.75,.25,1),box-shadow .24s ease,border-color .2s ease;
 }
 #section-theme .admin-choice::before{
  content:'ยินดีดูแลค่ะ';position:absolute;z-index:2;bottom:calc(100% + 9px);left:50%;
  padding:6px 10px;border:1px solid var(--theme-border);border-radius:12px 12px 12px 3px;
  background:#fff;color:var(--theme-ink);box-shadow:0 4px 12px rgba(28,49,80,.12);
  font:700 11px/1.5 Tahoma,system-ui,sans-serif;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(var(--greeting-x),5px);
  transition:opacity .18s ease,transform .22s ease,visibility .18s;
 }
 #section-theme .admin-choice:nth-child(5n+1){--greeting-x:0%;}
 #section-theme .admin-choice:nth-child(5n+1)::before{left:-5px;}
 #section-theme .admin-choice:nth-child(5n){--greeting-x:0%;}
 #section-theme .admin-choice:nth-child(5n)::before{left:auto;right:-5px;border-radius:12px 12px 3px 12px;}
 #section-theme .admin-choice:is(:hover,:focus-visible){
  z-index:3;transform:translateY(-4px) scale(1.35);border-color:var(--theme-primary);
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--theme-border),0 9px 20px rgba(28,49,80,.18);
 }
 #section-theme .admin-choice:is(:hover,:focus-visible)::before{
  opacity:1;visibility:visible;transform:translate(var(--greeting-x),0);transition-delay:.1s;
 }
 #section-theme .admin-choice:active{transform:translateY(-2px) scale(1.28);}
}
@media(min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
 #section-theme .admin-choice{transition:none;}
 #section-theme .admin-choice:is(:hover,:focus-visible,:active){transform:none;}
 #section-theme .admin-choice::before{transition:none;transform:translateX(var(--greeting-x));}
}


/* V200: show each palette name in the same floating style as the admin greeting. */
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 #section-theme .theme-swatch{--color-name-x:-50%;}
 #section-theme .theme-swatch::before{
  content:attr(data-color-name);position:absolute;z-index:2;bottom:calc(100% + 10px);left:50%;
  padding:7px 12px;border:1px solid var(--swatch);border-radius:12px 12px 12px 3px;
  background:#fff;color:var(--swatch-ink);box-shadow:0 4px 12px rgba(28,49,80,.12);
  font:700 14px/1.5 Tahoma,system-ui,sans-serif;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(var(--color-name-x),5px);
  transition:opacity .18s ease,transform .22s ease,visibility .18s;
 }
 #section-theme .theme-swatch:nth-child(6n+1){--color-name-x:0%;}
 #section-theme .theme-swatch:nth-child(6n+1)::before{left:0;}
 #section-theme .theme-swatch:nth-child(6n){--color-name-x:0%;}
 #section-theme .theme-swatch:nth-child(6n)::before{left:auto;right:0;border-radius:12px 12px 3px 12px;}
 #section-theme .theme-swatch:is(:hover,:focus-visible){z-index:3;}
 #section-theme .theme-swatch:is(:hover,:focus-visible)::before{
  opacity:1;visibility:visible;transform:translate(var(--color-name-x),0);transition-delay:.1s;
 }
}
@media(prefers-reduced-motion:reduce){
 #section-theme .theme-swatch::before{transition:none;transform:translateX(var(--color-name-x));}
}


/* V219: keep the fixed label above the quantity guide. */
#products .product-card.quantity-guide .qty-bubble{z-index:1}

#dock-welcome-message[hidden]{display:none!important}
/* Semantic product specifications retain the existing card spacing. */
dl.info-grid{margin:0} .info-box dt,.info-box dd{margin:0}

/* Quantity help is clickable before selection; both states keep pointer hover feedback. */
button.qty-bubble{border:0;font-family:inherit;opacity:1;z-index:4}
button.qty-bubble:not(:disabled){pointer-events:auto;cursor:pointer;touch-action:manipulation}
button.qty-bubble:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 button.qty-bubble:disabled{pointer-events:auto}
 button.qty-bubble:hover{filter:brightness(1.12);box-shadow:0 0 0 3px rgba(31,109,232,.2),0 4px 12px rgba(31,109,232,.25)}
 .slider-panel:has(button.qty-bubble:hover) .slider-thumb-cue{filter:drop-shadow(0 0 4px var(--blue))}
}
/* Contact pairs follow the URL variant, including explicitly positioned desktop QR cards. */
@media (min-width:900px){
 body[data-contact-order="line-first"] #home-intro .home-contact-qr-line{grid-column:3;}
 body[data-contact-order="line-first"] #home-intro .home-contact-qr-facebook{grid-column:4;}
 body[data-contact-order="line-first"] #home-intro .home-contact-desktop-line{order:4;}
 body[data-contact-order="line-first"] #home-intro .home-contact-desktop-facebook{order:5;}
}
/* Step through overflowing section menus without widening the page. */
.category-step[hidden]{display:none;}
.category-step{display:inline-flex;flex:0 0 30px;align-items:center;justify-content:center;width:30px;min-height:40px;margin:0 2px;padding:0;border:1px solid var(--theme-border);border-radius:9px;background:var(--theme-soft);color:var(--theme-ink);cursor:pointer;touch-action:manipulation;}
.category-step :is(svg,.ui-icon,.category-icon-image){display:block;width:18px;height:18px;pointer-events:none;}
.category-step:disabled{opacity:.35;cursor:default;}
.category-step:focus-visible{outline:2px solid var(--theme-ink);outline-offset:-2px;}
@media(hover:hover) and (pointer:fine){.category-step:not(:disabled):hover{background:var(--theme-border);}}
@media(max-width:899px){
 .category-nav .category-home{width:40px;min-width:40px;padding:0;gap:0;}
 .category-nav .category-home > span:not(.category-icon){display:none;}
}
@media(min-width:900px){.category-step{flex-basis:32px;width:32px;min-height:42px;}}


img[data-contact-qr][hidden]{display:none!important;}

/* Native image fallbacks remain readable when styling or masks are unavailable. */
.ui-icon{display:inline-block;vertical-align:middle;width:24px;height:24px;flex-shrink:0;line-height:0;background:transparent;pointer-events:none;}
.ui-icon[hidden],[data-css-enhancement][hidden]{display:none!important;}
.ui-icon > img,.category-icon-image > img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;aspect-ratio:auto;object-fit:contain;}
.ui-icon.summary-send-arrow{width:12px;height:12px;flex:0 0 12px;}

img.admin-portrait-image,.admin-choice-portrait img.admin-portrait-image,#dock .dock-admin .dock-admin-face img.admin-portrait-image,#summary-modal .summary-admin img.admin-portrait-image,#line-qr-modal .line-qr-admin img.admin-portrait-image,#admin-invite .admin-invite-portrait img.admin-portrait-image{display:block;width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center;}
.category-nav .category-icon-image{background:transparent;pointer-events:none;}
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
 .ui-icon.is-loaded{background-color:currentColor;-webkit-mask-image:var(--ui-icon-url);mask-image:var(--ui-icon-url);}
 .category-nav .category-icon-image.is-loaded{background-color:currentColor;-webkit-mask-image:var(--category-icon-url);mask-image:var(--category-icon-url);}
 .ui-icon.is-loaded,.category-nav .category-icon-image.is-loaded{-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
 .ui-icon.is-loaded > img,.category-nav .category-icon-image.is-loaded > img{opacity:0;}
}

/* A pinned action sits beside the independently scrolling section links. */
.category-print{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:6px;min-width:70px;min-height:44px;margin-left:4px;padding:0 10px;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-soft);color:var(--theme-ink);font-family:inherit;font-size:13px;font-weight:800;line-height:1.3;white-space:nowrap;cursor:pointer;touch-action:manipulation;}
.category-print > .ui-icon{width:21px;height:21px;flex-basis:21px;}
.category-print:focus-visible{outline:2px solid var(--theme-ink);outline-offset:-3px;}
.category-print:disabled{opacity:.55;cursor:wait;}
@media(max-width:899px){.category-print{flex-basis:44px;width:44px;min-width:44px;max-width:44px;height:44px;padding:0;gap:0;}.category-print-label{display:none;}}
@media(min-width:900px){.category-print{min-width:145px;padding:0 12px;font-size:14px;}}
@media(hover:hover) and (pointer:fine){.category-print:not(:disabled):hover{background:var(--theme-border);}}
.category-nav .category-back-top[hidden]{display:none!important;}

/* Keep complete product identifiers readable in each inquiry surface. */
#products .card-head-copy,#summary-modal .summary-sub,#ask-modal .ask-product-sub{overflow-wrap:anywhere;}
#products .product-sku{font-weight:700;}

/* Province work examples and ordering details share the existing portfolio section. */
.work-gallery .profile-gallery-label{margin:18px 0 16px;color:var(--theme-ink);font-size:clamp(22px,3vw,30px);font-weight:900;line-height:1.45;text-align:center;overflow-wrap:anywhere}
.work-gallery .work-grid{align-items:stretch}
.work-gallery .work-card{display:flex;flex-direction:column;background:#fff}
.work-gallery .work-image{flex:none}
.profile-work-caption{display:flex;min-width:0;flex-direction:column;gap:5px;padding:10px 11px 12px;color:var(--theme-text,var(--text));font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.profile-work-title{font-weight:700}
.profile-work-area{color:var(--muted);font-size:11px}
.profile-gallery-note{margin:12px 0 0;padding:12px 14px;border:1px solid var(--theme-border);border-radius:14px;background:var(--theme-soft);color:var(--theme-text,var(--text));font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.work-gallery-rich .profile-heading{margin:0;text-align:left}
.work-gallery-rich .profile-heading h2{font-weight:900;overflow-wrap:anywhere}
.profile-subheading{overflow-wrap:anywhere}
.profile-introduction{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.profile-info-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.profile-info-card{min-width:0;padding:17px 16px;border:1px solid var(--theme-border);border-radius:18px;background:linear-gradient(180deg,var(--theme-soft),#fff 100%)}
.profile-info-card h3{margin:0 0 7px;color:var(--theme-text,var(--text));font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.profile-info-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.85;overflow-wrap:anywhere}
.profile-faq{margin-top:20px}
.profile-faq > h3{margin:0 0 10px;color:var(--theme-text,var(--text));font-size:18px;line-height:1.6;overflow-wrap:anywhere}
.profile-faq-item{margin-top:9px;border:1px solid var(--theme-border);border-radius:14px;background:#fff;overflow:hidden}
.profile-faq-item summary{padding:14px 15px;color:var(--theme-text,var(--text));font-size:14px;font-weight:750;line-height:1.7;cursor:pointer;overflow-wrap:anywhere}
.profile-faq-item summary::marker{color:var(--theme-ink)}
.profile-faq-item summary:focus-visible{outline:2px solid var(--theme-ink);outline-offset:-4px;border-radius:12px}
.profile-faq-item[open] summary{background:var(--theme-soft)}
.profile-faq-item p{margin:0;padding:13px 15px 16px;color:var(--muted);font-size:13px;line-height:1.85;overflow-wrap:anywhere}
.profile-quote-note{margin:20px 0 0;padding:14px 15px;border-left:3px solid var(--theme-primary);border-radius:0 12px 12px 0;background:var(--theme-soft);color:var(--theme-text,var(--text));font-size:14px;font-weight:600;line-height:1.8;overflow-wrap:anywhere}
.work-gallery-rich .order-contact-pair{margin-top:14px}
.work-gallery-rich .order-contact{min-width:0;padding:12px 10px;gap:8px}
.work-gallery-rich .order-contact-label{min-width:0;overflow-wrap:anywhere}
.profile-phone{margin:14px 0 0;text-align:center}
.profile-phone a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--theme-border);border-radius:12px;color:var(--theme-ink);font-size:17px;font-weight:800;line-height:1.5;text-decoration:none;overflow-wrap:anywhere}
.profile-phone a:focus-visible{outline:2px solid var(--theme-ink);outline-offset:3px}
@media(min-width:640px){.profile-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-work-caption{font-size:13px}.profile-work-area{font-size:12px}.profile-info-card{padding:20px}.profile-info-card p{font-size:14px}.profile-introduction{font-size:15px}.profile-faq-item summary{font-size:15px}.profile-faq-item p{font-size:14px}}
@media(max-width:639px){.work-gallery-rich .order-contact-pair{grid-template-columns:minmax(0,1fr)}.work-gallery-rich .order-contact{justify-content:center;min-height:62px}.work-gallery-rich .order-contact-label{text-align:center}}

/* Local project examples precede a separate nationwide supplement. */
.profile-gallery-group{min-width:0}
.profile-gallery-group+.profile-gallery-group{margin-top:24px;padding-top:20px;border-top:1px solid var(--theme-border)}
.profile-gallery-group-national .profile-gallery-label{color:var(--muted)}

/* Match the portfolio heading inset to the reassurance section. */
@media(max-width:899px){.work-gallery-rich{padding:20px 16px 16px}}
@media(max-width:360px){.work-gallery-rich{padding:18px 12px 12px}}

/* Portfolio photos stay within the existing cards when opened as inquiry links. */
.profile-work-link{display:block;flex:none;line-height:0}
.profile-work-link > .work-image{display:block}
.profile-work-link:focus-visible{outline:3px solid var(--theme-ink);outline-offset:-3px}

/* Portfolio phone action uses the same yellow treatment on every screen. */
.work-gallery-rich .profile-phone{margin:14px 0 0}
.work-gallery-rich .profile-phone a{display:flex;gap:9px;width:100%;max-width:370px;margin-inline:auto;box-sizing:border-box;min-height:52px;padding:10px 12px;border:1px solid #e5d39b;border-radius:16px;background:#fff0bb;color:#614914;font-size:18px;font-weight:400;line-height:1.4}
.work-gallery-rich .profile-phone a strong{font-size:20px;font-weight:900}
.work-gallery-rich .profile-phone-icon{display:block;width:23px;height:23px;flex:0 0 23px}
.work-gallery-rich .profile-phone-label{display:inline}
.work-gallery-rich .profile-phone a:hover{background:#ffe79a;border-color:#d6ba65}
@media(max-width:899px){.work-gallery-rich .profile-phone a{max-width:none}}
@media(max-width:360px){.work-gallery-rich .profile-phone a{font-size:16px}.work-gallery-rich .profile-phone a strong{font-size:19px}}

/* Delivery caption uses the actual photograph's province. */
.work-gallery .profile-work-area{display:block;margin-top:6px;color:#23643b;font-size:14px;font-weight:700;line-height:1.65;overflow-wrap:anywhere}

/* Site-configured symbol and readable portfolio captions. */
.work-gallery .profile-subheading,.work-gallery .work-gallery-intro{font-size:clamp(18px,2vw,22px);font-weight:600;line-height:1.6;color:var(--theme-ink);margin:10px 0 20px}
.work-gallery .profile-work-title{font-size:16px;font-weight:700;line-height:1.75;overflow-wrap:anywhere}
.work-gallery .profile-work-caption{padding:12px 13px 14px}

/* Match the contact signature; compact, separated captions on phones. */
.work-gallery .profile-delivery-brand{margin:10px 0 20px}
.work-gallery .profile-delivery-brand .contact-brand-caption{min-width:0;font-size:var(--header-label-size);overflow-wrap:anywhere}
.work-gallery .profile-delivery-brand .contact-brand-fu{flex:none}
.work-gallery .profile-work-date{display:block;margin-top:3px;color:var(--muted);font-size:13px;font-weight:400;line-height:1.5}
@media(max-width:639px){
 .work-gallery .profile-work-caption{gap:5px;padding:9px 9px 11px}
 .work-gallery .profile-work-title{font-size:13px;font-weight:500;line-height:1.55}
 .work-gallery .profile-work-area{margin-top:2px;font-size:12px;font-weight:600;line-height:1.55}
 .work-gallery .profile-work-date{font-size:12px;margin-top:2px;line-height:1.5}
 .work-gallery .profile-gallery-label{font-size:20px;line-height:1.45;margin:14px 0}
}

/* Clear guidance between the gallery and the area information cards. */
.work-gallery .profile-delivery-brand{margin:0 0 10px}
.work-gallery .profile-note-panel{padding:14px 16px;margin:14px 0;color:var(--text)}
.profile-note-panel strong{display:block;font-size:15px;line-height:1.5;margin-bottom:5px}
.profile-note-panel p{margin:0;font-size:14px;line-height:1.7}
.profile-intro-panel{margin:18px 0;padding:18px;border:1px solid var(--theme-border);border-radius:16px;background:#fff}
.profile-intro-panel h3{margin:0 0 8px;font-size:19px;line-height:1.5;color:var(--theme-ink)}
.profile-intro-panel p{margin:6px 0;font-size:15px;line-height:1.75;color:var(--text)}
@media(max-width:639px){.profile-intro-panel{padding:14px}.profile-intro-panel h3{font-size:17px}.profile-intro-panel p,.profile-note-panel p{font-size:13px;line-height:1.65}}

/* Portfolio hierarchy: identity, centered title, photos, then one reading column. */
.work-gallery #work-gallery-title{margin:16px 0 24px;text-align:center;font-size:clamp(25px,3vw,32px);line-height:1.4;font-weight:900;text-wrap:balance}
.work-gallery .profile-gallery-label{font-size:24px;margin:0 0 18px;line-height:1.5;text-wrap:balance}
.work-gallery .profile-note-panel{max-width:1000px;box-sizing:border-box;margin:18px auto 0;padding:12px 16px;border:0;border-left:3px solid var(--theme-border);border-radius:0;background:transparent;color:var(--muted)}
.work-gallery .profile-note-panel strong{font-size:14px;color:var(--theme-ink)}
.work-gallery .profile-note-panel p{font-size:14px;line-height:1.7}
.work-gallery .profile-intro-panel{max-width:1000px;box-sizing:border-box;margin:30px auto 0;padding:22px 24px;border:1px solid var(--theme-border);border-radius:18px 18px 0 0;background:var(--theme-soft)}
.work-gallery .profile-intro-panel h3{font-size:21px;margin-bottom:10px}
.work-gallery .profile-intro-panel p{font-size:15px;line-height:1.8;margin:4px 0}
.work-gallery .profile-info-grid{max-width:1000px;box-sizing:border-box;margin:0 auto;gap:0;border:1px solid var(--theme-border);border-radius:18px;background:#fff;overflow:hidden;grid-template-columns:repeat(2,minmax(0,1fr))}
.work-gallery .profile-intro-panel + .profile-info-grid{border-top:0;border-radius:0 0 18px 18px}
.work-gallery .profile-info-card{padding:22px 24px;border:0;border-radius:0;background:transparent}
.work-gallery .profile-info-card:nth-child(even){border-left:1px solid var(--theme-border)}
.work-gallery .profile-info-card:nth-child(n+3){border-top:1px solid var(--theme-border)}
.work-gallery .profile-info-card h3{font-size:17px;line-height:1.55;margin-bottom:9px;color:var(--theme-ink)}
.work-gallery .profile-info-card p{font-size:15px;line-height:1.85;color:var(--text)}
.work-gallery .profile-faq{max-width:1000px;margin:30px auto 0}
.work-gallery .profile-faq > h3{font-size:21px;margin-bottom:14px}
.work-gallery .profile-faq-item p{color:var(--text);line-height:1.8}
.work-gallery .profile-quote-note{max-width:1000px;box-sizing:border-box;margin:24px auto 0}
.work-gallery-rich .order-contact-pair{max-width:1000px;margin:16px auto 0}
@media(max-width:639px){
 .work-gallery #work-gallery-title{font-size:24px;margin:14px 0 20px;line-height:1.45}
 .work-gallery .profile-gallery-label{font-size:18px;margin-bottom:14px}
 .work-gallery .profile-note-panel{margin-top:14px;padding:8px 12px}
 .work-gallery .profile-note-panel strong{font-size:13px}
 .work-gallery .profile-note-panel p{font-size:13px;line-height:1.65}
 .work-gallery .profile-intro-panel{margin-top:22px;padding:16px}
 .work-gallery .profile-intro-panel h3{font-size:18px}
 .work-gallery .profile-intro-panel p{font-size:14px;line-height:1.7}
 .work-gallery .profile-info-grid{grid-template-columns:minmax(0,1fr)}
 .work-gallery .profile-info-card{padding:17px 16px}
 .work-gallery .profile-info-card:nth-child(even){border-left:0}
 .work-gallery .profile-info-card + .profile-info-card{border-top:1px solid var(--theme-border)}
 .work-gallery .profile-info-card h3{font-size:16px;margin-bottom:7px}
 .work-gallery .profile-info-card p{font-size:14px;line-height:1.75}
 .work-gallery .profile-faq{margin-top:24px}
 .work-gallery .profile-faq > h3{font-size:18px}
}

/* A single portfolio heading with a quieter delivery-area caption. */
.work-gallery #work-gallery-title{margin:22px auto 12px;max-width:900px;font-size:32px;line-height:1.45;letter-spacing:0;font-weight:900;text-align:center;text-wrap:balance}
.work-gallery .profile-gallery-label{box-sizing:border-box;width:fit-content;max-width:100%;margin:0 auto 24px;padding:7px 18px;border-radius:14px;background:var(--theme-soft);color:var(--theme-ink);font-size:20px;font-weight:600;line-height:1.6;text-align:center;text-wrap:balance}
.work-gallery .profile-heading{padding-bottom:12px}
.work-gallery .profile-heading:has(+ .profile-gallery-group .profile-gallery-label){padding-bottom:0}
.work-gallery .profile-gallery-group + .profile-gallery-group .profile-gallery-label{margin-top:4px}
@media(max-width:639px){
 .work-gallery #work-gallery-title{font-size:25px;margin:18px auto 10px;line-height:1.4}
 .work-gallery .profile-gallery-label{font-size:16px;padding:7px 12px;line-height:1.55;margin-bottom:18px;border-radius:12px}
}

/* Shared line icons mark the five portfolio information headings. */
.work-gallery .profile-icon-heading{display:flex;align-items:center;gap:11px}
.work-gallery .profile-heading-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--theme-soft);color:var(--theme-ink);border:1px solid var(--theme-border)}
.work-gallery .profile-heading-icon .ui-icon{width:24px;height:24px;flex:none}
.work-gallery .profile-icon-heading > span:last-child{min-width:0;overflow-wrap:anywhere}
.work-gallery .profile-intro-panel .profile-heading-icon{background:#fff}
@media(max-width:639px){.work-gallery .profile-icon-heading{gap:9px}.work-gallery .profile-heading-icon{flex-basis:34px;width:34px;height:34px;border-radius:10px}.work-gallery .profile-heading-icon .ui-icon{width:21px;height:21px}}

/* Five short FAQs: one initially open, the rest available on demand. */
.work-gallery .profile-faq-item{margin-top:10px;border-radius:14px}
.work-gallery .profile-faq-item summary{font-size:16px;padding:16px 18px;line-height:1.6}
.work-gallery .profile-faq-item p{font-size:15px;padding:14px 18px 18px;line-height:1.75}
.work-gallery .profile-quote-note{text-align:center;border:0;background:transparent;padding:12px 0 0;font-weight:600}
@media(max-width:639px){.work-gallery .profile-faq-item summary{font-size:14px;padding:13px 14px}.work-gallery .profile-faq-item p{font-size:13px;padding:12px 14px 15px}.work-gallery .profile-quote-note{font-size:14px;line-height:1.7}}

/* Compact mobile portfolio contacts: aligned icon and readable two-line copy. */
@media(max-width:639px){
 .work-gallery-rich .profile-quote-note{margin-top:18px;padding-top:0;font-size:13px;line-height:1.6}
 .work-gallery-rich .order-contact-pair{margin-top:12px;gap:9px}
 .work-gallery-rich .order-contact{justify-content:flex-start;gap:12px;min-height:70px;padding:12px 14px;border-radius:16px;box-sizing:border-box}
 .work-gallery-rich .order-contact-logo{width:36px;height:36px;flex:0 0 36px}
 .work-gallery-rich .order-contact-label{flex:1;min-width:0;text-align:left;font-size:17px;font-weight:800;line-height:1.45}
 .work-gallery-rich .order-contact-channel{display:block;font-size:13px;font-weight:500;line-height:1.5;margin-top:4px}
 .work-gallery-rich .profile-phone{margin-top:10px}
}

/* Trust: consistent semantic SVG icons and readable mobile rows. */
#section-confidence .trust-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;color:var(--theme-primary);background:var(--theme-soft);border-color:var(--theme-border)}
#section-confidence .trust-icon .ui-icon{width:24px;height:24px;display:inline-block;flex:none}
#section-confidence .trust-icon img{width:24px;height:24px}
#section-confidence .trust-card>div{min-width:0}
@media(max-width:639px){
  #section-confidence .trust-list{grid-template-columns:minmax(0,1fr);gap:10px}
  #section-confidence .trust-card{padding:14px;gap:12px;align-items:flex-start}
  #section-confidence .trust-card h3{font-size:16px;line-height:1.5;margin:0 0 5px}
  #section-confidence .trust-card p{font-size:14px;line-height:1.65}
}