/* Compact kit builder. Illustrations are drawn in CSS; no photo downloads. */
.m365-kit{margin-top:28px;min-width:0;display:flex;flex-direction:column;flex:1;container-type:inline-size}
.m365-kit h3{font-size:24px;line-height:1.2;margin:0 0 12px;letter-spacing:-.035em}
.m365-kit-workbench{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:center;flex:1}
.m365-kit-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.m365-kit-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:78px;padding:8px 5px;background:#f3f3f3;color:var(--m365-ink);border:0;line-height:1.4;font-size:12px;font-weight:650;transition:background .2s,transform .2s}
.m365-kit-item:hover{transform:translateY(-2px);background:#e9e9e9}
.m365-kit-item[aria-pressed=true]{background:#ffe6f0}
.m365-kit .m365-kit-item:focus-visible{background:#e0e0e0;color:var(--m365-ink);text-decoration:underline;text-underline-offset:3px}
.m365-kit .m365-kit-item[aria-pressed=true]:focus-visible{background:#ffcee2}
.m365-kit-toggle{position:absolute;right:7px;top:4px;color:#696969;font:500 16px/1.2 Arial,sans-serif}
.m365-kit-item[aria-pressed=true] .m365-kit-toggle{color:#9d1047}
.m365-kit-mini{height:43px;width:60px;display:flex;justify-content:center;align-items:center;transform:scale(.84)}
.m365-kit-count{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#616161;font-size:11px;line-height:1.4}
.m365-kit-count strong{color:var(--m365-ink);font-size:27px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.m365-kit-summary{color:var(--m365-muted);font-size:13px;line-height:1.5;margin:10px 0 12px;min-height:20px;overflow-wrap:anywhere}
.m365-kit-use{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;width:100%;padding:13px 18px;border:0;background:var(--m365-ink);color:#fff;text-align:left;font-weight:600;font-size:14px;line-height:1.5}
.m365-kit-use:hover{background:#333}
.m365-kit-arrow{font:500 21px/1 Arial,sans-serif}
.m365-kit button:disabled{opacity:.55;cursor:default;transform:none}
.m365-kit-feedback{font-size:12px;line-height:1.5;margin:9px 0 0;color:var(--m365-muted)}
.m365-kit-feedback:empty{display:none}
@media(max-width:1199px){.m365-kit{flex:none;max-width:640px;width:100%}.m365-kit-workbench{flex:none;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
@media(max-width:767px){.m365-kit{margin-top:24px}}
@container(max-width:380px){.m365-kit-workbench{grid-template-columns:1fr;gap:14px}.m365-kit .m365-kit-stage{grid-row:1;max-width:235px}.m365-kit-options{grid-template-columns:repeat(3,minmax(0,1fr))}.m365-kit-item{min-height:78px}.m365-kit h3{font-size:23px}}
@media(max-width:428px){.m365-kit-workbench{grid-template-columns:1fr;gap:14px}.m365-kit .m365-kit-stage{grid-row:1;max-width:235px}.m365-kit-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Product and packaging illustrations. */
    .m365-kit-stage { position:relative; width:100%; aspect-ratio:1 / 1.04;max-width:280px;justify-self:center; isolation:isolate; }
    .m365-kit-shadow { position:absolute; left:12%; right:8%; bottom:1%; height:11%; border-radius:50%; background:radial-gradient(ellipse,#00000023,transparent 70%); filter:blur(5px); }
    .m365-kit-lid { position:absolute; width:78%; height:39%; left:12%; top:2%; background:linear-gradient(135deg,#343434,#1b1b1b); clip-path:polygon(10% 0,94% 9%,100% 100%,0 85%); transform:rotate(-7deg); }
    .m365-kit-lid::before { content:""; position:absolute; inset:5% 6% 9% 8%; background:linear-gradient(130deg,#222,#3d3d3d); clip-path:polygon(9% 0,95% 9%,100% 100%,0 84%); }
    .m365-kit-lid::after { content:""; position:absolute; left:73%; top:4%; height:94%; width:11%; background:linear-gradient(var(--m365-pink),var(--m365-orange)); transform:rotate(-4deg); }
    .m365-kit-inside { position:absolute; left:4%; top:57%; width:92%; height:28%; background:linear-gradient(145deg,#151515,#383838); clip-path:polygon(12% 0,88% 0,100% 57%,88% 100%,10% 100%,0 57%); }
    .m365-kit-tissue { position:absolute; left:8%; top:59%; width:83%; height:22%; background:#f0e8e5; clip-path:polygon(0 19%,14% 0,31% 20%,44% 4%,58% 21%,82% 0,100% 38%,85% 100%,5% 89%); }
    .m365-kit-packed { position:absolute; inset:0; }
    .m365-kit-packed-item { position:absolute; display:flex; align-items:flex-end; justify-content:center; transform-origin:50% 100%; filter:drop-shadow(3px 5px 3px #00000024); }
    .m365-kit-packed-item:is([data-product="hoodie"],[data-product-art="hoodie"]) { left:6%; top:29%; width:44%; height:44%; transform:rotate(-9deg); z-index:1; }
    .m365-kit-packed-item:is([data-product="tote"],[data-product-art="tote"]) { left:53%; top:29%; width:40%; height:43%; transform:rotate(9deg); z-index:2; }
    .m365-kit-packed-item:is([data-product="notebook"],[data-product-art="notebook"]) { left:34%; top:42%; width:30%; height:34%; transform:rotate(4deg); z-index:3; }
    .m365-kit-packed-item:is([data-product="bottle"],[data-product-art="bottle"]) { left:24%; top:36%; width:16%; height:40%; transform:rotate(-5deg); z-index:4; }
    .m365-kit-packed-item:is([data-product="cap"],[data-product-art="cap"]) { left:52%; top:58%; width:38%; height:19%; transform:rotate(6deg); z-index:5; }
    .m365-kit-box-front { position:absolute; left:4%; top:72%; width:92%; height:23%; z-index:8; background:linear-gradient(115deg,#262626,#111); clip-path:polygon(0 0,100% 0,89% 100%,11% 100%); }
    .m365-kit-box-front::after { content:""; position:absolute; left:70%; top:0; width:9%; height:100%; background:linear-gradient(var(--m365-pink),var(--m365-orange)); transform:skewX(-9deg); }
    .m365-kit-front-label { position:absolute; left:16%; top:79%; z-index:9; color:#fff; font-size:13px; font-weight:600; letter-spacing:.1px; }
    .m365-kit-empty { position:absolute; left:10%; right:10%; top:45%; text-align:center; color:#595959; font-size:13px; }
    .m365-kit-art { display:block; position:relative; flex:none; }
    .m365-kit-art-hoodie { width:100%; height:100%; }
    .m365-kit-art-hoodie::before { content:""; position:absolute; inset:0; background:linear-gradient(105deg,#494949,#171717 60%,#333); clip-path:polygon(36% 0,64% 0,70% 16%,87% 24%,100% 61%,84% 69%,75% 44%,77% 100%,24% 100%,26% 45%,15% 70%,0 61%,13% 24%,30% 16%); }
    .m365-kit-art-hoodie::after { content:""; position:absolute; width:25%; height:7%; left:47%; top:35%; background:linear-gradient(90deg,var(--m365-pink),var(--m365-orange)); transform:rotate(-2deg); }
    .m365-kit-hood { position:absolute; width:26%; height:20%; left:37%; top:3%; background:#111; border-radius:45% 45% 50% 50%; }
    .m365-kit-pocket { position:absolute; width:40%; height:20%; left:31%; top:68%; background:#ffffff09; clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); }
    .m365-kit-art-bottle { width:74%; height:90%; border-radius:16% 16% 12% 12% / 8% 8% 5% 5%; background:linear-gradient(90deg,#171717,#505050 28%,#222 75%); }
    .m365-kit-art-bottle::before { content:""; position:absolute; width:66%; height:11%; top:-9%; left:17%; background:linear-gradient(90deg,#262626,#565656,#161616); border-radius:20% 20% 0 0; }
    .m365-kit-art-bottle::after { content:""; position:absolute; left:0; right:0; top:49%; height:12%; background:linear-gradient(90deg,#df246e,#fa4683 45%,var(--m365-orange)); }
    .m365-kit-art-notebook { width:86%; height:100%; border-radius:2px 5px 5px 2px; background:linear-gradient(90deg,#292929 0 6%,#454545 7%,#282828 11%,#353535 100%); box-shadow:3px 2px 0 #e1d8cb; }
    .m365-kit-art-notebook::before { content:""; position:absolute; top:0; bottom:0; width:5%; right:14%; background:var(--m365-pink); }
    .m365-kit-art-notebook::after { content:""; position:absolute; height:8%; width:29%; left:24%; top:34%; background:linear-gradient(90deg,var(--m365-pink),var(--m365-orange)); }
    .m365-kit-art-cap { width:90%; height:88%; border-radius:60% 60% 9% 9%; background:linear-gradient(105deg,#4a4a4a,#1c1c1c); }
    .m365-kit-art-cap::before { content:""; position:absolute; left:8%; right:-13%; bottom:-8%; height:29%; border-radius:6% 90% 25% 35%; background:linear-gradient(90deg,#353535,#151515); transform:rotate(3deg); }
    .m365-kit-art-cap::after { content:""; position:absolute; left:43%; top:39%; width:27%; height:13%; background:linear-gradient(90deg,var(--m365-pink),var(--m365-orange)); }
    .m365-kit-art-tote { width:87%; height:77%; background:linear-gradient(95deg,#dbceba,#f4ecdd 40%,#d9ccb7); clip-path:polygon(0 0,100% 0,93% 100%,6% 100%); }
    .m365-kit-tote-wrap { width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center; position:relative; }
    .m365-kit-tote-wrap::before { content:""; position:absolute; top:0; left:30%; width:40%; height:42%; border:5px solid #dacbb5; border-bottom:0; border-radius:50% 50% 0 0; box-sizing:border-box; }
    .m365-kit-art-tote::after { content:""; position:absolute; width:37%; height:11%; left:32%; top:43%; background:linear-gradient(90deg,var(--m365-pink),var(--m365-orange)); transform:rotate(-3deg); }
    .m365-kit-mini .m365-kit-art-hoodie { width:48px; height:49px; }
    .m365-kit-mini .m365-kit-art-bottle { width:18px; height:43px; margin-top:5px; }
    .m365-kit-mini .m365-kit-art-notebook { width:32px; height:43px; transform:rotate(-6deg); }
    .m365-kit-mini .m365-kit-art-cap { width:43px; height:27px; transform:rotate(-6deg); }
    .m365-kit-mini .m365-kit-tote-wrap { width:40px; height:48px; }
    .m365-kit-mini .m365-kit-tote-wrap::before { border-width:3px; }

/* Mobile order and spacing follow the visible box, not its transparent bounds. */
@media(max-width:767px){
 .m365-kit h3{margin-bottom:16px}
 .m365-kit-workbench{grid-template-columns:1fr;gap:20px;flex:none}
 .m365-kit-options{grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr))}
 .m365-kit .m365-kit-stage{grid-row:2;max-width:235px;margin-block:-4px -12px}
 .m365-kit-summary{margin:12px 0}
 .m365-kit-feedback{margin-top:8px}
}