/* ---------- Design tokens: change these to re-theme the whole site ---------- */ :root{ --ink:#1e2320; --muted:#6b736e; --line:#e6e2da; --bg:#ffffff; --soft:#f6f3ee; --accent:#2f5d50; --accent-ink:#ffffff; --sale:#c0392b; --ok:#2e7d4f; --warn:#b7791f; --bad:#c0392b; --radius:10px; --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-heading:inherit; --btn-radius:8px; /* only the storefront's own ever overrides these two -- see website.theme_head_html() -- so Admin -> Website -> Theme never changes how the admin panel or POS look. */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{font-family:var(--font-heading,inherit)} h1{font-size:1.7rem;margin:.6em 0 .4em} h2{font-size:1.3rem;margin:0} h3{margin:0 0 .6em;font-size:1.05rem} img{max-width:100%;display:block} .wrap{max-width:1200px;margin:0 auto;padding:0 20px} .narrow{max-width:640px;margin:24px auto} .muted{color:var(--muted);font-size:.9em} .r{text-align:right} .hidden{display:none!important} .right{margin-left:auto} .grow{flex:1} .empty{color:var(--muted);padding:24px 0;text-align:center} /* ---------- Form controls ---------- */ input,select,textarea,button{font:inherit;color:inherit} input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;padding:9px 11px;border:1px solid #cfcac0;border-radius:8px;background:#fff} input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent)} label{display:block;font-size:.88rem;color:#444;font-weight:500} label input,label select,label textarea{margin-top:4px;font-weight:400} label.radio{display:flex;gap:8px;align-items:center;font-weight:400;font-size:.95rem;margin:4px 0} label.radio input{width:auto;margin:0} fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0} legend{font-weight:600;padding:0 6px} .stack{display:flex;flex-direction:column;gap:12px} .two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);padding:10px 18px;border-radius:var(--btn-radius,8px);cursor:pointer;font-weight:600;text-align:center;text-decoration:none} .btn:hover{filter:brightness(1.08);text-decoration:none} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.ghost{background:transparent;color:var(--accent)} .btn.danger{background:#fff;color:var(--bad);border-color:var(--bad)} .btn.block{display:block;width:100%} .btn.sm{padding:5px 10px;font-size:.85rem} .btn.lg{padding:14px 26px;font-size:1.1rem} .link{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;text-decoration:underline;font-size:.9rem} .flash{padding:10px 14px;border-radius:8px;margin:12px 0;background:var(--soft);border:1px solid var(--line)} .flash.ok{background:#e9f6ee;border-color:#bfe3cd} .flash.error{background:#fdecea;border-color:#f3b9b3;color:#8a1f14} .pill{display:inline-block;padding:1px 9px;border-radius:99px;background:var(--soft);font-size:.82rem;font-weight:600;border:1px solid var(--line)} .pill.bad{background:#fdecea;color:var(--bad);border-color:#f3b9b3} .pill.warn{background:#fff4dc;color:var(--warn);border-color:#f1d9a2} .pill.ok{background:#e9f6ee;color:var(--ok);border-color:#bfe3cd} .pill.pre{background:#eaf1fb;color:#2b5aa0;border-color:#c5d7f0} .pill.s-pending{background:#fff4dc;color:var(--warn)} .pill.s-ready{background:#fff0d9;color:#a25b00;border-color:#f1d9a2} .pill.s-paid,.pill.s-fulfilled{background:#eaf1fb;color:#2b5aa0} .pill.s-completed{background:#e9f6ee;color:var(--ok)} .pill.s-cancelled{background:#eee;color:#777;text-decoration:line-through} table.tbl{width:100%;border-collapse:collapse} .tbl th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)} .tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl.sm td{padding:6px 8px} .tbl tr.total td{border-top:2px solid var(--ink);font-size:1.05em} .tbl tr.lowrow{background:#fffaf0} .tbl td.thumb{width:64px} .ext-branch-tbl{margin:6px 0 4px;max-width:520px} .ext-was{text-decoration:line-through} .ext-promo{margin:2px 0 4px;font-weight:600;color:var(--ok)} .scroll{overflow-x:auto} /* ---------- Storefront ---------- */ .announce{background:var(--accent);color:var(--accent-ink);text-align:center;padding:7px 12px;font-size:.85rem} .utilitybar{background:#1e2320;color:#cfd3d0;font-size:.8rem} .utilitybar .wrap{display:flex;gap:22px;padding:6px 20px} .utilitybar a{color:#cfd3d0} .utilitybar a:hover{color:#fff} @media (max-width:640px){.utilitybar .wrap{gap:14px;overflow-x:auto;white-space:nowrap}} .site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20} .header-row{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px} .logo{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .logo:hover{text-decoration:none} .logo img{display:block;width:auto;max-width:260px;object-fit:contain} .search{flex:1;display:flex;max-width:560px} .search input{border-radius:8px 0 0 8px;border-right:0} .search button{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:0 16px;border-radius:0 8px 8px 0;cursor:pointer} .header-actions{display:flex;gap:18px;margin-left:auto;font-weight:600} .header-actions a{color:var(--ink)} .badge{background:var(--accent);color:#fff;border-radius:99px;padding:0 7px;font-size:.78rem} .mobilenav-toggle{display:none;background:none;border:0;font-size:1.4rem;line-height:1;padding:6px 4px;margin-right:2px;cursor:pointer;color:var(--ink)} .catbar{background:var(--soft);border-top:1px solid var(--line)} .catbar .wrap{display:flex;gap:26px;align-items:center;font-size:.92rem;font-weight:600;flex-wrap:wrap} .catbar a,.catbar summary{color:var(--ink);padding:10px 0;cursor:pointer;list-style:none} .catbar summary::-webkit-details-marker{display:none} .allcats summary::after{content:" ▾"} .allcats{position:relative} .catmenu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:240px;padding:8px;display:flex;flex-direction:column;z-index:30} .catmenu a{padding:8px 12px;border-radius:6px;font-weight:500} .catmenu a:hover{background:var(--soft);text-decoration:none} main.wrap{padding-top:16px;padding-bottom:48px;min-height:60vh} .hero{background:linear-gradient(120deg,var(--soft),#e4ece7);border-radius:16px;padding:56px 40px;margin:8px 0 24px} .hero h1{font-size:2.3rem;margin:0 0 10px;max-width:16em} .hero p{color:#444;margin:0 0 20px} .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-bottom:36px} .tiles a{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:22px 12px;text-align:center;font-weight:600;color:var(--ink)} .tiles a:hover{border-color:var(--accent);text-decoration:none} .sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 14px;flex-wrap:wrap} .sec-head h1,.sec-head h2{margin:0} .sec-head small{color:var(--muted);font-weight:400} .filters{display:flex;gap:14px;align-items:center} .filters select{width:auto} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px} .pcard{color:var(--ink);display:block} .pcard:hover{text-decoration:none} .pcard:hover .pname{text-decoration:underline} .pimg{position:relative;aspect-ratio:1/1;background:var(--soft);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center} .pimg img{width:100%;height:100%;object-fit:cover} .ph{display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;color:color-mix(in srgb,var(--accent) 45%,#fff);width:100%;height:100%;background:linear-gradient(135deg,var(--soft),#e8efe9)} .ph.sm{font-size:1.2rem;width:48px;height:48px;border-radius:8px} .ph.big{font-size:7rem;aspect-ratio:1/1;border-radius:var(--radius)} .tag{position:absolute;top:10px;left:10px;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:700;color:#fff} .tag.sale{background:var(--sale)} .tag.pre{background:#2b5aa0} .tag.out{background:#555} .pname{margin-top:10px;font-weight:600} .pprice{color:#333} .pprice s{color:var(--muted);margin-left:6px} .pprice small{color:var(--muted)} .crumbs{color:var(--muted);font-size:.88rem;margin:6px 0} .crumbs a{color:var(--muted)} .pager{display:flex;gap:6px;justify-content:center;margin-top:28px} .pager a{padding:6px 12px;border:1px solid var(--line);border-radius:6px;color:var(--ink)} .pager a.on{background:var(--accent);color:#fff;border-color:var(--accent)} .pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:12px} .pdp-media{min-width:0} .pdp-img{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--soft);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .pdp-img img{width:100%;height:100%;object-fit:contain} .price.big{font-size:1.7rem;font-weight:700;margin:6px 0} .price s{color:var(--muted);font-size:.7em;font-weight:400} .stock{font-size:.88rem;font-weight:600;margin-bottom:12px} .stock.ok{color:var(--ok)} .stock.pre{color:#2b5aa0} .stock.out{color:var(--bad)} .lbl{margin-top:8px} .opts{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px} .opt{position:relative;margin:0} .opt input{position:absolute;opacity:0} .opt span{display:block;padding:8px 16px;border:1px solid #cfcac0;border-radius:8px;cursor:pointer;font-weight:500;color:var(--ink)} .opt input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,#fff);box-shadow:0 0 0 1px var(--accent)} .opt.soldout span{opacity:.4;text-decoration:line-through;cursor:not-allowed} .buyrow{display:flex;gap:10px;margin:14px 0} input.qty{width:76px!important;text-align:center} .desc{margin:20px 0;color:#333} .cart-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start} .summary{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:130px} .summary .row{display:flex;justify-content:space-between;gap:12px;margin:8px 0;font-size:.95rem} .summary .row.total{font-size:1.15rem;border-top:1px solid var(--line);padding-top:10px} .note{color:var(--warn);font-size:.88rem} .note.ok{color:var(--ok)} .cart-tbl img{width:64px;height:64px;object-fit:cover;border-radius:8px} .authbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px} .prose h3{margin-top:1.4em} .storecard{background:var(--soft);border-radius:var(--radius);padding:20px} .site-footer{background:var(--soft);border-top:1px solid var(--line);padding:32px 0 12px;margin-top:40px} .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;font-size:.9rem} .footer-grid h4{margin:0 0 8px} .footer-grid a{display:block;color:var(--ink);padding:2px 0} .footer-grid p{margin:0 0 10px} .fine{color:var(--muted);font-size:.8rem;padding-top:18px} /* ---------- Admin ---------- */ body.admin{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:#f7f6f3} body.admin.plain{display:block} .side{background:#1e2320;color:#dfe5e1;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .brand{font-weight:800;font-size:1.2rem;margin:4px 8px 18px;color:#fff} .brand small{font-weight:400;opacity:.6;font-size:.75rem;margin-left:4px} .side nav{display:flex;flex-direction:column;gap:2px} .side nav a{color:#cfd6d1;padding:9px 12px;border-radius:8px;font-weight:500} .side nav a:hover{background:#2c332f;text-decoration:none} .side nav a.on{background:var(--accent);color:#fff} .side hr{border:0;border-top:1px solid #333b36;margin:10px 0;width:100%} .side-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:8px;font-size:.85rem;color:#aab3ad} .side-foot .link{color:#cfe4da} .content{padding:26px 34px 60px;min-width:0} .content h1{margin-top:0} .panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px} .panel h3 .more,.panel h3 .legend{float:right;font-size:.8rem;font-weight:400} .wide{max-width:980px} .cols{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px} .kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;color:var(--ink)} .kpi:hover{text-decoration:none} .kpi span{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em} .kpi strong{font-size:1.5rem;margin:2px 0} .kpi small{color:var(--muted)} .kpi.bad-k strong{color:var(--bad)} .kpi.warn-k strong{color:var(--warn)} .bars{display:flex;align-items:flex-end;gap:6px;height:190px;padding-top:10px} .bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;font-size:.65rem;color:var(--muted)} .stackbar{flex:1;width:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start} .seg.web{background:var(--accent)} .seg.pos{background:#d9a441} .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px} .sw.web{background:var(--accent)} .sw.pos{background:#d9a441} .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap} .toolbar input:not([type=checkbox]),.toolbar select{width:auto;min-width:200px} .toolbar label{display:flex;align-items:center;gap:6px} .rowform{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap} .rowform input,.rowform select{flex:1;min-width:110px;width:auto} .rowform .num{flex:0 0 80px;min-width:70px} .cat-imgfield{flex:0 0 auto;display:flex;gap:6px;align-items:center} .cat-imgfield input[type=file]{flex:0 0 auto;width:150px;min-width:0;padding:4px} .cat-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;flex:0 0 auto} .vt input,.vt select{min-width:90px;padding:6px 8px} .vt input.num{min-width:70px;width:80px} .stockcell{font-size:.82rem;white-space:nowrap} .curimg{display:flex;gap:14px;align-items:center} .curimg img{width:90px;border-radius:8px} .checks{padding-top:20px} dialog{border:0;border-radius:14px;padding:22px 26px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(560px,94vw)} dialog::backdrop{background:rgba(0,0,0,.45)} body.loginpage{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--soft)} .logincard{background:#fff;padding:32px;border-radius:14px;width:min(380px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.08)} .logincard h1{margin:0} /* ---------- POS ---------- */ body.pos{background:#eef0ee;height:100vh;display:flex;flex-direction:column;overflow:hidden} .pos-top{background:#1e2320;color:#fff;display:flex;gap:14px;align-items:center;padding:8px 16px} .pos-top a,.pos-top .link{color:#cfe4da} .pos-top select{width:auto;padding:5px 8px;color:var(--ink)} .pos-top form{display:flex;gap:8px;align-items:center} .pos-body{flex:1;display:grid;grid-template-columns:1fr 420px;min-height:0} .pos-left{padding:14px;display:flex;flex-direction:column;min-height:0} .pos-search{display:flex;gap:8px} .pos-search input{font-size:1.15rem;padding:14px} .posmsg{min-height:26px;padding:4px 2px;font-weight:600} .posmsg.bad{color:var(--bad)} .posmsg.ok{color:var(--ok)} .pos-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;align-content:start;padding-bottom:20px} .tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:104px} .tile:hover{border-color:var(--accent)} .tile:active{transform:scale(.98)} .tile .tn{font-weight:600;line-height:1.25;flex:1} .tile .tp{color:var(--accent);font-weight:700;font-size:1.05rem} .tile .ts{font-size:.78rem;color:var(--muted)} .tile.oos{opacity:.5} .tile .ext-link{align-self:flex-start;font-size:.74rem;color:#2b5a8a;background:#eef6fd;border:1px solid #a9c8e3;border-radius:8px;padding:2px 6px;margin-top:2px} .tile .ext-link:hover{border-color:var(--accent);color:var(--accent)} .pos-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-bottom:20px} .plr{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;text-align:left} .plr:hover{border-color:var(--accent)} .plr:active{transform:scale(.995)} .plr-img{width:48px;height:48px;object-fit:cover;border-radius:8px;background:var(--soft);flex:0 0 auto} .plr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .plr-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .plr-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .plr-price{color:var(--accent);font-weight:700;flex:0 0 auto;white-space:nowrap} .plr-sub{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:var(--muted)} .plr-assembly{color:#8a5a00} .plr-stock{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.78rem;color:var(--muted)} .plr-stock .loc.oos{color:var(--bad)} .plr-stock .loc.here{color:var(--ink);font-weight:600} .plr-info{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1rem;line-height:1;color:var(--muted)} .plr-info:hover{border-color:var(--accent);color:var(--accent)} .pos-right{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .cust{padding:10px 14px;border-bottom:1px solid var(--line)} .cust #cust-box{display:flex;gap:6px} #cust-chip{display:flex;justify-content:space-between;align-items:center;background:#e9f6ee;padding:6px 10px;border-radius:8px} .pos-cart{flex:1;overflow-y:auto;padding:6px 14px} .line{display:grid;grid-template-columns:1fr auto 100px auto 18px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)} .line .ln small{display:block;color:var(--muted)} .line .lt{text-align:right;font-weight:600} .line .ln small s{color:var(--muted);margin-right:4px;text-decoration:line-through} .qtyctl{display:flex;align-items:center;gap:8px} .qtyctl button{width:34px;height:34px;border-radius:8px;border:1px solid #cfcac0;background:#fff;font-size:1.1rem;cursor:pointer} .qtyctl span{min-width:22px;text-align:center;font-weight:700} .pos-totals{border-top:2px solid var(--ink);padding:12px 16px;background:var(--soft)} .pos-totals .row{display:flex;justify-content:space-between;align-items:center;margin:6px 0} .pos-totals .row.total{font-size:1.5rem} .pos-totals .disc input{width:80px;display:inline-block;padding:4px 6px} .pos-totals .disc select{width:auto;display:inline-block;padding:4px} .pos-totals .actions{margin-top:10px} .pos-totals .actions .lg{flex:1} .paytotal{font-size:2.4rem;font-weight:800;text-align:center;margin:6px 0 14px} .paymethods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px} .paymethods label{margin:0} .paymethods input{position:absolute;opacity:0} .paymethods span{display:block;text-align:center;padding:14px 6px;border:2px solid #cfcac0;border-radius:10px;cursor:pointer;font-weight:600;color:var(--ink)} .paymethods input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,#fff)} .quick{display:flex;gap:6px;margin:8px 0} .quick button{flex:1;padding:10px;border:1px solid #cfcac0;background:#fff;border-radius:8px;cursor:pointer;font-weight:600} .change{font-size:1.2rem;margin:8px 0 12px} .till-pill{background:#33403a;color:#cfe4da;font-size:.82rem} .pos-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 0 2px} .tile-btn{border-radius:var(--radius);padding:8px;font-weight:600;font-size:.88rem;cursor:pointer;border:1px solid #cfcac0;background:#fff; aspect-ratio:2/1;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;overflow:hidden} .tile-btn:hover{border-color:var(--accent)} .tile-btn:active{transform:scale(.97)} .tile-btn.disc{color:#8a5a00;border-color:#e3c07a;background:#fff8ea} .tile-btn.fee{color:#2b5a8a;border-color:#a9c8e3;background:#eef6fd} .tile-btn.prod{color:#2f6a3f;border-color:#a3d3af;background:#eef9f1} .tile-btn.cat{color:#6a3f8a;border-color:#c9a3d3;background:#f6eef9} .tile-btn.add{background:transparent;border-style:dashed;color:var(--muted)} .tile-btn.add:hover{color:var(--accent);border-color:var(--accent)} #tiles-list .rowform{border-bottom:1px solid var(--line);padding-bottom:8px} #tiles-list .rowform:last-child{border-bottom:0} .chosen-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .chosen-pills .pill{display:inline-flex;align-items:center;gap:5px} .chosen-pills .pillx{border:0;background:transparent;color:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:0} .line.fee-line .ln strong::after{content:" (fee)";font-weight:400;color:var(--muted);font-size:.82em} /* ---------- Responsive ---------- */ @media (max-width:860px){ .header-row{flex-wrap:wrap;gap:10px} .search{order:3;flex:1 1 100%;max-width:none} .pdp,.cart-layout,.cols,.shop-layout{grid-template-columns:1fr} .summary{position:static} .cat-side{position:static} .footer-grid{grid-template-columns:1fr 1fr} .hero{padding:32px 22px} .hero h1{font-size:1.7rem} .two,.three{grid-template-columns:1fr} body.admin{grid-template-columns:1fr} .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px} .side nav{flex-direction:row;flex-wrap:wrap} .side hr{display:none} .side-foot{margin:0} .content{padding:18px 14px} .pos-body{grid-template-columns:1fr;grid-template-rows:1fr 1fr} body.pos{overflow:auto} .catbar .wrap{gap:16px} } dialog .actions{margin-top:14px} /* ---------- Products hover menu ---------- */ .navitem{position:relative} .navitem .navlink{display:block;padding:10px 0;color:var(--ink)} .caret{font-size:.75em} .mega{display:none;position:absolute;left:0;top:100%;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.14)} .navitem:hover .mega,.navitem:focus-within .mega{display:block} .navitem:hover .navlink,.navitem:focus-within .navlink{color:var(--accent)} .cathead{display:flex;align-items:center;gap:8px} .hamb{font-size:.95em} /* mega-menu: a sidebar list of top-level categories; hovering one opens a panel to its right with its sub-categories as bold column headers and their own children listed underneath each header */ .mega-list{list-style:none;margin:0;padding:8px;width:250px} .mega-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;color:var(--ink);font-weight:600;font-size:.92rem} .mega-row:hover,li:hover>.mega-row,li:focus-within>.mega-row,li.open>.mega-row{background:var(--soft);text-decoration:none} .cicon{width:26px;height:26px;border-radius:6px;overflow:hidden;flex:0 0 auto;background:var(--soft);display:flex;align-items:center;justify-content:center} .cicon img{width:100%;height:100%;object-fit:cover;display:block} .mega-chev{margin-left:auto;color:var(--muted)} /* positioned against .mega itself (not the hovered row), so it always opens flush with the top of the sidebar instead of trailing down off-screen for a row near the bottom of a long category list -- since it isn't aligned to the hovered row's own height, moving the mouse from a lower row across to the panel has to cross other rows on the way; the "open" class (set by the small script at the bottom of this page, which keeps a row's panel open for a short grace period after the mouse leaves it) is what keeps that panel open for that diagonal move instead of it slamming shut the instant the mouse dips onto a neighbouring row */ .mega-panel{display:none;position:absolute;left:250px;top:0;min-height:100%;max-height:75vh;overflow-y:auto;width:640px;max-width:70vw;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.14);padding:22px 26px;z-index:41} li:hover>.mega-panel,li:focus-within>.mega-panel,li.open>.mega-panel{display:block} .mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 30px} .mega-group ul{list-style:none;margin:0;padding:0} .mega-group li{margin:6px 0} .mega-group a{color:var(--muted);font-weight:400;font-size:.86rem;white-space:normal} .mega-group a:hover{color:var(--accent)} .mega-group a.mega-gh{display:block;font-weight:700;color:var(--ink);font-size:.95rem;margin-bottom:8px} .mega-group a.mega-gh:hover{color:var(--accent);text-decoration:none} .subcats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px} .subcats a{padding:6px 14px;border:1px solid var(--line);background:var(--soft);border-radius:99px;color:var(--ink);font-weight:500;font-size:.9rem} .subcats a:hover{border-color:var(--accent);text-decoration:none} .shop-layout{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start} .cat-side{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px;position:sticky;top:130px} .cat-side h3{margin:0 0 8px;font-size:1rem} .cat-side a{display:block;padding:6px 4px;color:var(--ink);border-radius:6px;font-size:.92rem} .cat-side a:hover{text-decoration:none;background:#fff} .cat-side a.on{font-weight:700;color:var(--accent)} .hs-cat small{font-weight:400} @media (max-width:860px){.mega{position:static;box-shadow:none;border:0}.mega-list{width:auto;padding:0}.mega-row{border-radius:0;border-top:1px solid var(--line)}.mega-list>li:first-child>.mega-row{border-top:0}.mega-panel{position:static;width:auto;max-width:none;min-height:0;max-height:none;overflow-y:visible;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 12px 30px;margin:0}.mega-cols{grid-template-columns:1fr} /* Touch has no real hover, and dragging to scroll routinely drops :focus-within out from under the tapped link mid-gesture -- which is what made the whole menu snap shut the instant someone tried to scroll through it, however tall .mega-panel above was allowed to grow. So under this breakpoint, hover/focus no longer opens anything at all -- not the top-level menu, and not an individual category's sub-category panel either -- only an explicit tap does (see the script at the bottom of base.html), which isn't affected by losing focus while scrolling. */ .navitem:hover .mega,.navitem:focus-within .mega{display:none} .navitem.open-mobile .mega{display:block} li:hover>.mega-panel,li:focus-within>.mega-panel{display:none} /* Tapping "Categories" used to show every category with every one of its sub-categories already expanded, flattened into one long list -- correct once you're scrolling through it, but it meant landing on a wall of sub-categories before picking a category at all. Now a category's own .mega-row tap-toggles just its panel (li.open, same class/single-at-a-time-open convention as the desktop hover version below), so the initial list is just the top-level categories, and picking one reveals only its own sub-categories. Repeated after the hover/focus-within disable rule just above (same specificity either way) so it wins the tie -- a tapped link can end up genuinely focused, which would otherwise satisfy that disable rule too and re-hide the very panel this tap just opened. */ li.open>.mega-panel{display:block} .mega-chev{transition:transform .15s} li.open>.mega-row .mega-chev{transform:rotate(90deg)} /* .site-header is pinned to the top of the screen (position:sticky) while scrolling the rest of the page -- fine normally, but with the category list expanded the header can easily be taller than the whole screen, and a pinned/stuck element's own overflow can't be scrolled into: the bottom of a long list would just sit stuck off the bottom edge forever, unreachable, even though the page itself is still "scrolling". Body gets .nav-open exactly while the mobile menu is open (see the script at the bottom of base.html) so the header scrolls away like any other content for as long as that's true, making the whole expanded list reachable. */ body.nav-open .site-header{position:static} /* The whole nav -- the utility links above the header and the category bar below it -- collapses behind the hamburger icon next to the logo, rather than sitting permanently on screen above the fold on every page. Both stay exactly where they already are in the page (so desktop, where the toggle is hidden and neither of these rules apply, is completely untouched); on mobile they're simply hidden until body.mobile-nav-open says otherwise, and stack one item per row instead of the wrapping/horizontal-scrolling strips they are the rest of the time. */ .mobilenav-toggle{display:block} .utilitybar,.catbar{display:none} body.mobile-nav-open .utilitybar,body.mobile-nav-open .catbar{display:block} body.mobile-nav-open .utilitybar .wrap{flex-direction:column;align-items:flex-start;overflow-x:visible;white-space:normal;gap:0;padding:4px 20px} body.mobile-nav-open .catbar .wrap{flex-direction:column;align-items:stretch;gap:0} /* un-sticking the header while the category accordion is open (nav-open, above) applies just as much once the outer hamburger panel itself is open -- either one can make the header taller than the screen. */ body.mobile-nav-open .site-header{position:static} } /* ---------- Image galleries ---------- */ .pimg img.alt{position:absolute;inset:0;opacity:0;transition:opacity .25s} .pcard:hover .pimg img.alt{opacity:1} .gnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.2);font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink)} .gnav:hover{background:#fff} .gnav.prev{left:10px} .gnav.next{right:10px} .gcount{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:.75rem;padding:2px 9px;border-radius:99px} .thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:4px} .thumb{flex:0 0 76px;height:76px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--soft);cursor:pointer} .thumb img{width:100%;height:100%;object-fit:cover} .thumb.on{border-color:var(--accent)} .thumb:hover{border-color:#b9c9c2} .thumbs-admin{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 14px} .thumbs-admin .th{width:120px;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff} .thumbs-admin .th img{width:100%;height:96px;object-fit:cover;border-radius:6px;margin-bottom:6px} .thumbs-admin .th .radio{font-size:.82rem;margin:2px 0} .thumbs-admin .remove{color:var(--bad)} /* ---------- Pre-order pricing ---------- */ .savebadge{display:inline-block;background:#e9f6ee;color:var(--ok);border:1px solid #bfe3cd;border-radius:99px;padding:1px 10px;font-size:.78rem;font-weight:700;vertical-align:middle;margin-left:4px;text-decoration:none} .price.big .savebadge{font-size:.85rem} .tag.pre{background:#2b5aa0} /* ---------- Assembly option ---------- */ label.assembly{display:flex;gap:10px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:12px 0;font-weight:400;color:var(--ink);cursor:pointer} label.assembly input{width:auto;margin:3px 0 0} label.assembly.sm{white-space:nowrap;display:inline-flex;margin:6px 0 0;padding:4px 10px;font-size:.85rem;align-items:center} label.assembly.sm input{margin:0} .assembly-fee input{max-width:260px} .collect{border-top:1px solid var(--line);margin-top:14px;padding-top:12px} .payform{margin:10px 0} .payform summary{list-style:none;cursor:pointer;display:inline-block} .payform summary::-webkit-details-marker{display:none} .payform[open] summary{margin-bottom:10px} .payform form{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--soft)} .qtyform{display:inline-flex;gap:6px;align-items:center;margin:0} .qtyform .qty{width:64px;padding:4px 6px} .editbox{margin-top:14px;display:flex;flex-direction:column;gap:6px} .logtbl td{vertical-align:top} .logtbl .pill{white-space:nowrap} input.ro{background:var(--soft)!important;color:var(--ink);cursor:not-allowed} /* ---------- Deliveries (admin) ---------- */ .tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0 14px} .tabs>a{padding:7px 14px;border:1px solid var(--line);border-radius:99px;color:var(--ink);font-weight:600;background:#fff} .tabs>a.on{background:var(--accent);color:#fff;border-color:var(--accent)} .tabs>a:hover{text-decoration:none} .tabs .badge{background:rgba(0,0,0,.12);color:inherit} .tabs>a.on .badge{background:rgba(255,255,255,.25)} .datefilter{margin-left:auto;display:flex;gap:8px;align-items:center} .datefilter label{display:flex;gap:6px;align-items:center} .datefilter input{width:auto;margin:0} .deliv td{vertical-align:top} .schedform{min-width:250px;padding:10px} .deliv td:last-child{min-width:260px} .deliv .payform form{background:#fff} /* ---------- Driver app (phone first) ---------- */ body.driver{background:#f4f2ee} .drv-head{background:var(--accent);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;position:sticky;top:0;z-index:10} .drv-head form{display:flex;gap:8px;align-items:center;font-size:.9rem;margin:0} .drv-logo{color:#fff;font-weight:800;font-size:1.15rem} .drv-logo small{font-weight:500;opacity:.8} .link.light{color:#fff} .drv-tracking{background:#eef7f0;color:#215b3a;font-size:.82rem;text-align:center;padding:6px 10px;border-bottom:1px solid var(--line)} .drv-main{max-width:640px;margin:0 auto;padding:12px 14px 60px} .drv-main h1{font-size:1.4rem;margin:.4em 0} .drv-day{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 6px} .drv-card{display:block;background:#fff;border:1px solid var(--line);border-left:5px solid #2b5aa0;border-radius:12px;padding:12px 14px;margin:8px 0;color:var(--ink)} .drv-card.out{border-left-color:var(--warn)} .drv-card:hover{text-decoration:none;border-color:var(--accent)} .drv-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0} .drv-name{font-size:1.1rem;font-weight:700} .drv-note{background:#fff4dc;border-radius:8px;padding:6px 10px;margin-top:6px;font-size:.9rem} .due{color:var(--bad)} .drv-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0} .drv-panel p{margin:8px 0} .drv-items{padding-left:18px;margin:0 0 8px} .drv-items li{margin:4px 0} .due-box{background:#fdecea;border-radius:8px;padding:10px 12px;font-size:1.05rem} .drv-preview{max-height:220px;border-radius:10px;margin:0 auto} .drv-done{padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--muted)} .sigpad{width:100%;height:auto;aspect-ratio:600/220;background:#fff;border:2px dashed #b9b3a7;border-radius:10px;touch-action:none;display:block;margin:6px 0} .drv-main .btn{min-height:46px} .drv-main input[type=file]{padding:10px} .dvbox{border-top:1px solid var(--line);padding-top:10px} .proofs{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0} .proofs a{display:block;color:var(--muted);font-size:.8rem} .proofs img{max-width:150px;max-height:120px;border:1px solid var(--line);border-radius:8px;background:#fff} .proofs img.sigimg{background:#fff} .cashbar{display:flex;gap:12px 22px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;margin:8px 0} .cashbar.has{border-color:#f1d9a2;background:#fffaf0} .cashbar>div:first-child{display:flex;flex-direction:column} .cashbar strong{font-size:1.3rem} .cashbar .chip{background:var(--soft);border-radius:99px;padding:3px 12px;font-size:.9rem} tr.voided td{color:var(--muted)} tr.voided td:not(:last-child){text-decoration:line-through} tr.voided td:nth-child(6){text-decoration:none} .mini{margin-top:6px} .mini summary{cursor:pointer} .field-end{display:flex;align-items:flex-end} .err{color:#c0392b;min-height:1em;margin:0} .rcpt{margin:10px 0 16px} .grid2{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:18px;align-items:start} @media(max-width:800px){.grid2{grid-template-columns:1fr}} @media print{.side,.tabs,.actions,#rcv .panel,details.mini{display:none!important}} #rcv .tbl td:first-child{min-width:180px} #lines td{vertical-align:middle} #lines td.lcost{text-align:right;padding-right:14px;white-space:nowrap} .verify-by{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:6px 0} .verify-by legend{font-size:.85rem;color:var(--muted);padding:0 6px} .wish{margin:12px 0} .wishform{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .wishform select,.wishform input{max-width:220px} .wcard .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px} .msgbody{white-space:pre-wrap;background:var(--soft);padding:10px;border-radius:8px;font-size:.85rem} ul.plain{margin:4px 0 12px 18px;padding:0} .inline-actions{margin:10px 0} .bulkbar{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:10px 0;position:sticky;top:0;z-index:5} .bulkbar label{display:flex;gap:6px;align-items:center;font-size:.9rem} tr.ghead td{background:var(--soft);border-top:2px solid var(--line)} .bulkbar select,.bulkbar input:not([type=checkbox]){width:auto;flex:0 1 auto} .bulkbar input[name=note]{flex:1 1 240px} .cashbar>div:not(.chip){display:flex;flex-direction:column} .appears{display:block;margin-top:6px;font-size:.9rem;color:var(--ink)} .pill.bundle{background:#e8eefc;color:#2a4a9b;border:1px solid #c6d4f5} .includes{margin:14px 0;padding:10px 14px;background:var(--soft);border-radius:10px} .includes ul{margin:6px 0 0 18px;padding:0} .ext-check{margin-top:-6px;padding:10px 14px;background:var(--soft);border-radius:10px} .ext-check p{margin:4px 0} .bulkbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff8e6;border:1px solid #f0d78a;border-radius:10px;padding:8px 12px;margin-bottom:10px} .bulkbar[hidden]{display:none} .bulkset{display:inline-flex;gap:6px;align-items:center} .bulkset input{padding:5px 8px;border:1px solid #ccc;border-radius:6px;width:170px} .btn.sm{padding:5px 10px;font-size:.85rem} .wishform[hidden]{display:none} .grid.wl-row{grid-template-rows:auto;grid-auto-rows:0;row-gap:0;overflow:hidden} .grid.wl-row>*:nth-child(n){min-height:0} .wl-more{margin:10px 0 0} .wl-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:8px 0 12px;border-bottom:1px solid #e6e1d6} .wl-lines{list-style:none;margin:0;padding:0} .wl-lines li{display:grid;grid-template-columns:24px 72px 1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #eee9de} .wl-thumb{display:block;width:72px;height:72px;border-radius:8px;overflow:hidden;background:#eef0ea}.wl-thumb img{width:100%;height:100%;object-fit:cover} .wl-info .pname{font-weight:600} @media(max-width:640px){.wl-lines li{grid-template-columns:24px 56px 1fr;grid-template-areas:"c t i" ". . p" ". . b"}.wl-lines li>:nth-child(1){grid-area:c}.wl-lines li>:nth-child(2){grid-area:t;width:56px;height:56px}.wl-lines li>:nth-child(3){grid-area:i}.wl-lines li>:nth-child(4){grid-area:p}.wl-lines li>:nth-child(5){grid-area:b}} /* website builder sections */ .hs{margin:0 0 8px;border-radius:14px;overflow:hidden} .hs.w-full{width:100vw;margin-left:calc(50% - 50vw);border-radius:0} .hs.pad-none{padding:0}.hs.pad-small{padding:16px}.hs.pad-medium{padding:32px 24px}.hs.pad-large{padding:64px 32px} .hs.w-full.pad-none>.sec-head,.hs.w-full>.sec-head{max-width:1200px;margin-left:auto;margin-right:auto} .hs.sc-soft{background:var(--soft)}.hs.sc-accent{background:var(--accent);color:#fff}.hs.sc-accent a:not(.btn){color:#fff}.hs.sc-accent .btn{background:#fff;color:var(--accent);border-color:#fff} .hs.sc-dark{background:#1e2320;color:#f4f1ea}.hs.sc-dark a:not(.btn){color:#f4f1ea}.hs.sc-dark .btn{background:#f4f1ea;color:#1e2320;border-color:#f4f1ea} .ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right} .hs-hero{background-size:cover;background-position:center;display:flex;align-items:center;padding-left:40px;padding-right:40px} .hs-hero.ta-center{justify-content:center}.hs-hero.ta-right{justify-content:flex-end} .hs-hero.h-small{min-height:200px}.hs-hero.h-medium{min-height:340px}.hs-hero.h-large{min-height:520px} .hs-hero .hs-in{max-width:640px}.hs-hero h1{font-size:2.4rem;margin:0 0 10px}.hs-hero p{margin:0 0 20px;font-size:1.05rem} .hs-hero.tc-light{color:#fff}.hs-hero.tc-light .btn{background:#fff;color:#1e2320;border-color:#fff} .hs-it{display:grid;gap:32px;align-items:center} .hs-it.sz-third{grid-template-columns:1fr 2fr}.hs-it.sz-half{grid-template-columns:1fr 1fr}.hs-it.sz-twothirds{grid-template-columns:2fr 1fr} .hs-it.it-right.sz-third{grid-template-columns:2fr 1fr}.hs-it.it-right.sz-twothirds{grid-template-columns:1fr 2fr} .hs-it.it-right .hs-img{order:2} .hs-img img{width:100%;border-radius:12px;display:block}.hs-img .ph{display:flex;min-height:260px;align-items:center;justify-content:center;background:var(--soft);border-radius:12px} .hs-txt h2,.hs-rt h2{margin-top:0} .hs-rt .hs-in{max-width:760px;margin:0 auto} .hs-cats{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:18px} .hs-cat{display:block;text-align:center;color:inherit}.hs-cat .cimg{display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--soft);margin-bottom:8px} .hs-cat img{width:100%;height:100%;object-fit:cover;display:block}.hs-cat .ph{display:flex;height:100%;align-items:center;justify-content:center;font-size:2rem;color:#9aa8a0} .hs-cat:hover strong{text-decoration:underline} .hs .tiles{grid-template-columns:repeat(var(--cols,4),1fr)} .hs-prods{grid-template-columns:repeat(var(--cols,4),1fr)} @media(max-width:800px){.hs-cats,.hs .tiles,.hs-prods{grid-template-columns:repeat(2,1fr)}.hs-it,.hs-it.sz-third,.hs-it.sz-half,.hs-it.sz-twothirds,.hs-it.it-right.sz-third,.hs-it.it-right.sz-twothirds{grid-template-columns:1fr}.hs-it.it-right .hs-img{order:0}.hs-hero{padding-left:20px;padding-right:20px}.hs-hero h1{font-size:1.7rem}.hs.pad-large{padding:32px 16px}} /* website admin */ .sec-list{list-style:none;margin:0;padding:0}.sec-list li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px} .sec-list li.off{opacity:.55}.sec-list .ico{font-size:1.4rem;width:32px;text-align:center;color:var(--accent)}.sec-list .grow{flex:1} .sec-list form{display:inline} .typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .typegrid button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;font:inherit}.typegrid button:hover{border-color:var(--accent)} .typegrid .ico{font-size:1.3rem;color:var(--accent)}.typegrid small{display:block;color:var(--muted)} .fset{border-top:1px solid var(--line);padding-top:12px;margin-top:6px} .imgfield img{max-width:180px;max-height:110px;border-radius:8px;display:block;margin:6px 0} .hs-help{background:var(--soft);border-radius:10px;padding:14px} .hs-editor{position:relative;display:inline-block;max-width:100%;cursor:crosshair} .hs-editor img{max-width:100%;max-height:420px;display:block;border-radius:8px} .hs-dot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);font-size:.72rem;font-weight:700;line-height:1;cursor:pointer} .hs-dot.unset{background:#fff;color:var(--muted);border-style:dashed;opacity:.6} .hs-placebar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .hs-place.on{background:var(--accent);color:#fff;border-color:var(--accent)} .catnames .hs-cat strong,.catnames.tiles a span{font-size:var(--nfs,1rem);font-family:var(--nff,inherit);font-weight:var(--nfw,700)} .hs-scrollwrap{position:relative} .hs-scroll{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:6px;gap:18px;margin-bottom:0} .hs-scroll>*{flex:0 0 calc((100% - 18px*(var(--cols,4) - 1))/var(--cols,4));scroll-snap-align:start} .hs-arrow{position:absolute;top:calc(50% - 22px);z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)} .hs-arrow[hidden]{display:none}.hs-arrow.prev{left:-8px}.hs-arrow.next{right:-8px} @media(max-width:800px){.hs-scroll>*{flex-basis:calc((100% - 18px)/2.3)!important}} .hs-hero.hs-plain{background:none;min-height:0!important;padding:8px 0;border-radius:0} .hs-hero.hs-plain.pad-medium{padding:8px 0} /* ---------- Tabbed products (picture banners + category tabs + scrolling product rows) ---------- */ .tabprod{display:flex;gap:28px;align-items:flex-start} .tabprod-banners{display:flex;flex-direction:column;gap:16px;flex:0 0 260px} .tp-banner{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:var(--soft);color:#fff} .tp-banner:hover{text-decoration:none} .tp-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tp-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:20px;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.42))} .tp-kicker{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9} .tp-title{font-size:1.5rem;font-weight:800} .tp-sub{font-size:.85rem;opacity:.9} .tabprod-main{flex:1;min-width:0} .tp-tabbar{display:flex;align-items:flex-end;gap:22px;border-bottom:1px solid var(--line);margin-bottom:20px} .tp-heading{font-weight:800;color:var(--ink);font-size:.95rem;letter-spacing:.02em;white-space:nowrap;padding-bottom:10px;border-bottom:2px solid var(--accent);margin-bottom:-1px} .tp-tabs{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;flex:1;align-items:flex-end} .tp-tabs::-webkit-scrollbar{display:none} .tp-tab{background:none;border:0;border-bottom:2px solid transparent;padding:0 0 10px;margin-bottom:-1px;font-weight:700;font-size:.78rem;letter-spacing:.03em;color:var(--muted);cursor:pointer;white-space:nowrap} .tp-tab.on{color:var(--ink);border-color:var(--accent)} .tp-arrows{display:flex;gap:6px;flex:0 0 auto;padding-bottom:6px} .tp-arrows button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink);font-size:1rem;line-height:1} .tp-arrows button:hover{border-color:var(--accent);color:var(--accent)} .tp-panel{display:none} .tp-panel.on{display:block} .tp-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:calc((100% - (var(--visible,4) - 1)*20px)/var(--visible,4));gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px} .tp-grid>.pcard{scroll-snap-align:start} @media(max-width:860px){.tabprod{flex-direction:row;flex-wrap:wrap}.tabprod-banners{flex-direction:row;width:100%;flex-basis:100%}.tp-banner{flex:1;aspect-ratio:4/3}.tabprod-main{flex-basis:100%}} @media(max-width:600px){.tabprod-banners{flex-direction:column}.tp-grid{grid-auto-columns:calc((100% - 20px)/2)}} /* ---------- Shoppable photo (clickable points over a picture, each linking to a product) ---------- */ .hs.shp-hs{overflow:visible} /* points near an edge pop their card outside the section's own rounded-corner clipping */ .shp-wrap{position:relative;line-height:0} .shp-img{width:100%;display:block;border-radius:var(--radius)} .shp-point{position:absolute;transform:translate(-50%,-50%)} .shp-dot{position:relative;display:block;width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.25);cursor:pointer} .shp-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff} .shp-dot:hover,.shp-point:focus-within .shp-dot{box-shadow:0 0 0 6px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.3)} .shp-card{display:none;position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);width:220px;background:#fff;border-radius:var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.2);padding:12px;gap:10px;align-items:center;z-index:5;line-height:1.3;text-align:left} .shp-point:hover .shp-card,.shp-point:focus-within .shp-card{display:flex} .shp-point.flip-b .shp-card{bottom:auto;top:calc(100% + 14px)} .shp-point.edge-l .shp-card{left:0;transform:none} .shp-point.edge-r .shp-card{left:auto;right:0;transform:none} .shp-cimg{flex:0 0 auto;width:56px;height:56px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--soft)} .shp-cimg img{width:100%;height:100%;object-fit:cover;display:block} .shp-info{flex:1;min-width:0} .shp-name{display:block;color:var(--ink);font-weight:600;font-size:.85rem;margin-bottom:2px} .shp-name:hover{color:var(--accent)} .shp-price{font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:8px} .shp-price s{font-weight:400;color:var(--muted);margin-left:4px} .shp-add{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:6px 14px;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer} .shp-add.soldout{background:var(--soft);color:var(--muted);cursor:default} @media(max-width:600px){.shp-card{width:180px}} /* ---------- Category directory (picture + sub-category list per top-level category) ---------- */ .roomsgrid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:32px 24px} .room{display:flex;gap:14px;align-items:flex-start} .roompic{display:block;flex:0 0 auto;width:110px} .roompic img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block} .roompic .ph{width:100%;aspect-ratio:1/1;border-radius:8px;font-size:2rem} .roomlist{flex:1;min-width:0} .roomhead{display:block;font-weight:900;font-size:.85rem;letter-spacing:.03em;color:var(--ink);margin-bottom:8px;-webkit-text-stroke:.4px var(--ink)} .roomhead:hover{color:var(--accent);text-decoration:none} .roomlist ul{list-style:none;margin:0;padding:0} .roomlist li{margin:7px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .roomlist a{color:var(--ink);font-weight:400;font-size:.9rem} .roomlist a:hover{color:var(--accent)} .hotbadge{background:#7cb342;color:#fff;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:4px;letter-spacing:.03em;line-height:1.5} @media(max-width:800px){.roomsgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.roomsgrid{grid-template-columns:1fr}} /* ---------- Value props / style grid / brand logos / Instagram-style feed ---------- */ .vprops{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:24px;text-align:center} .vprop{display:flex;flex-direction:column;align-items:center;gap:2px} .vicon{font-size:2rem;margin-bottom:6px;line-height:1} .vprop strong{font-size:.95rem} .vprop span:last-child{color:var(--muted);font-size:.85rem} .stylegrid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:16px} .styletile{position:relative;display:block;color:#fff;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden} .styletile:hover{text-decoration:none} .styletile .simg{position:absolute;inset:0;display:block} .styletile .simg img{width:100%;height:100%;object-fit:cover;transition:transform .35s} .styletile .simg .ph{width:100%;height:100%;font-size:2.4rem} .styletile:hover .simg img{transform:scale(1.05)} .styletile .slabel{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.62));font-weight:700;font-size:1.15rem} .brandgrid{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:18px} .brandtile{display:flex;align-items:center;justify-content:center;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;aspect-ratio:2/1} .brandtile:hover{text-decoration:none} .brandtile img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s} .brandtile:hover img{filter:none;opacity:1} .igfeed{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:4px} .igtile{display:block;aspect-ratio:1/1;overflow:hidden} .igtile img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .igtile:hover img{transform:scale(1.06)} @media(max-width:800px){.vprops{grid-template-columns:repeat(2,1fr)}.stylegrid{grid-template-columns:repeat(2,1fr)}.brandgrid{grid-template-columns:repeat(3,1fr)}.igfeed{grid-template-columns:repeat(3,1fr)}} .tbl.media td{vertical-align:top}.mthumb img,.mthumb video{width:96px;height:72px;object-fit:cover;border-radius:6px;background:var(--soft);display:block} .mpath{word-break:break-all} .bar{height:12px;background:var(--soft);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:8px 0}.bar>div{height:100%;background:var(--accent);transition:width .4s} .cardbox{margin:8px 0 12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fafafa} .mf-field{height:44px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff;display:flex;align-items:center} .mf-field iframe{width:100%} .mf-exp{display:flex;gap:8px} .mf-exp select{flex:1}