/* Palette, type stack and layout tokens live in tokens.css, loaded before this file. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #a65520;outline-offset:3px}
.dossiers-section :focus-visible,footer :focus-visible{outline-color:#ffd7cd}
.skip{position:fixed;z-index:1000;left:12px;top:10px;background:var(--white);border:2px solid var(--ink);padding:9px 12px;transform:translateY(-160%);font-weight:850}
.skip:focus{transform:none}
.footer-brand img{object-fit:contain}
.footer-brand span{display:grid;line-height:1.05}
.footer-brand b{font-size:14px;letter-spacing:.07em}
.footer-brand small{font-size:var(--fs-xs);letter-spacing:.13em;color:var(--muted);margin-top:5px;font-weight:800}
.text-action,[data-store-call]{display:inline-flex;align-items:center;min-height:var(--tap)}
main>section{max-width:var(--max);margin-inline:auto}
.eyebrow{margin:0 0 12px;color:var(--teal);font-size:var(--fs-xs);line-height:1.2;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.section-index{font-family:var(--display);font-stretch:condensed;font-weight:950;letter-spacing:.08em;font-size:var(--fs-xs);text-transform:uppercase;border-top:1px solid currentColor;padding-top:10px;margin-bottom:30px;opacity:.72}
.hero{position:relative;padding:clamp(42px,6vw,84px) var(--pad) clamp(54px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);gap:clamp(38px,6vw,88px);align-items:center;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,transparent 0 49.8%,rgba(255,255,255,.07) 49.8% 50%,transparent 50% 100%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:100% 100%,100% 34px}
.hero:after{content:"";position:absolute;right:-24px;bottom:-42px;z-index:-1;color:rgba(255,255,255,.035);font-family:var(--display);font-weight:950;font-size:clamp(90px,16vw,230px);letter-spacing:-.06em;white-space:nowrap}
.hero .eyebrow{color:var(--teal-hi)}
.hero-intro{position:relative;z-index:1}
.hero h1{font-family:var(--display);font-size:clamp(54px,7.3vw,104px);font-weight:950;line-height:.78;letter-spacing:-.065em;text-transform:uppercase;margin:0 0 30px;max-width:820px}
.hero h1 span,.hero h1 em{display:block;font-style:normal}
.hero h1 em{color:var(--brass)}
.lede{font-size:clamp(16px,1.55vw,20px);line-height:1.5;color:#d3dedc;max-width:660px;margin:0;border-inline-start:4px solid var(--teal-hi);padding-inline-start:18px}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border-top:1px solid #526569}
.hero-proof span{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:12px 13px 12px 0;font-size:var(--fs-xs);line-height:1.3;text-transform:uppercase;letter-spacing:.05em;color:#c7d2d1}.hero-proof b{color:var(--teal-hi)}
.hero-proof span+span{border-inline-start:1px solid #526569;padding-inline-start:13px}.hero-board{background:var(--paper);color:var(--ink);box-shadow:12px 12px 0 var(--brass);transform:rotate(-.35deg)}
.board-head,.board-foot{display:flex;justify-content:space-between;gap:14px;padding:9px 12px;background:var(--teal);color:#fff;font-size:var(--fs-xs);font-weight:900;letter-spacing:.13em;text-transform:uppercase}.board-foot{background:var(--paper-2);color:var(--ink);letter-spacing:.04em}
.board-foot span:last-child{font-weight:950}
.need-list{background:var(--paper);min-height:331px}/* Reserved: this list is rendered from the shop's enabled service types once the catalogue
   responds, and without a reservation it grows from nothing to ~331px and shifts everything
   below it. A shop that disables service types should lower this to match its own list. */
.need-list>a{display:grid;grid-template-columns:38px 1fr 24px;gap:14px;align-items:center;padding:17px 15px;border-bottom:1px solid var(--line-dark);position:relative;transition:transform .12s ease,background .12s ease}
.need-list>a:last-child{border-bottom:0}
.need-list>a:hover,.need-list>a:focus-visible{background:var(--white);transform:translateX(6px)}
.need-icon{font-family:var(--display);font-size:18px;font-weight:950;color:var(--brass-deep)}.need-list b{display:block;font-size:15px}
.need-list small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:4px}
.need-list i{font-style:normal;font-size:20px;color:var(--teal)}
.shop-section{position:relative;padding:78px var(--pad) 88px;background:var(--shelf);border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.section-heading{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.5fr);gap:50px;align-items:end}
.section-heading h2,.compact-heading h2,.local-section h2{font-family:var(--display);font-size:clamp(38px,5.3vw,72px);font-weight:950;line-height:.9;letter-spacing:-.055em;text-transform:uppercase;margin:0}
.section-heading>p{margin:0;color:var(--muted);font-size:13px;max-width:450px;padding-bottom:4px}.shop-toolbar{grid-template-columns:minmax(230px,1fr) auto auto;align-items:center}.search input{width:100%;padding:0 13px;outline:none}
.filters{display:flex;gap:5px;overflow-x:auto}.filters button{min-width:44px;border:1px solid var(--ink);background:var(--white);white-space:nowrap;cursor:pointer}
.filters button:hover,.filters button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}.stock-light{display:flex;align-items:center;gap:7px;white-space:nowrap}.stock-light i{background:#1a7c59}
.stock-light.is-error i{background:var(--brass)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));border-top:1px solid var(--ink);border-inline-start:1px solid var(--ink);background:var(--ink);gap:1px}.product-card{min-width:0;display:flex;flex-direction:column}.product-visual{aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--ink)}
.product-visual:after{content:"";position:absolute;right:8px;bottom:8px;width:16px;height:16px;border-right:2px solid rgba(11,29,32,.25);border-bottom:2px solid rgba(11,29,32,.25)}.product-visual img{position:absolute;inset:0;width:100%;height:100%;background:var(--paper-2)}
.product-glyph{font-family:var(--display);font-size:clamp(34px,4vw,54px);font-weight:950;letter-spacing:-.04em;color:#728082}.product-category{position:absolute;z-index:2;padding:5px 8px;font-size:var(--fs-xs);font-weight:900;text-transform:uppercase}
.product-copy{display:flex;flex-direction:column;flex:1;padding:15px}
.product-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em}
.product-meta .available{color:var(--teal);font-weight:950}
.product-meta .limited{color:var(--brass-deep);font-weight:900}
.product-copy h3{font-size:16px;line-height:1.2;margin:14px 0 5px;overflow-wrap:anywhere}.product-copy p{color:var(--muted);margin:0 0 15px}.product-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.price{font-family:var(--display);font-size:22px;font-weight:950}
.add-button{min-width:44px;min-height:44px;border:1px solid var(--ink);background:var(--brass);color:#181600;padding:0 12px;font-size:var(--fs-xs);font-weight:950;cursor:pointer;text-transform:uppercase}
.add-button:hover,.add-button:focus-visible{background:var(--teal);color:#fff;border-color:var(--teal)}
.add-button:disabled{background:#e5e2da;color:#7e8787;border-color:var(--line);cursor:not-allowed}
.empty-state{text-align:center;padding:52px 20px;border:1px dashed var(--line-dark);background:var(--paper)}
.empty-state b{font-size:18px}
.empty-state p{color:var(--muted);margin-bottom:0}
.workflows{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.workflow-card{position:relative;padding:78px var(--pad);overflow:hidden}
.workflow-card:first-child{border-inline-end:1px solid #587074}
.workflow-card:before{content:"";position:absolute;inset:auto -50px -100px auto;width:220px;height:220px;border:44px solid rgba(255,255,255,.035);transform:rotate(26deg)}
.print-card{background:#0d3337}
.repair-card{background:#182a2d}
.workflow-number{font-family:var(--display);font-size:clamp(70px,10vw,140px);font-weight:950;line-height:.75;color:rgba(255,255,255,.07);position:absolute;inset-inline-end:24px;top:28px}
.workflow-card .eyebrow{color:var(--teal-hi)}
.repair-card .eyebrow{color:#d8cc62}
.workflow-card header{position:relative;z-index:1}
.workflow-card header h2{font-family:var(--display);font-size:clamp(38px,4vw,60px);font-weight:950;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;margin:0 0 18px;max-width:620px}
.workflow-card header>p:not(.eyebrow){color:#c2cecc;max-width:530px;font-size:13px}
.plain-steps{position:relative;z-index:1;list-style:none;padding:0;margin:30px 0 0;border-top:1px solid #678085}
.plain-steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid #4e686d}
.plain-steps li>b{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--teal-hi);color:var(--teal-hi);font-size:var(--fs-xs)}
.repair-card .plain-steps li>b{border-color:#d8cc62;color:#d8cc62}
.plain-steps strong,.plain-steps small{display:block}
.plain-steps strong{font-size:12px}
.plain-steps small{font-size:var(--fs-xs);color:#b7c5c3;margin-top:3px}
.workflow-card .button.primary{background:#fff;color:var(--ink);border-color:#fff}
.workflow-card .button.primary:hover{background:var(--brass);border-color:var(--brass)}
.workflow-card .text-action{color:#fff}
.card-actions,.local-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid var(--ink);font-size:var(--fs-xs);font-weight:950;letter-spacing:.035em;cursor:pointer;background:transparent;text-transform:uppercase}
.button.primary{background:var(--ink);color:#fff}
.button.primary:hover{background:var(--teal);border-color:var(--teal)}
.button.secondary{background:var(--white)}
.button.secondary:hover{box-shadow:4px 4px 0 var(--brass)}
.button.full{width:100%}
.button:disabled,.button.is-disabled,[aria-disabled="true"].button{opacity:.5;cursor:not-allowed}
.text-action{font-size:var(--fs-xs);font-weight:900;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-transform:uppercase}
.text-action:hover{color:var(--teal-hi)}
.dossiers-section{position:relative;padding:82px var(--pad);background:var(--brass);color:#1a120b;border-left:1px solid #5d5408;border-right:1px solid #5d5408;overflow:hidden}
.dossiers-section:after{content:"DOSSIERS";position:absolute;inset-inline-start:var(--pad);bottom:-26px;font-family:var(--display);font-size:clamp(80px,15vw,210px);font-weight:950;line-height:.7;color:rgba(255,255,255,.12);letter-spacing:-.05em;pointer-events:none}
.dossiers-section .section-heading,.dossiers-section .request-list{position:relative;z-index:1}
.dossiers-section .eyebrow{color:#292500}
.dossiers-section .section-heading>p{color:#211e00}
.request-list{border-top:2px solid #282400}
.request-list>a{display:grid;grid-template-columns:110px 1fr 28px;gap:20px;align-items:center;padding:21px 4px;border-bottom:1px solid rgba(40,36,0,.55)}
.request-list>a:hover,.request-list>a:focus-visible{background:#d9ce69;padding-left:12px;padding-right:12px}
.request-list>a>span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:#322d00;font-weight:950}
.request-list b,.request-list small{display:block}
.request-list b{font-family:var(--display);font-size:23px;line-height:1;text-transform:uppercase}
.request-list small{color:#393400;margin-top:5px;font-size:var(--fs-xs)}
.request-list i{font-style:normal;font-size:21px}
.more-services{padding:76px var(--pad);background:var(--paper);border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.compact-heading{display:grid;grid-template-columns:.35fr 1fr;gap:40px;align-items:end;margin-bottom:32px}
.compact-heading h2{max-width:820px}
.service-list{border-top:2px solid var(--ink)}
.service-list article{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:19px 4px;border-bottom:1px solid var(--line)}
.service-list article:hover{background:var(--white);padding-left:12px;padding-right:12px}
.service-list h3{font-family:var(--display);font-size:21px;line-height:1;text-transform:uppercase;margin:0 0 5px}
.service-list p{font-size:12px;color:var(--muted);margin:0;max-width:740px}
.service-list a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-xs);font-weight:950;text-decoration:underline;text-underline-offset:4px;text-transform:uppercase}
.service-list a:hover{color:var(--teal)}.local-section{position:relative;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr) minmax(340px,.75fr);background:var(--white);align-items:center}.local-stamp{font-family:var(--display);font-size:clamp(66px,9vw,118px);font-weight:950;letter-spacing:-.07em;color:var(--teal);transform:rotate(-3deg);text-shadow:5px 5px 0 var(--teal-pale)}
.local-copy>p:not(.eyebrow){color:var(--muted);max-width:520px;margin-top:18px;font-size:13px}.store-details{margin:0}
.store-details>div{display:grid;grid-template-columns:92px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.store-details dt{font-weight:950;text-transform:uppercase;color:var(--muted);letter-spacing:.06em}
.store-details dd{margin:0;font-size:12px;overflow-wrap:anywhere}.store-details .address{font-family:var(--display);font-weight:950}
footer{max-width:var(--max);margin:auto;background:#071417;color:#fff;padding:34px var(--pad);display:grid;grid-template-columns:1fr auto auto;gap:34px;align-items:start;border-top:6px solid var(--teal)}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{background:#fff;border:1px solid #496064}
.footer-brand small{color:#97a9aa}.footer-links{display:grid;grid-template-columns:repeat(2,auto)}
.footer-links a,.footer-meta a{display:inline-flex;align-items:center;min-height:var(--tap)}
.footer-meta{display:grid;justify-items:end;gap:7px;text-align:end;font-size:var(--fs-xs);color:#98a9aa}
.footer-links a,.footer-meta a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.noscript{position:fixed;left:12px;right:12px;bottom:12px;z-index:300;background:#fff2bd;border:1px solid #816710;padding:10px}.cart-backdrop{position:fixed;inset:0;z-index:140}.cart-drawer{position:fixed;z-index:150;right:0;top:0;bottom:0;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .2s ease;border-left:5px solid var(--teal)}
.cart-drawer.open{transform:none}
.cart-drawer[aria-hidden="true"]{visibility:hidden}
.cart-drawer[aria-hidden="false"]{visibility:visible}.cart-head{display:flex;justify-content:space-between;gap:15px;padding-bottom:15px;border-bottom:2px solid var(--ink)}
.cart-head button,.dialog-close{width:44px;height:44px;border:1px solid var(--ink);background:transparent;font-size:24px;line-height:1;cursor:pointer}
.cart-product{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;min-width:0}.cart-thumb{display:grid;place-items:center;overflow:hidden}.cart-thumb img{width:100%;height:100%}
.cart-thumb-glyph{font-family:var(--display);font-weight:950;color:var(--teal)}
.cart-product-copy{min-width:0}.cart-line h3{font-size:14px;overflow-wrap:anywhere}
.cart-meta{display:flex;flex-wrap:wrap;gap:3px 8px;margin-bottom:4px;font-size:var(--fs-xs);font-weight:850;text-transform:uppercase;color:var(--teal)}
.cart-meta span{overflow-wrap:anywhere}
.cart-description{font-size:var(--fs-xs);color:var(--muted);margin:0 0 4px;overflow-wrap:anywhere}
.cart-line small{color:var(--muted)}
.cart-line strong{font-family:var(--display);font-size:16px}
.qty{display:flex;align-items:center;gap:5px;margin-top:8px}
.qty button{min-width:40px;width:40px;height:40px;border:1px solid var(--ink);background:#fff;cursor:pointer}
.qty span{min-width:22px;text-align:center;font-size:12px;font-weight:900}
.remove{border:0;background:transparent;color:var(--danger);font-size:var(--fs-xs);text-decoration:underline;cursor:pointer;min-height:44px;text-transform:uppercase}.cart-empty{text-align:center;color:var(--muted)}.cart-empty a{text-underline-offset:3px}.cart-limit{padding:10px 12px;border:1px solid #a65520;background:#fff7ef;color:#6f3511;font-weight:750}.cart-footer{padding-top:16px}
.total{display:flex;align-items:center;justify-content:space-between;font-weight:900}
.total strong{font-family:var(--display);font-size:28px}.checkout-dialog{width:min(700px,calc(100% - 26px));max-height:calc(100vh - 26px);overflow:auto;padding:0}
.checkout-dialog::backdrop{background:rgba(4,18,23,.72)}.checkout-dialog form,.success{position:relative}
.dialog-close{position:absolute;right:14px;top:14px}.checkout-dialog h2{font-size:clamp(36px,5vw,52px);margin:0 52px 12px 0}
.dialog-lede{color:var(--muted);margin-bottom:22px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.checkout-dialog label{display:block}
.checkout-dialog label>small{font-weight:500;color:var(--muted);text-transform:none}.checkout-dialog input:not([type=radio]),.checkout-dialog textarea{display:block;width:100%;margin-top:6px;padding:11px;outline:none}
.checkout-dialog fieldset{border:0;padding:0;margin:18px 0}
.checkout-dialog legend{font-size:var(--fs-xs);font-weight:950;margin-bottom:8px;text-transform:uppercase}
.choice{display:flex!important;gap:9px;align-items:center;border:1px solid var(--line);padding:11px;margin-top:6px}
.choice span b,.choice span small{display:block}
.choice span small{font-weight:500;color:var(--muted);text-transform:none}
.choice>[data-delivery-fee]{margin-inline-start:auto;text-align:end;font-weight:800;color:var(--teal);white-space:nowrap}.checkout-cost{margin:12px 0 16px}
.checkout-cost>div{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:30px}
.checkout-cost>div+div{border-top:1px solid var(--line)}.checkout-cost strong{font-size:15px}
.checkout-cost-total{font-weight:950}
.checkout-cost-total strong{font-size:19px}
.address-field{margin-bottom:14px}.checkout-warning{display:grid;grid-template-columns:145px 1fr;gap:12px;padding:13px;margin:18px 0;border-inline-start:6px solid var(--brass)}
.checkout-warning b{font-size:var(--fs-xs);text-transform:uppercase}
.checkout-warning span{font-size:var(--fs-xs);color:#becbcd}
.form-error{color:#802e28;background:#f7dfdc;padding:10px;font-size:12px}
.privacy-consent{margin:12px 0 0;font-size:12px;color:var(--muted)}
.privacy-consent a{color:var(--teal);font-weight:900;text-decoration:underline}
.success{text-align:center;padding-top:60px;padding-bottom:60px}
.success-mark{display:grid;place-items:center;width:58px;height:58px;background:var(--teal);color:#fff;font-size:24px;margin:0 auto 18px;box-shadow:5px 5px 0 var(--teal-pale)}
.success h2{margin-right:0}
.success h2 span{color:var(--teal)}
.success p{color:var(--muted)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-paused{opacity:.65;text-decoration-style:dashed}
/* product surface identities */
.product-card[data-product-category="gsm"] .product-visual{background:linear-gradient(135deg,#dceced 0 48%,#c8e0e2 48% 52%,#dceced 52% 100%)}
.product-card[data-product-category="pc"] .product-visual{background:linear-gradient(90deg,#dfe3df 1px,transparent 1px),linear-gradient(#dfe3df 1px,#ecece7 1px);background-size:18px 18px}
.product-card[data-product-category="school"] .product-visual{background:repeating-linear-gradient(0deg,#f0eddf 0 22px,#d8d2b6 22px 23px)}
.product-visual:before{content:"";position:absolute;right:10px;top:9px;z-index:1;font-family:var(--display);font-size:var(--fs-xs);font-weight:950;letter-spacing:.12em;color:rgba(11,29,32,.32)}
.product-glyph{display:grid;place-items:center;min-width:72px;min-height:72px;padding:10px;border:2px solid currentColor;box-shadow:7px 7px 0 rgba(11,29,32,.10);transition:color .15s ease,transform .15s ease,box-shadow .15s ease}
.product-card:hover .product-glyph{transform:rotate(-2deg) translateY(-2px);box-shadow:9px 9px 0 rgba(0,107,120,.13)}
.empty-state{position:relative}
.empty-state:before{content:"//";position:absolute;left:14px;top:10px;font-family:var(--display);font-size:18px;font-weight:950;color:var(--brass-deep)}
.button.ghost{background:transparent;color:var(--ink)}
.button.ghost:hover{background:var(--ink);color:#fff}
.button.dark{border-color:var(--ink)}
/* detail polish */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(11,29,32,.035) 1px,transparent 1px);background-size:34px 100%}
.button,.add-button{transition:background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.button:hover,.add-button:hover{transform:translateY(-1px)}
.button:active,.add-button:active{transform:translateY(1px);box-shadow:none}
.hero{box-shadow:inset 0 -1px 0 #446065}
.hero-intro:after{content:"";display:inline-block;margin-top:22px;padding:5px 8px;border:1px solid #61777b;color:#9fb0b1;font-size:var(--fs-xs);font-weight:900;letter-spacing:.18em;transform:rotate(-1deg)}
.hero h1 span{position:relative;width:max-content;max-width:100%}
.hero h1 span:nth-child(2):after{content:"";position:absolute;left:4px;right:-14px;bottom:-3px;height:5px;background:var(--teal);z-index:-1;transform:skewX(-18deg)}
.hero-board{position:relative;isolation:isolate}
.hero-board:before{content:"";position:absolute;inset:7px;z-index:2;border:1px solid rgba(11,29,32,.15);pointer-events:none}
.hero-board:after{content:"";position:absolute;left:10px;right:10px;top:-5px;height:9px;z-index:3;background:radial-gradient(circle at 4px 4px,var(--ink) 0 1.5px,transparent 1.7px);background-size:16px 8px;opacity:.34;pointer-events:none}
.board-head{position:relative;padding-inline-start:18px}
.board-head:before{content:"";position:absolute;inset-inline-start:8px;top:50%;width:4px;height:4px;background:var(--brass);transform:translateY(-50%) rotate(45deg)}
.need-list>a:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--teal);transform:scaleY(0);transform-origin:center;transition:transform .14s ease}
.need-list>a:hover:before,.need-list>a:focus-visible:before{transform:scaleY(1)}
.need-list b{letter-spacing:-.01em}
.need-list i{font-weight:900;transition:transform .14s ease}
/* The glyph is a fixed ↗; mirror it so it points along the reading direction in Arabic. */
[dir="rtl"] .need-list i,[dir="rtl"] .request-list i{display:inline-block;transform:scaleX(-1)}
.need-list>a:hover i,.need-list>a:focus-visible i{transform:translate(2px,-2px)}
.section-index{display:flex;align-items:center;gap:12px}
.section-index:after{content:"";height:1px;flex:1;background:currentColor;opacity:.24}
.section-heading>p{border-inline-start:2px solid var(--teal);padding-inline-start:14px}
.dossiers-section .section-heading>p{border-inline-start-color:#282400}
.shop-toolbar{position:relative}
.shop-toolbar:after{content:"CATALOGUE";position:absolute;right:10px;bottom:-18px;background:var(--white);padding:1px 5px;font-size:var(--fs-xs);font-weight:950;letter-spacing:.12em;color:var(--muted)}
.filters button{position:relative}
.filters button.is-active:after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:2px;background:var(--brass)}
.stock-light{padding:0 6px;height:32px;border:1px solid var(--line);background:var(--white)}.product-card{position:relative}.product-card:hover{z-index:2}
.product-card:focus-within{z-index:2;box-shadow:0 0 0 2px var(--teal)}
.product-card.has-inquiry .product-bottom{flex-wrap:wrap}
.product-inquiry{order:3;flex:1 1 100%;padding-inline:10px;text-align:center;text-decoration:none;text-transform:none}
.product-visual img{transition:transform .24s ease,filter .24s ease}
.product-card:hover .product-visual img{transform:scale(1.035)}
.product-card:hover .product-glyph{color:var(--teal)}
.product-bottom{min-height:58px}
.add-button{box-shadow:3px 3px 0 var(--teal-pale)}
.workflow-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.workflow-card .card-actions{padding-top:18px;border-top:1px solid #4e686d}
.workflow-card .button.primary{box-shadow:4px 4px 0 rgba(104,217,225,.22)}
.repair-card .button.primary{box-shadow:4px 4px 0 rgba(176,159,24,.28)}
.plain-steps li{transition:padding .14s ease,background .14s ease}
.plain-steps li:hover{padding-inline-start:8px;background:rgba(255,255,255,.025)}
.request-list>a{transition:background .14s ease,padding .14s ease}
.request-list>a i,.service-list a{transition:transform .14s ease,color .14s ease}
.request-list>a:hover i,.request-list>a:focus-visible i{transform:translate(3px,-3px)}
.service-list article{position:relative;transition:background .14s ease,padding .14s ease}
.service-list article:before{content:"";position:absolute;inset-inline-start:0;top:50%;width:5px;height:5px;background:var(--teal);transform:translateY(-50%) rotate(45deg);opacity:.45}
.service-list article:hover:before{opacity:1}
.service-list article:hover a{transform:translateX(3px)}
.local-section{background:var(--white)}
.local-stamp{position:relative}
.local-stamp:after{content:"";position:absolute;left:4px;right:8px;bottom:-20px;height:5px;background:var(--brass);transform:rotate(1deg)}
.store-details>div{transition:background .14s ease,padding .14s ease}
.store-details>div:hover{background:rgba(0,107,120,.04);padding-left:8px;padding-right:8px}
.footer-brand{position:relative;padding-inline-start:8px}
.footer-brand:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--brass)}
.checkout-dialog input::placeholder,.checkout-dialog textarea::placeholder,.search input::placeholder{color:#7a8788;opacity:1}
.choice input{accent-color:var(--teal)}
.choice{transition:border-color .14s ease,background .14s ease}
.choice:has(input:checked){border-color:var(--selected-line);background:var(--selected-bg)}
.cart-line{position:relative}.cart-line:before{position:absolute;inset-inline-start:0;top:0;width:22px;height:2px;background:var(--brass)}
@supports not selector(:has(*)){.choice:focus-within{border-color:var(--teal);background:#edf6f5}}
@media (max-width:1100px){.local-section{grid-template-columns:.6fr 1fr}.local-stamp{grid-row:1/3}.store-details{grid-column:2}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:980px){.hero{grid-template-columns:1fr;gap:32px}.hero-intro{max-width:760px}.hero-board{max-width:720px;transform:none}.hero h1{font-size:clamp(58px,12vw,92px)}.shop-toolbar{grid-template-columns:1fr auto}.stock-light{grid-column:1/-1}.workflows{grid-template-columns:1fr}.workflow-card:first-child{border-inline-end:0;border-bottom:1px solid #587074}.compact-heading{grid-template-columns:1fr;gap:8px}.local-section{grid-template-columns:1fr 1fr}.local-stamp{grid-row:auto}.store-details{grid-column:1/-1}}
@media (max-width:700px){:root{--pad:18px}.hero{padding-top:34px;padding-bottom:46px}.hero h1{font-size:clamp(48px,15vw,70px);margin-bottom:24px}.lede{font-size:15px}.hero-proof{display:none}.hero-board{box-shadow:7px 7px 0 var(--brass)}.need-list>a{padding:14px 12px}.board-foot{font-size:var(--fs-xs)}.shop-section,.workflow-card,.dossiers-section,.more-services,.local-section{padding-top:58px;padding-bottom:62px}.section-heading{grid-template-columns:1fr;gap:16px}.section-heading h2,.compact-heading h2,.local-section h2{font-size:clamp(40px,12vw,58px)}.shop-toolbar{grid-template-columns:1fr}.filters{padding-bottom:2px}.stock-light{grid-column:auto}.product-grid{grid-template-columns:1fr 1fr}.product-copy p{display:none}.workflow-card{padding-inline:18px}.request-list>a{grid-template-columns:82px 1fr 20px}.service-list article{align-items:start}.local-section{grid-template-columns:1fr}.local-stamp{font-size:76px}.store-details{grid-column:auto}.local-actions{align-items:stretch}.local-actions .button{flex:1 1 auto}.field-grid{grid-template-columns:1fr}.checkout-warning{grid-template-columns:1fr}footer{grid-template-columns:1fr;gap:22px}.footer-meta{justify-items:start;text-align:start}}
@media (max-width:440px){.need-list>a{grid-template-columns:28px 1fr 18px}.need-list small{font-size:var(--fs-xs)}.board-head,.board-foot{padding-inline:10px}.board-foot span:first-child{max-width:220px}.product-grid{grid-template-columns:1fr}.product-visual{aspect-ratio:16/9}.request-list>a{grid-template-columns:1fr 20px}.request-list>a>span{grid-column:1/-1}.store-details>div{grid-template-columns:80px 1fr}.card-actions .button{width:100%}.hero h1{font-size:47px}.section-index{margin-bottom:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
/* Darija-first storefront — coordinator polish pass 2026-08-28 */

[lang="ary"]{font-family:var(--arabic);letter-spacing:0;text-transform:none}
[lang="fr"]{direction:ltr}
small[lang="fr"]{display:block;font-family:var(--sans);font-weight:650;letter-spacing:.01em;text-transform:none;line-height:1.25}
/* This span holds the city name, which is Arabic on the Darija page and the Latin word
   "Oujda" on the French one. Applying the Arabic webfont unconditionally made a French page
   download 55 KB of Noto to render five Latin letters. */
.darija{font-weight:760;line-height:1.65}
html[data-lang="ary"] .darija,html[lang="ary"] .darija{font-family:var(--arabic)}
.skip{display:grid;gap:2px}
.skip small{font-size:var(--fs-xs);color:var(--muted)}
:focus-visible{outline-color:#cf694f}
.dossiers-section :focus-visible,footer :focus-visible{outline-color:#ffd7cd}
.eyebrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--teal);font-size:12px;letter-spacing:0;text-transform:none}
.eyebrow small{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.76}
.hero{grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);padding-top:clamp(48px,6.5vw,92px);background:#08191d}
.hero:after,.hero-intro:after{content:none}
.hero h1{font-family:var(--arabic);font-size:clamp(58px,7.2vw,102px);font-weight:800;line-height:1;letter-spacing:0;text-transform:none;margin-bottom:14px;max-width:820px;text-align:start}
.hero h1 span,.hero h1 em{width:auto!important;max-width:none;direction:inherit}
.hero h1 em{color:#ff8f72}
.hero h1 span:nth-child(2):after{background:var(--teal);height:4px;left:10%;right:5%;bottom:-2px}
.fr-translation{margin:0 0 24px;color:#8fa6aa;font-family:var(--display);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.lede{font-size:clamp(17px,1.55vw,20px);line-height:1.75;text-align:start;border-inline-start:4px solid var(--teal-hi);padding-inline-start:18px;max-width:700px}
.hero-proof{direction:inherit}
.hero-proof>span{grid-template-columns:auto 1fr;padding:13px 0;padding-inline-end:13px}
.hero-proof>span+span{border-inline-start:1px solid #526569;padding-inline-start:13px;padding-inline-end:0}
.hero-proof>span>span{display:block;padding:0;border:0!important}.hero-proof strong{display:block;color:#f4f7f6}
.hero-proof small{margin-top:3px;font-size:var(--fs-xs);color:#8fa3a6}
.hero-board{box-shadow:12px 12px 0 var(--accent);background:#f5f1e8}
.board-head{padding:11px 15px}
.board-head>span,.board-foot>span{display:grid;gap:2px}
.board-head b{font-family:var(--arabic);font-size:12px}
.board-head small{font-size:var(--fs-xs);color:#d5f3f3}
.board-foot b{font-family:var(--arabic);font-size:var(--fs-xs)}
.board-foot small{font-size:var(--fs-xs);color:var(--muted)}
.board-head:before{background:var(--accent)}
.need-list>a{grid-template-columns:38px 1fr 24px;padding:18px 16px}
.need-list>a>span:nth-child(2){text-align:start}.need-list b{font-family:var(--arabic);font-size:16px}
.need-list small{text-align:start;font-size:var(--fs-xs);color:#657477;margin-top:5px}
.need-icon{color:var(--accent-deep)}
.section-heading h2,.compact-heading h2,.local-section h2{font-family:var(--arabic);letter-spacing:-.015em;text-transform:none;line-height:1.05}
.section-heading h2>span,.compact-heading h2>span,.local-section h2>span{display:block;text-align:start}
.section-heading h2>small,.compact-heading h2>small,.local-section h2>small{display:block;margin-top:10px;font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.section-heading>p{text-align:start;border-inline-start:2px solid var(--teal);padding-inline-start:14px}
.section-heading>p small{margin-top:5px;color:var(--muted)}
.section-index{font-family:var(--arabic);letter-spacing:.03em;text-transform:none}

.shop-toolbar:after{content:"STOCK / طلب مباشر"}
.search input{text-align:start}
.product-meta .limited{color:var(--accent-deep)}
.add-button{background:var(--accent);color:#fff;border-color:#713024;text-transform:none}
.add-button:hover,.add-button:focus-visible{background:var(--teal);border-color:var(--teal)}
.empty-state:before{color:var(--accent-deep)}
.empty-state b{font-family:var(--arabic);font-size:19px}
.empty-state p span{display:block}
.empty-state p small{margin-top:4px}
.workflows{background:#071719}
.workflow-card{padding-top:84px}
.print-card{background:#0b3136}
.repair-card{background:#15272b}
.workflow-card header{text-align:start}
.workflow-card header h2{font-family:var(--arabic);font-size:clamp(42px,4.4vw,64px);line-height:1.05;letter-spacing:-.015em;text-transform:none;margin-left:auto}
.workflow-card header h2>span{display:block}
.workflow-card header h2>small{display:block;margin-top:10px;font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:#91a8ab}
.workflow-card header>p:not(.eyebrow){margin-left:auto;line-height:1.75}
.workflow-card header>p:not(.eyebrow)>span{display:block}
.workflow-card header>p:not(.eyebrow)>small{margin-top:5px;color:#91a8ab}
.repair-card .eyebrow{color:#ff9f89}
.repair-card .plain-steps li>b{border-color:#ff9f89;color:#ff9f89}
.plain-steps li{grid-template-columns:32px 1fr}
.plain-steps li>span{text-align:start}
.plain-steps strong{font-family:var(--arabic);font-size:13px;line-height:1.45}
.plain-steps small{font-size:var(--fs-xs);direction:ltr}
.workflow-card .button,.workflow-card .text-action{display:grid;text-align:center}
.workflow-card .button small,.workflow-card .text-action small{font-size:var(--fs-xs);margin-top:2px}
.workflow-card .button.primary:hover{background:var(--accent);border-color:var(--accent)}
.repair-card .button.primary{box-shadow:4px 4px 0 rgba(204,98,75,.34)}
.dossiers-section{background:var(--accent);color:#1c1715;border-color:#713024}
.dossiers-section:after{content:"DOSSIERS";color:rgba(255,255,255,.11)}
.dossiers-section .eyebrow{color:#321912}
.dossiers-section .section-heading>p{color:#2f1b17;border-inline-start-color:#5d241a}
.dossiers-section .section-heading h2>small{color:#53281f}
.request-list{border-top-color:#4f2119}
.request-list>a{border-bottom-color:rgba(79,33,25,.46)}
.request-list>a:hover,.request-list>a:focus-visible{background:#e68169}
.request-list>a>span{color:#4d2018}
.request-list>a>div{text-align:start}
.request-list b{font-family:var(--arabic);font-size:25px;line-height:1.3;text-transform:none}
.request-list small{font-size:var(--fs-xs);color:#54271e;direction:ltr}
.more-services{background:#ece9e1}
.compact-heading{align-items:start}
.compact-heading .eyebrow{align-self:start}
.compact-heading h2{text-align:start}
.service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink)}
.service-list a.service-item{min-height:132px;display:grid;grid-template-columns:58px 1fr 24px;align-items:center;gap:16px;padding:20px;background:var(--white);text-decoration:none;position:relative;transition:background .14s ease,transform .14s ease,box-shadow .14s ease}
.service-list a.service-item:hover,.service-list a.service-item:focus-visible{z-index:2;background:#f6f7f2;box-shadow:inset 5px 0 0 var(--teal);transform:translateY(-1px)}
.service-list a.service-item:nth-child(5){grid-column:1/-1}
.service-code{display:grid;place-items:center;min-height:44px;border:1px solid var(--ink);background:#e1ecec;font-family:var(--display);font-size:var(--fs-xs);font-weight:950;letter-spacing:.08em}
.service-item>span:nth-child(2){text-align:start}
.service-item b{display:block;font-family:var(--arabic);font-size:18px;line-height:1.35}
.service-item small{font-size:var(--fs-xs);color:var(--muted);margin-top:5px;direction:ltr}
.service-item i{font-style:normal;color:var(--teal);font-size:21px;font-weight:900}
.service-item.is-paused{opacity:.72}
.service-item.is-paused .service-code{background:#e5e2da}
.local-section{grid-template-columns:minmax(190px,.58fr) minmax(0,1fr) minmax(340px,.78fr)}
.local-stamp{font-size:clamp(58px,7.4vw,98px);color:var(--ink);text-shadow:5px 5px 0 var(--teal-pale);letter-spacing:-.055em}
.local-stamp:after{background:var(--accent)}
.local-copy{text-align:start}
.local-copy>p:not(.eyebrow){margin-left:auto;line-height:1.75}
.local-copy>p:not(.eyebrow)>span{display:block}
.local-copy>p:not(.eyebrow)>small{margin-top:5px}
.local-actions{justify-content:flex-end}
.local-actions .button{display:grid;text-align:center}
.local-actions .button small{font-size:var(--fs-xs)}
.store-details>div{grid-template-columns:102px 1fr}
.store-details dt{text-align:start}
.store-details dt span{display:block;font-family:var(--arabic);font-size:var(--fs-xs);color:var(--ink)}
.store-details dt small{font-size:var(--fs-xs)}
.store-details dd{text-align:start}
.store-details dd>span{display:block}
.store-details dd>small{margin-top:4px}.store-details .address{font-family:var(--arabic)}
.footer-brand:before{background:var(--accent)}
.footer-links a,.footer-meta a{display:grid;gap:2px}
.footer-links a span,.footer-meta a span{font-family:var(--arabic);font-size:12px}
.footer-links a small,.footer-meta a small{font-size:var(--fs-xs);color:#94a8aa}
.noscript{background:#f9ded7;border-color:#8b3b2b;color:#482019}
.noscript span{display:block;text-align:start}
.noscript small{margin-top:3px}
.cart-drawer{border-left-color:var(--teal)}
.cart-head{text-align:start}
.cart-head h2>span{display:block}
.cart-head h2 small{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.cart-empty span{display:block;font-family:var(--arabic);font-weight:760}
.cart-empty small{margin-top:3px}
.cart-footer .total>span{text-align:start}
.cart-footer .total>span>span{display:block;font-family:var(--arabic);font-weight:800}
.cart-footer p{text-align:start}
.cart-footer p span{display:block;font-family:var(--arabic);font-weight:700}
.cart-footer p small{margin-top:4px}
.cart-footer .button small{font-size:var(--fs-xs)}
.checkout-dialog form{text-align:start}
.checkout-dialog h2>span{display:block}
.checkout-dialog h2>small{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.dialog-lede span{display:block;font-family:var(--arabic);font-weight:700}
.dialog-lede small{margin-top:4px}
.checkout-dialog label>span[lang="ary"],.checkout-dialog legend>span[lang="ary"]{font-size:12px}
.checkout-dialog label>small,.checkout-dialog legend>small{font-size:var(--fs-xs);margin-top:2px}
.checkout-dialog input:not([type=radio]),.checkout-dialog textarea{text-align:start}
.choice{text-align:start}
.checkout-warning{border-inline-start-color:var(--accent);text-align:start}
.checkout-warning b>span,.checkout-warning>span>span{display:block;font-family:var(--arabic);font-weight:800}
.checkout-warning small{margin-top:4px;color:#a9babc}
.success h2{font-family:var(--arabic);text-transform:none}
.success .button{display:grid}
.success .button small{font-size:var(--fs-xs)}
.success-mark{box-shadow:5px 5px 0 var(--accent-soft)}
.cart-line:before{background:var(--accent)}
@media (max-width:1100px){.local-section{grid-template-columns:.45fr 1fr}.service-list{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.hero{grid-template-columns:1fr}.hero-intro{max-width:820px}.hero-board{max-width:760px;margin-left:auto;margin-right:auto}.hero h1{font-size:clamp(60px,11.5vw,96px)}.local-section{grid-template-columns:1fr 1fr}.local-stamp{grid-row:auto}.store-details{grid-column:1/-1}}
@media (max-width:700px){.hero{padding-top:40px}.hero h1{font-size:clamp(50px,14.4vw,68px);line-height:.98}.fr-translation{font-size:var(--fs-xs);margin-bottom:18px}.lede{font-size:16px;line-height:1.7}.hero-board{box-shadow:7px 7px 0 var(--accent)}.section-heading h2,.compact-heading h2,.local-section h2{font-size:clamp(42px,11vw,58px)}.section-heading>p{font-size:12px}.workflow-card header h2{font-size:clamp(40px,10vw,56px)}.service-list{grid-template-columns:1fr}.service-list a.service-item:nth-child(5){grid-column:auto}.service-list a.service-item{min-height:110px}.local-copy{text-align:start}.local-stamp{font-size:64px}.local-actions{justify-content:stretch}.checkout-dialog h2{font-size:clamp(34px,9vw,48px)}}
@media (max-width:440px){.hero h1{font-size:45px}.need-list>a{grid-template-columns:28px 1fr 18px}.need-list b{font-size:15px}.need-list small{font-size:var(--fs-xs)}.request-list>a{grid-template-columns:1fr 20px}.request-list>a>span{grid-column:1/-1}.service-list a.service-item{grid-template-columns:50px 1fr 18px;padding:16px;gap:12px}.service-item b{font-size:16px}.store-details>div{grid-template-columns:84px 1fr}}
/* narrow-width containment after bilingual expansion */
@media (max-width:440px){.stock-light{white-space:normal;line-height:1.25;min-height:44px;height:auto;padding-block:6px}}
@media (max-width:700px){.local-section{grid-template-columns:minmax(0,1fr)}.local-stamp,.local-copy,.store-details{grid-column:auto;min-width:0}.store-details{width:100%}}
/* computed contrast correction for the oxide accent and bilingual microcopy */

.add-button{color:#fff}
.need-list small{color:#526266}
.board-foot small{color:#4f6063}
.dossiers-section{color:#fff;border-color:#63291e}
.dossiers-section .eyebrow,.dossiers-section .section-heading>p,.dossiers-section .section-heading h2>small{color:#fff}
.dossiers-section .section-heading>p{border-inline-start-color:rgba(255,255,255,.72)}
.request-list{border-top-color:#fff}
.request-list>a{border-bottom-color:rgba(255,255,255,.5)}
.request-list>a>span,.request-list small{color:#fff}
.request-list>a:hover,.request-list>a:focus-visible{background:#843728}
.dossiers-section .section-heading>p small{color:#fff}
/* independent task marks + non-destructive route-state badges */
.need-list>a{grid-template-columns:54px 1fr 24px}
.need-icon{font-family:var(--arabic);font-size:12px;line-height:1.2;text-align:center;border:1px solid currentColor;padding:7px 4px;min-width:48px}
.workflow-number{font-size:clamp(44px,7vw,92px);letter-spacing:-.04em}
a[data-service-route],a[data-print-route]{position:relative}
@media (max-width:440px){.need-list>a{grid-template-columns:46px 1fr 18px}.need-icon{min-width:42px;font-size:var(--fs-xs);padding-inline:2px}}
.checkout-governance{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);background:#f4f1e9}
.checkout-governance .privacy-consent{margin:0;font-size:var(--fs-xs);line-height:1.5;text-align:start}
.checkout-governance a{text-decoration:underline;text-underline-offset:2px;font-weight:850}
/* language-direction hardening 2026-08-28 */
html[data-lang="ary"] body{font-family:var(--arabic)}
html[data-lang="ary"] .need-list>a,html[data-lang="ary"] .plain-steps li,html[data-lang="ary"] .request-list>a,html[data-lang="ary"] .service-list a.service-item{direction:rtl}
html[data-lang="fr"] .need-list>a,html[data-lang="fr"] .plain-steps li,html[data-lang="fr"] .request-list>a,html[data-lang="fr"] .service-list a.service-item{direction:ltr}


html[data-lang="ary"] .shop-toolbar:after{content:"المنتوجات الكاينة";font-family:var(--arabic);letter-spacing:0}
html[data-lang="fr"] .shop-toolbar:after{content:"STOCK / DISPONIBILITÉ"}
html[data-lang="ary"] .dossiers-section:after{content:"الخدمات";font-family:var(--arabic);letter-spacing:0}
html[data-lang="fr"] .dossiers-section:after{content:"DOSSIERS"}
/* compact language control + mobile header hardening 2026-08-28 */
/* bidi component polish 2026-08-28 */
html[data-lang="ary"] .hero-proof{direction:rtl}
html[data-lang="fr"] .hero-proof{direction:ltr}
/* logical inline divider hardening 2026-08-28 */
.section-heading>p{border-left:0;border-right:0;border-inline-start:2px solid var(--teal);padding-left:0;padding-right:0;padding-inline-start:14px}
.dossiers-section .section-heading>p{border-inline-start-color:rgba(255,255,255,.72)}
.hero-proof>span{padding:13px 0;padding-inline-end:13px}
.hero-proof>span+span{border-left:0;border-right:0;border-inline-start:1px solid #526569;padding-left:0;padding-right:0;padding-inline-start:13px;padding-inline-end:0}
.hero .eyebrow{display:inline-flex;width:fit-content;max-width:100%;margin:0 0 22px;line-height:1.35;overflow-wrap:anywhere}
.hero h1{display:grid;gap:.035em;line-height:1.12;margin-bottom:22px;overflow:visible}
.hero h1 span{min-width:0}
.hero h1 span:nth-child(2):after{content:none}
/* French display-face isolation: Arabic display face is Darija-only. */
html[data-lang="fr"] body{font-family:var(--sans)}
html[data-lang="fr"] .hero h1,html[data-lang="fr"] .board-head b,html[data-lang="fr"] .board-foot b,html[data-lang="fr"] .need-list b,html[data-lang="fr"] .section-heading h2,html[data-lang="fr"] .compact-heading h2,html[data-lang="fr"] .local-section h2,html[data-lang="fr"] .section-index,html[data-lang="fr"] .empty-state b,html[data-lang="fr"] .workflow-card header h2,html[data-lang="fr"] .plain-steps strong,html[data-lang="fr"] .request-list b,html[data-lang="fr"] .service-item b,html[data-lang="fr"] .store-details dt span,html[data-lang="fr"] .store-details .address,html[data-lang="fr"] .footer-links a span,html[data-lang="fr"] .footer-meta a span,html[data-lang="fr"] .cart-head h2,html[data-lang="fr"] .cart-empty span,html[data-lang="fr"] .cart-footer .total>span>span,html[data-lang="fr"] .cart-footer p span,html[data-lang="fr"] .checkout-dialog h2,html[data-lang="fr"] .dialog-lede span,html[data-lang="fr"] .checkout-warning b>span,html[data-lang="fr"] .checkout-warning>span>span,html[data-lang="fr"] .success h2{font-family:var(--display)}
/* H0 headline cadence: scale from the actual copy column, not the viewport breakpoint. */
.hero-intro{container-type:inline-size}
.hero h1{font-size:clamp(45px,9.5cqi,76px)}
/* Exact catalog identity values stay case-preserving in customer review surfaces. */
.product-meta>span:first-child,.cart-ref,.cart-category{text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
/* Stable public category discriminator for exact cart review. */
.cart-category-code{text-transform:none;letter-spacing:0;overflow-wrap:anywhere;font-variant-ligatures:none}
/* A stale-order refresh names any line removed before deliberate re-consent. */
.cart-review-reason{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(111,53,17,.28)}
.cart-review-reason-text,.cart-review-guidance{display:block;margin-top:4px;overflow-wrap:anywhere}
.cart-review-reason-text{font-weight:900}
.cart-review-guidance{font-weight:750}
.cart-review-removed{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(111,53,17,.28)}
.cart-review-removed-item{display:block;margin-top:4px;font-weight:850;overflow-wrap:anywhere;text-transform:none;letter-spacing:0}
/* truthw narrow header legibility: keep contact receipt and brand untruncated */
/* truthx coordinator contact refinement: local phone legibility + icon-only WhatsApp header action */
/* ===========================================================================
   Design sweep 2026-08-31 - storefront
   Fixes three layout defects found on device, then styles the new catalog
   affordances (availability badge, card stepper, result count, action bar,
   checkout recap). Placed last so it settles the earlier polish layers.
   =========================================================================== */
/* --- defect: category chips overlapped each other on narrow screens --------
   .filters is a horizontal scroller, but its buttons kept the default
   flex-shrink:1, so long category names were compressed past their content
   width and the labels collided instead of scrolling. */
.filters{scrollbar-width:thin;scroll-snap-type:x proximity;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.filters button{flex:0 0 auto;scroll-snap-align:start}
/* --- defect: product CTAs did not line up across a row --------------------
   .product-copy is a column flexbox, but the bottom row was not pinned, so a
   card with a shorter description floated its price above its neighbours. */
.product-bottom{margin-top:auto}
/* --- defect: a sold-out card showed a dead button and a separate link ------
   When ordering is impossible the contact route is the only real action, so it
   takes the primary slot instead of sitting under a disabled button. */
.product-card.has-inquiry .add-button{display:none}
.product-card.has-inquiry .product-bottom{flex-wrap:nowrap}
.product-inquiry{order:0;flex:0 1 auto;padding-inline:12px;text-align:center}
/* --- availability as a badge, not 8px grey text ---------------------------- */
.product-visual{isolation:isolate}
.product-availability{position:absolute;z-index:2;top:8px;right:8px;
  display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;
  border:1px solid currentColor;background:var(--white);
  font-size:var(--fs-xs);font-weight:900;line-height:1;letter-spacing:0;white-space:nowrap;
  box-shadow:2px 2px 0 rgba(11,29,32,.12)}
.product-availability[data-availability="in_stock"]{color:#0d5c3f;border-color:#0d5c3f}
.product-availability[data-availability="low"]{color:var(--accent-deep);border-color:var(--accent-deep);background:#fdf1ed}
.product-availability[data-availability="ask"]{color:#2b4a4f;border-color:#5d7377}
.product-availability[data-availability="out"]{color:#fff;background:#5c6b6d;border-color:#3d4b4d;box-shadow:none}
/* --- card quantity stepper -------------------------------------------------
   Building a basket of three notebooks should be three taps on the card, not
   three round-trips through the drawer. */
.card-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--ink);background:var(--white);
  box-shadow:3px 3px 0 var(--teal-pale)}
.card-stepper button{min-width:40px;min-height:40px;border:0;background:transparent;color:var(--ink);
  font-size:17px;font-weight:900;line-height:1;cursor:pointer;padding:0}
.card-stepper button:hover:not(:disabled){background:var(--teal);color:#fff}
.card-stepper button:disabled{opacity:.35;cursor:not-allowed}
.card-stepper-value{display:inline-grid;place-items:center;min-width:38px;padding-inline:4px;
  border-inline:1px solid var(--line);font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.product-card.is-in-cart{box-shadow:0 0 0 2px var(--teal)}
.product-card.is-in-cart .product-visual:after{border-color:var(--teal)}
/* --- search: a way back out ------------------------------------------------ */
.search{position:relative;display:block}
.search input{padding-inline-end:44px}.search-clear{position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%);display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.search-clear:hover{color:var(--accent-deep)}
/* --- the result count replaces a decorative "STOCK" tag with real feedback -- */
.shop-toolbar:after{content:none}.result-count{margin:0;padding-top:2px;color:var(--muted);line-height:1.3}
.result-count:empty{display:none}


@media (max-width:700px){}
/* --- sticky action bar (narrow screens) ------------------------------------
   Thumb-reachable basket total plus the two routes a local shop actually
   converts on: WhatsApp and a phone call. */
.quickbar{position:fixed;z-index:120;inset-inline:0;bottom:0;display:none;align-items:stretch;gap:1px;
  padding:0;background:var(--ink);border-top:1px solid var(--ink);
  box-shadow:0 -8px 24px rgba(7,20,23,.18)}
.quickbar-contact{display:grid;place-items:center;width:60px;min-height:56px;flex:0 0 auto;
  background:#123036;color:#fff}
.quickbar-contact svg{width:23px;height:23px;display:block}
.quickbar-contact[data-store-whatsapp]{background:#25d366;color:#04301c}
.quickbar-contact:hover,.quickbar-contact:focus-visible{background:var(--teal);color:#fff}
.quickbar-cart{display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 16px;border:0;background:var(--accent);color:#fff;
  font-size:14px;font-weight:900;cursor:pointer}
.quickbar-cart:hover,.quickbar-cart:focus-visible{background:var(--teal)}
.quickbar-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;
  background:#fff;color:var(--ink);font-size:12px;font-weight:900;font-variant-numeric:tabular-nums}
.quickbar-total{margin-inline-start:auto;font-size:15px;font-weight:900;letter-spacing:-.01em}
.quickbar-total:empty{display:none}
@media (max-width:700px){.quickbar:not([hidden]){display:flex}body.has-quickbar{padding-bottom:57px}body.has-quickbar .cart-drawer{bottom:0}}
/* --- checkout: show what is being ordered, not just the total -------------- */
.checkout-recap{margin:0 0 14px;border:1px solid var(--line);background:#faf8f1}.checkout-recap-head{margin:0;border-bottom:1px solid var(--line);letter-spacing:.04em}.checkout-recap-list{list-style:none;margin:0}.checkout-recap-list li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid rgba(11,29,32,.08)}
.checkout-recap-list li:first-child{border-top:0}
.checkout-recap-qty{flex:0 0 auto;min-width:30px;color:var(--muted);font-weight:900;
  font-variant-numeric:tabular-nums}
.checkout-recap-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:750}
.checkout-recap-amount{flex:0 0 auto;font-weight:900;font-variant-numeric:tabular-nums}
/* --- consent copy was 10px; it is the part a customer is agreeing to ------- */
.checkout-governance .privacy-consent{font-size:12px;line-height:1.6}
/* --- focus visibility on the new controls ---------------------------------- */
.card-stepper button:focus-visible,.search-clear:focus-visible,.quickbar-cart:focus-visible,.quickbar-contact:focus-visible{outline:3px solid var(--accent);outline-offset:2px;z-index:1}
@media (prefers-reduced-motion:reduce){.card-stepper button,.quickbar-cart,.quickbar-contact{transition:none!important}}
.product-category{max-width:calc(100% - 92px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- image placeholder: quieter -------------------------------------------
   The monogram is only a stand-in until the shop uploads a photo; two letters
   from a product name repeat often ("CA" for three different items), so it
   should read as an absent image rather than as a code the customer must parse. */
.product-glyph{min-width:0;min-height:0;padding:0;border:0;box-shadow:none;
  font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:.02em;color:rgba(11,29,32,.26)}
.product-card:hover .product-glyph{transform:none;box-shadow:none;color:rgba(0,107,120,.42)}
.product-visual:after{opacity:.55}
/* --- phone catalogue density -----------------------------------------------
   One full-width card per row made each product about 550px tall, so a twelve
   line catalogue became a very long scroll. Two compact columns let a customer
   scan the shelf; the visual keeps a squarer crop so the card stays short. */
@media (max-width:440px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-visual{aspect-ratio:1/1}.product-copy{padding:11px}.product-copy h3{font-size:14px;line-height:1.25;margin:9px 0 4px}.product-copy p{display:none}.product-meta{font-size:var(--fs-xs)}.product-category{max-width:calc(100% - 66px);font-size:var(--fs-xs);padding:2px 5px}.product-availability{top:6px;right:6px;min-height:19px;padding:2px 5px;font-size:var(--fs-xs);box-shadow:none}.product-bottom{flex-wrap:wrap;gap:8px;min-height:0}.product-bottom .price{font-size:17px}.add-button,.card-stepper{flex:1 1 100%}.card-stepper{justify-content:space-between}.add-button{min-height:40px;padding-inline:8px;font-size:var(--fs-xs)}.product-inquiry{flex:1 1 100%;min-height:40px;font-size:var(--fs-xs)}}
@media (max-width:330px){.product-grid{grid-template-columns:1fr}.product-visual{aspect-ratio:16/9}}
/* A soft edge on the category scroller so it reads as scrollable rather than clipped. */
.shop-toolbar .filters{position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
@media (min-width:981px){.shop-toolbar .filters{-webkit-mask-image:none;mask-image:none}}
/* ===========================================================================
   Storefront corrections 2026-08-31 (second round)
   =========================================================================== */
/* --- a gated service must not leave half a section empty --------------------
   .workflows is a two-column grid holding Print and Repair. Repair is gated off
   in this release, so the section rendered one card beside a large dead void
   and read as broken. Collapse to a single column whenever one card is hidden. */
.workflows:has(>.workflow-card[hidden]){grid-template-columns:minmax(0,1fr)}
.workflows:has(>.workflow-card[hidden]) .workflow-card:first-child{border-inline-end:0}
/* A single card must not stretch its measure across the whole page: cap the column and
   centre it, and drop the auto margin that only made sense inside a narrow half-width card. */
.workflows:has(>.workflow-card[hidden]) .workflow-card{padding-inline:var(--pad)}
.workflows:has(>.workflow-card[hidden]) .workflow-card>header,.workflows:has(>.workflow-card[hidden]) .workflow-card>.plain-steps,.workflows:has(>.workflow-card[hidden]) .workflow-card>.card-actions{max-width:760px;margin-inline:auto}
.workflows:has(>.workflow-card[hidden]) .workflow-card header h2{margin-left:0;margin-inline-end:auto}
.workflows:has(>.workflow-card[hidden]) .workflow-card header>p{margin-left:0;margin-right:0;margin-inline-end:auto}
@supports not selector(:has(*)){.workflows{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}}
/* --- gated families must not leave a half-empty cell -----------------------
   .service-list was a fixed two-column grid over five links. Three of them are
   hidden in this release, so the row ended with an empty cell showing the grid
   background through the gap. A wrapping flex row lets the last item take the
   remaining width whatever the shop has switched on. */
.service-list{display:flex;flex-wrap:wrap;gap:1px}
.service-list a.service-item{flex:1 1 clamp(260px,32%,420px);min-width:0}
@media (max-width:700px){.service-list a.service-item{flex:1 1 100%}}

/* ---- Homepage browse tabs -------------------------------------------------
   A real tab strip, not cards: the whole block is one dark shell, and the
   selected tab is cut out of it in paper so it runs straight into the panel
   below with no seam. Panels ship expanded, so the page works with no JS;
   app.js adds .is-tabbed, which is what collapses them. */
.browse{margin:48px 0 44px}
.browse.is-tabbed{background:var(--ink);border:1px solid var(--ink)}
.browse:not(.is-tabbed) .browse-tabs{display:none}.browse-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.browse-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;
  min-height:68px;padding:16px 14px;cursor:pointer;text-align:start;
  background:transparent;border:0;border-inline-end:1px solid rgba(255,253,247,.13);
  color:rgba(255,253,247,.6);
  transition:color .18s ease,background-color .18s ease}
.browse-tab:last-of-type{border-inline-end:0}
.browse-tab .tab-icon{width:21px;height:21px;flex:0 0 auto;transition:color .18s ease}
.browse-tab .tab-text{display:grid;gap:2px;min-width:0}.browse-tab .tab-code{font-weight:900;text-transform:uppercase;color:inherit;opacity:.62}.browse-tab .tab-title{font-size:15px;text-overflow:ellipsis}
.browse-tab:hover{color:var(--white);background:rgba(255,253,247,.07)}
.browse-tab:focus-visible{outline:2px solid var(--brass);outline-offset:-3px}

/* Selected tab and its panel are literally the same surface. The four panels
   do not share a colour (shop is white, print and repair are dark, services is
   paper), so a tab takes the colour of the view it opens rather than a fixed
   one - both sides of the seam read from the same variable. */
.browse{--panel-shop:var(--shelf);--panel-print:#0b3136;--panel-repair:#15272b;--panel-services:var(--paper)}
.browse-tab.is-active{border-inline-end-color:transparent}
.browse-tab.is-active::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--brass)}
.browse-tab.is-active .tab-icon,.browse-tab.is-active .tab-code{color:var(--brass);opacity:1}
/* The print and repair panels are near-black, where brass falls to 2.4:1. Use the light brass
   tint on those two so the active tab label stays legible. */
.browse-tab[data-browse-tab="print"].is-active :is(.tab-icon,.tab-code),
.browse-tab[data-browse-tab="repair"].is-active :is(.tab-icon,.tab-code){color:var(--brass-hi)}

.browse-tab[data-browse-tab="shop"].is-active{background:var(--panel-shop);color:var(--ink)}
.browse-tab[data-browse-tab="print"].is-active{background:var(--panel-print);color:var(--white)}
.browse-tab[data-browse-tab="repair"].is-active{background:var(--panel-repair);color:var(--white)}
.browse-tab[data-browse-tab="services"].is-active{background:var(--panel-services);color:var(--ink)}

/* --panel-ground rides along with the background so the engraving always knows the exact
   colour it is being cut into. */
.browse.is-tabbed #shop{background:var(--panel-shop);--panel-ground:var(--panel-shop)}
.browse.is-tabbed #print{background:var(--panel-print);--panel-ground:var(--panel-print)}
.browse.is-tabbed #repair{background:var(--panel-repair);--panel-ground:var(--panel-repair)}
.browse.is-tabbed #services{background:var(--panel-services);--panel-ground:var(--panel-services)}

/* The 38px band around the panel was the white space wrapping the service.
   The panel keeps its own internal padding and runs edge to edge instead. */
.browse-panels{background:var(--paper)}
.browse.is-tabbed .browse-panels{background:transparent;padding:0}
.browse.is-tabbed .browse-panel[hidden]{display:none}
.browse.is-tabbed .browse-panel{margin:0}
.browse-panel{scroll-margin-top:90px}

@keyframes browsePanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.browse.is-tabbed .browse-panel:not([hidden]){animation:browsePanelIn .26s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .browse-tab{transition:none}
  .browse.is-tabbed .browse-panel:not([hidden]){animation:none}
}

/* Inline repair intake, inside the repair panel. */
.inline-intake{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.inline-intake-title{font-size:15px;font-weight:850;margin:0 0 14px}
.intake-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.intake-grid .field{display:grid;gap:6px;min-width:0}
.intake-grid .field.full{grid-column:1/-1}
.intake-grid .field>span{font-size:var(--fs-xs);font-weight:800;letter-spacing:.02em}
.intake-grid input{width:100%;padding:11px 12px;border:1px solid var(--line-dark);background:var(--white);color:var(--ink);font:inherit;font-size:14px}
.intake-grid input:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.intake-note{margin:13px 0 0;font-size:12px;color:var(--muted)}
.intake-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.intake-error{margin:13px 0 0;padding:11px 13px;border:1px solid var(--danger);color:var(--danger);background:var(--white);font-size:13px}
.intake-ok{margin-top:16px;padding:16px;border:1px solid var(--teal);background:var(--teal-pale);display:grid;gap:7px}
.intake-ok-line{margin:0;font-weight:800}
.intake-ok-ref{margin:0;font-size:19px;letter-spacing:.05em}
.intake-ok-ref b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

@media (max-width:980px){
  .browse{margin:34px 0 30px}
  .browse-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .browse-tab{min-height:62px}
  .browse-tab:nth-of-type(2){border-inline-end:0}
  .browse-tab:nth-of-type(-n+2){border-bottom:1px solid rgba(255,253,247,.13)}
  .browse-tab.is-active{border-bottom-color:transparent}
}
@media (max-width:820px){
  .intake-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* one scrollable row: still a tab strip, never a stack of blocks */
  .browse-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .browse-tabs::-webkit-scrollbar{display:none}
  .browse-tab{flex:0 0 auto;scroll-snap-align:start;min-height:56px;padding:14px 16px;gap:9px;
    border-inline-end:1px solid rgba(255,253,247,.13);border-bottom:0}
  .browse-tab .tab-code{display:none}
  .browse-tab .tab-title{font-size:14px}
  .browse-tab .tab-icon{width:19px;height:19px}
  .browse.is-tabbed .browse-panels{padding:20px 15px}
}

/* ---- Hero layout ----------------------------------------------------------
   Three children were auto-flowing into a two-column grid: intro and board both
   landed in column 1 and the proof strip alone in column 2, leaving column 2 /
   row 2 (512x343 at 1280) completely empty and pushing the tab strip below the
   fold. Place them explicitly instead: the text column stacks intro + proof and
   the board takes the whole second column.

   The two-column form holds down to ~700px (the board's content is only 272px
   wide), so the single-column switch happens there rather than at 980px, where
   it was stacking three tall blocks and making the hero 849px on a tablet. */
@media (min-width:701px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
    align-items:center;gap:clamp(26px,3.2vw,56px);
    padding-top:clamp(32px,3.6vw,58px);padding-bottom:clamp(34px,3.6vw,60px)}
  .hero-intro{grid-column:1;grid-row:1;align-self:end}
  .hero-proof{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  /* auto inline margins made it shrink-to-fit, leaving ~98px dead inside its
     own column; fill the column instead, capped so it stays readable wide. */
  .hero-board{grid-column:2;grid-row:1 / span 2;align-self:center;margin-block:0;
    width:100%;max-width:560px;margin-inline:auto}
}
/* Stacked layout: the headline was 258px on its own, so cap it and tighten. */
@media (max-width:700px){
  /* the strip must at least peek above the fold so it reads as reachable */
  .browse{margin-top:20px}
  .hero{gap:22px;padding-top:28px;padding-bottom:26px}
  .hero h1{font-size:clamp(38px,7.4cqi,54px)}
  .hero-proof{margin-top:18px}
  /* trim the card rows so the stacked hero is not needlessly tall on a phone */
  .need-list a{padding-block:13px}
  .board-head,.board-foot{padding-block:8px}
}
.browse{margin:36px var(--pad) 40px}   /* align with the hero/footer content edge */

/* ---- Dark panels: text palette --------------------------------------------
   The print and repair cards used to sit inside .workflows, which carried
   `color:#fff` for the whole block. Moving them into tab panels dropped that
   wrapper, so headings, step labels and form labels fell back to --ink and sat
   at 1.1:1 on their own dark background. Own the palette on the panel instead
   of inheriting it from an ancestor that may move again. */
.browse.is-tabbed #print,.browse.is-tabbed #repair{color:var(--white)}
.browse.is-tabbed #print h2,.browse.is-tabbed #repair h2,
.browse.is-tabbed #print h2 span,.browse.is-tabbed #repair h2 span,
.browse.is-tabbed #print .plain-steps strong,.browse.is-tabbed #repair .plain-steps strong,
.browse.is-tabbed #repair .intake-grid .field>span,
.browse.is-tabbed #repair .inline-intake-title{color:var(--white)}
/* supporting copy: lighter than body text but still above 4.5:1 on the panel */
.browse.is-tabbed #print .darija,.browse.is-tabbed #repair .darija,
.browse.is-tabbed #repair .intake-note,
.browse.is-tabbed #print .muted,.browse.is-tabbed #repair .muted{color:rgba(255,253,247,.78)}
.browse.is-tabbed #repair .inline-intake{border-top-color:rgba(255,253,247,.18)}
.browse.is-tabbed #repair .intake-grid input{background:var(--white);color:var(--ink);
  border-color:rgba(255,253,247,.28)}
.browse.is-tabbed #print .text-action,.browse.is-tabbed #repair .text-action{color:var(--teal-hi)}

/* ---- Tab panel rhythm -----------------------------------------------------
   The shell now carries the page's side inset, so the panels only need their
   own internal padding rather than a second full --pad on top of it. */
.browse.is-tabbed .browse-panel{padding-inline:clamp(20px,3vw,44px)}
.browse.is-tabbed .workflow-card{padding-block:clamp(30px,3.6vw,54px)}


/* Steps read as one horizontal band instead of a tall stacked list. */
.browse.is-tabbed .plain-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:22px 0 0;border-top:1px solid rgba(255,253,247,.2);border-bottom:1px solid rgba(255,253,247,.2)}
.browse.is-tabbed .plain-steps li{grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:10px;padding:13px 15px;border-bottom:0;border-inline-end:1px solid rgba(255,253,247,.13)}
.browse.is-tabbed .plain-steps li:last-of-type{border-inline-end:0}
.browse.is-tabbed .plain-steps li:hover{padding-inline-start:15px;background:rgba(255,255,255,.03)}
.browse.is-tabbed .plain-steps li>b{width:22px;height:22px;font-size:var(--fs-xs)}
.browse.is-tabbed .plain-steps strong{font-size:12px;line-height:1.35}
@media (max-width:860px){
  .browse.is-tabbed .plain-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .browse.is-tabbed .plain-steps li:nth-of-type(2n){border-inline-end:0}
  .browse.is-tabbed .plain-steps li:nth-of-type(-n+2){border-bottom:1px solid rgba(255,253,247,.13)}
}
@media (max-width:520px){
  .browse.is-tabbed .plain-steps{grid-template-columns:1fr}
  .browse.is-tabbed .plain-steps li{border-inline-end:0;border-bottom:1px solid rgba(255,253,247,.13)}
  .browse.is-tabbed .plain-steps li:last-of-type{border-bottom:0}
}

/* ---- Print panel: estimate, contact, pickup -------------------------------- */
.print-quote,.print-contact,.print-pickup{margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,253,247,.18)}
.print-quote-title{margin:0 0 13px;font-size:12px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal-hi)}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px}
.quote-grid .field{display:grid;gap:6px;min-width:0}
.quote-grid .field>span{font-size:var(--fs-xs);font-weight:800}
.quote-grid input,.quote-grid select{width:100%;padding:10px 11px;border:1px solid rgba(255,253,247,.3);
  background:var(--white);color:var(--ink);font:inherit;font-size:14px}
.quote-grid input:focus-visible,.quote-grid select:focus-visible{outline:2px solid var(--brass);outline-offset:-1px}
.quote-grid .field-check{grid-template-columns:auto 1fr;align-items:center;gap:9px}
.quote-grid .field-check input{width:18px;height:18px;padding:0}
.quote-out{display:grid;gap:5px;margin:16px 0 0}
.quote-out b{font-size:30px;font-weight:900;letter-spacing:.01em;line-height:1}
.quote-out small{font-size:12px;line-height:1.5}
.print-quote.is-unpriced .quote-out b{display:none}

.pickup-body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:center}
/* Placeholder tile: a real map needs a third-party frame, which the site CSP
   blocks by design. The directions button opens the map instead. */
.pickup-map{display:grid;place-items:center;height:118px;border:1px solid rgba(255,253,247,.26);
  background:
    repeating-linear-gradient(0deg,rgba(255,253,247,.07) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(255,253,247,.07) 0 1px,transparent 1px 26px),
    var(--ink)}
.pickup-map span{font-size:var(--fs-xs);font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-hi);border:1px solid rgba(104,217,225,.5);padding:5px 9px}
.pickup-facts{margin:0;display:grid;gap:9px;font-size:13px}
.pickup-facts dt{font-size:var(--fs-xs);font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.pickup-facts dd{margin:2px 0 0}
.print-pickup .button.alt{margin-top:16px}

@media (max-width:640px){
  .pickup-body{grid-template-columns:1fr}
  .pickup-map{height:96px}
  .quote-out b{font-size:25px}
}

/* Talibshop storefront polish;
the hero, browse tabs and contact layout stay intact. */
.hero-board {
  border-radius:10px;
  overflow:hidden;
  box-shadow:8px 9px 0 #cc624b;
  transform:none}
    .hero-proof {
      border-color:#ffffff26}
      .need-list>a {
        transition:background .18s ease,padding .18s ease}
        .need-list>a:hover {
          background:#e3eeeb}
            .product-grid {
              gap:16px;
              border:0;
              background:none}.product-card:hover{transform:translateY(-2px)}.product-visual{border-bottom:1px solid #d9e2de}.product-visual img{padding:16px;background:#f6f8f5}
                      .product-category {
                        border-end-end-radius:6px}
                        .product-copy {
                          padding:19px}
                          .product-copy h3 {
                            line-height:1.5;
                            font-size:16px;
                            margin-top:13px}
                              .product-bottom {
                                padding-top:14px}
                                .add-button {
                                  border-radius:6px;
                                  font-size:var(--fs-xs);
                                  color:#fff;
                                  background:var(--teal);
                                  border-color:var(--teal)}
                                  .add-button:hover {
                                    background:#10434a;
                                    border-color:#10434a}
                                    .button {
                                      border-radius:6px}
                                      .shop-tools input,.shop-tools select,.quote-grid input,.quote-grid select {
                                        border-radius:6px}
                                        .quote-grid input,.quote-grid select {
                                          min-height:46px}
                                          .quote-grid .field-check input {
                                            min-height:18px}
                                            .quote-grid .field {
                                              gap:9px}
                                              .print-quote {
                                                padding:23px;
                                                border:1px solid #ffffff29;
                                                border-radius:9px;
                                                background:#ffffff05}
                                                .print-quote-title {
                                                  line-height:1.5}
                                                  .print-upload-entry {
                                                    display:flex;
                                                    align-items:center;
                                                    gap:19px;
                                                    margin:26px 0;
                                                    padding:25px;
                                                    border:1px solid #9ed0c0;
                                                    border-radius:11px;
                                                    background:#edf8f2;
                                                    color:#123d3f}
                                                    .print-upload-entry>svg {
                                                      width:43px;
                                                      height:43px;
                                                      flex-shrink:0;
                                                      padding:8px;
                                                      background:#d8ede3;
                                                      border-radius:9px}
                                                      .print-upload-entry>div {
                                                        flex:1;
                                                        min-width:0}
                                                        .print-upload-entry strong {
                                                          font-size:17px;
                                                          line-height:1.5}
                                                          .print-upload-entry p {
                                                            font-size:12px;
                                                            line-height:1.7;
                                                            margin:6px 0 0;
                                                            color:#486b68}
                                                            .print-upload-entry .button {
                                                              display:inline-flex;
                                                              align-items:center;
                                                              gap:10px;
                                                              background:#087a7d;
                                                              border-color:#087a7d;
                                                              color:white;
                                                              white-space:nowrap;
                                                              min-height:48px;
                                                              padding:12px 20px;
                                                              font-size:13px}
                                                              .print-upload-entry .button:hover {
                                                                background:#105a5c}
                                                                .print-contact,.print-pickup {
                                                                  padding-top:24px}
                                                                  .category-tabs button,.category-filter {
                                                                    border-radius:5px}
                                                                    .shop-search input {
                                                                      border-radius:7px}
                                                                      @media(max-width:720px) {
                                                                        .print-upload-entry {
                                                                          flex-wrap:wrap;
                                                                          gap:13px;
                                                                          padding:20px}
                                                                          .print-upload-entry .button {
                                                                            width:100%;
                                                                            justify-content:center}
                                                                            .print-upload-entry strong {
                                                                              font-size:15px}
                                                                              .print-quote {
                                                                                padding:18px}
                                                                                .product-grid {
                                                                                  gap:10px}
                                                                                  .product-copy {
                                                                                    padding:13px}
                                                                                    .product-visual img {
                                                                                      padding:10px}
                                                                                      .hero-board {
                                                                                        box-shadow:5px 6px 0 #cc624b}
                                                                                      }
                                                                                      @media(prefers-reduced-motion:reduce) {
                                                                                        .product-card,.need-list>a {
                                                                                          transition:none}
                                                                                          .product-card:hover {
                                                                                            transform:none}
                                                                                          }


/* ===========================================================================
   Storefront finishing layer.
   Merged in from the former storefront-polish.css so the site has one storefront
   stylesheet instead of a base design and a second file quietly reversing it.
   Order is unchanged, so what paints on screen is unchanged; the base declarations
   this layer had already overridden have been deleted above rather than left to lose
   the cascade silently.
   =========================================================================== */
/* Final storefront layer: consistent spacing, readable controls and fluid layouts. */
body { background: #f2f1eb; }
.hero { border-radius: 0 0 18px 18px; }
.hero:before { opacity: .48; }
.hero .eyebrow { font-size: 12px; letter-spacing: .09em; }
html[data-lang="fr"] .hero h1 { font-family: var(--display); font-size: clamp(34px, 8.4cqi, 62px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
html[data-lang="ary"] .hero h1 { font-size: clamp(32px, 8.4cqi, 62px); line-height: 1.5; }
.hero h1 span:last-child { color: #a4ded5; }
.hero .lede { font-size: 15px; font-weight: 400; line-height: 1.85; border-inline-start-width: 2px; }
.hero-proof { border-bottom: 0; }
.hero-proof strong { font-size:var(--fs-xs); font-weight: 550; line-height: 1.6; text-transform: none; letter-spacing: 0; }
.hero-proof b { align-self: center; font-size:var(--fs-xs); }
.hero-board { border: 1px solid #ffffff30; border-radius: 14px; box-shadow: 5px 6px 0 #b55440; }
.board-head, .board-foot { padding: 13px 17px; font-size:var(--fs-xs); letter-spacing: .04em; }
.board-foot { border-top: 1px solid #d2d9d3; }
.need-list > a { grid-template-columns: 66px minmax(0, 1fr) 20px; padding: 21px 17px; gap: 14px; border-color: #d6ddd6; }
.need-list > a:is(:hover, :focus-visible) { transform: none; background: #e4eee8; }
.need-list .need-icon { width: auto; padding: 7px 5px; border: 1px solid #bccfc6; border-radius: 6px; font-size:var(--fs-xs); color: #37695d; text-align: center; }
.need-list b { font-size: 14px; font-weight: 650; line-height: 1.55; }
.browse { max-width: 1200px; margin: 36px auto; border-radius: 16px; }
.browse.is-tabbed { border-color: #dae1dc; box-shadow: 0 6px 24px #102b2510; }
.browse-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0; border-radius: 15px 15px 0 0; overflow: hidden; }
.browse-tab { min-width: 0; min-height: 80px; border-bottom: 0; padding: 16px; }
.browse-tab .tab-title { white-space: normal; overflow: visible; font-size: 14px; font-weight: 650; line-height: 1.5; }
.browse-tab .tab-code { font-size:var(--fs-xs); letter-spacing: .08em; }
.browse-panels > .browse-panel { border: 0; border-radius: 0 0 15px 15px; }
.browse.is-tabbed #shop { padding: clamp(26px, 3vw, 40px) clamp(20px, 3vw, 44px); }
.shop-toolbar:after { content: none !important; }
.section-heading { grid-template-columns: minmax(0, 1fr) minmax(220px, .58fr); gap: 30px; margin-bottom: 28px; }
.section-heading h2, html[data-lang="fr"] .section-heading h2 { font-family: var(--display); font-size: clamp(30px, 3.8vw, 48px); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; text-transform: none; max-width: 620px; }
html[data-lang="ary"] .section-heading h2 { font-family: var(--arabic); line-height: 1.6; letter-spacing: 0; }
.section-heading > p { font-size: 13px; line-height: 1.8; border: 0; padding: 0; }
.shop-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; padding: 18px; border: 1px solid #d8e0d9; background: #eef2ec; border-radius: 12px; box-shadow: none; margin-bottom: 24px; }
.search { grid-column: 1 / -1; }
.search input { height: 50px; border: 1px solid #c7d4ca; border-radius: 8px; background: #fafcf8; padding-inline-start: 16px; font-size: 16px; transition: border-color .16s, box-shadow .16s; }
.search input:focus { border-color: #237b6c; box-shadow: 0 0 0 3px #237b6c18; }
.search-clear { width: 44px; height: 44px; border-radius: 6px; }
.shop-toolbar .filters { min-width: 0; flex-wrap: wrap; gap: 7px; padding: 0; mask-image: none; -webkit-mask-image: none; }
.filters button { height: auto; min-height: 44px; border-color: #ccd7cf; border-radius: 7px; padding: 10px 13px; text-transform: none; font-size: 12px; font-weight: 650; }
.filters button.is-active { background: #1c5149; border-color: #1c5149; }
.stock-light { grid-column: 2; grid-row: 3; white-space: normal; justify-content: end; font-size:var(--fs-xs); font-weight: 550; text-transform: none; letter-spacing: 0; }
.stock-light i { flex-shrink: 0; border: 0; border-radius: 50%; width: 7px; height: 7px; }
.result-count { grid-column: 1; grid-row: 3; padding: 0; align-self: center; font-size: 12px; font-weight: 550; }
.filters { grid-column: 1 / -1; }
.product-grid { gap: 18px; }
.product-grid > .empty-state { grid-column: 1 / -1; }
.product-card { border-radius: 12px; }
.product-visual { aspect-ratio: 1.18; }
.product-visual img { padding: 24px 16px 14px; }
.product-category { top: 9px; inset-inline-start: 9px; max-width: calc(100% - 18px); padding: 4px 7px; border: 0; border-radius: 5px; background: #e1ebe6; color: #35594f; font-size:var(--fs-xs); letter-spacing: .02em; }
.product-availability { top: auto; bottom: 9px; right: auto; inset-inline-end: 9px; border-radius: 5px; padding: 4px 7px; min-height: 24px; font-size:var(--fs-xs); box-shadow: none; }
.product-copy { padding: 17px; }
.product-meta { font-size:var(--fs-xs); line-height: 1.5; }
.product-copy h3 { margin: 10px 0 7px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.product-copy p { font-size: 12px; line-height: 1.7; }
.product-bottom, .product-card.has-inquiry .product-bottom { flex-wrap: wrap; gap: 12px; border-color: #e1e6df; padding-top: 14px; }
.product-bottom .price { white-space: nowrap; font-family: var(--sans); font-size: 21px; font-weight: 750; line-height: 1.4; }
.product-inquiry { flex: 1 1 100%; min-height: 44px; padding: 10px; border: 1px solid #c1d4ca; border-radius: 7px; color: #205c50; background: #edf4ed; font-size: 12px; font-weight: 650; line-height: 1.45; }
.product-inquiry:hover { color: #fff; border-color: #1c5149; background: #1c5149; }
.add-button { min-height: 44px; flex: 1 1 100%; }
.empty-state { border-color: #c2d3c8; border-radius: 12px; }
.empty-state .button { margin-top: 18px; }
.local-section { border: 1px solid #d5dfd7; border-radius: 16px; gap: 34px; padding: clamp(30px, 4vw, 56px); grid-template-columns: minmax(130px, .6fr) minmax(0, 1.25fr) minmax(220px, 1fr); }
.local-stamp { font-size: clamp(44px, 5.4vw, 74px); line-height: .92; }
.local-section h2, html[data-lang="fr"] .local-section h2 { font-family: var(--display); font-size: clamp(30px, 3.8vw, 47px); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; text-transform: none; }
html[data-lang="ary"] .local-section h2 { font-family: var(--arabic); line-height: 1.6; letter-spacing: 0; }
.local-actions { justify-content: flex-start; gap: 10px; margin-top: 22px; }
.local-actions .button { min-height: 46px; padding: 12px 15px; font-size:var(--fs-xs); text-transform: none; letter-spacing: 0; line-height: 1.5; }
.store-details { border-top: 0; }
.store-details > div { grid-template-columns: 1fr; gap: 7px; }
.store-details dt { font-size:var(--fs-xs); }
.store-details .address { font-size: 17px; line-height: 1.6; text-transform: none; }
.store-details:has(> div):not(:has(> div:not([hidden]))) { display: none; }
.local-section:not(:has(.store-details > div:not([hidden]))) { grid-template-columns: minmax(130px, .55fr) minmax(0, 1.45fr); }
footer { margin-top: 30px; border-radius: 16px 16px 0 0; padding-block: 32px; }
.footer-links { gap: 3px 26px; font-size: 13px; }
.footer-links a, .footer-meta a { min-height: 44px; }
.cart-head button, .dialog-close { border-radius: 9px; }
.cart-drawer { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.quickbar { padding-bottom: env(safe-area-inset-bottom); }
.quickbar:not(:has(.quickbar-cart:not([hidden]))) .quickbar-contact { display: flex; flex: 1 1 0; width: auto; min-width: 0; align-items: center; justify-content: center; gap: 9px; padding: 8px; }
.quickbar:not(:has(.quickbar-cart:not([hidden]))) .quickbar-contact:after { content: attr(aria-label); font-size:var(--fs-xs); font-weight: 650; line-height: 1.4; text-align: center; }
.quickbar-contact svg { flex-shrink: 0; }
.checkout-dialog input, .checkout-dialog select, .checkout-dialog textarea { border-radius: 8px; }
@media (max-width: 1280px) { .browse { margin-inline: 24px; } }
@media (max-width: 1050px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .local-section { grid-template-columns: minmax(130px, .55fr) minmax(0, 1.45fr); }
  .store-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 760px) {
  .hero { border-radius: 0 0 12px 12px; }
  .hero .lede { font-size: 14px; }
  .browse { margin: 24px 14px; }
  .browse-tabs { display: grid; grid-auto-flow: column; grid-template-columns: none; overflow: visible; }
  .browse-tab { flex-direction: column; justify-content: flex-start; padding: 14px 7px; gap: 6px; min-height: 86px; text-align: center; border-bottom: 0; }
  .browse-tab .tab-code { display: none; }
  .browse-tab .tab-title { font-size: 12px; line-height: 1.4; }
  .browse-tab .tab-icon { width: 21px; height: 21px; }
  .browse-tab:first-child { border-start-start-radius: 15px; }
  .browse-tab:last-child { border-start-end-radius: 15px; }
  .browse.is-tabbed #shop { padding: 27px 16px; }
  .section-heading { grid-template-columns: 1fr; gap: 14px; }
  .section-heading h2, html[data-lang="fr"] .section-heading h2 { font-size: 29px; }
  .shop-toolbar { padding: 13px; gap: 12px; }
  .filters button { font-size:var(--fs-xs); padding: 9px 10px; }
  .stock-light { grid-column: 1 / -1; grid-row: 4; justify-content: start; }
  .result-count { grid-column: 1 / -1; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-visual { aspect-ratio: 1; }
  .product-copy { padding: 12px; }
  .product-copy h3 { font-size: 14px; }
  .product-meta { font-size:var(--fs-xs); }
  .product-category { font-size:var(--fs-xs); top: 6px; inset-inline-start: 6px; max-width: calc(100% - 12px); }
  .product-availability { font-size:var(--fs-xs); bottom: 6px; inset-inline-end: 6px; }
  .product-bottom .price { font-size: 18px; }
  .product-inquiry { font-size:var(--fs-xs); padding: 8px; }
  .local-section, .local-section:not(:has(.store-details > div:not([hidden]))) { grid-template-columns: 1fr; margin-inline: 14px; padding: 28px 22px; gap: 25px; }
  .local-stamp { font-size: 47px; }
  .store-details { grid-template-columns: 1fr; gap: 5px; }
  footer { margin-inline: 14px; padding: 28px 22px; gap: 18px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.has-quickbar { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
  .checkout-dialog input, .checkout-dialog select, .checkout-dialog textarea { font-size: 16px; }
}
@media (max-width:360px) {
  .browse { margin-inline: 8px; }
  .browse.is-tabbed #shop { padding-inline: 12px; }
  .product-grid { gap: 8px; }
  .product-copy { padding: 10px; }
  .product-copy h3 { font-size: 13px; }
  .product-inquiry { font-size:var(--fs-xs); }
}
@media (hover: none) { .product-card:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.hero-board:before, .hero-board:after { content: none; }
.product-category { box-shadow: none; }

/* Shared edges, a quieter catalogue, and a photograph-led basket. */
main>.hero,main>.browse,main>.local-section,body>footer{width:min(calc(100% - 48px),var(--max));max-width:var(--max);margin-inline:auto}
main>.browse{margin-block:32px}.hero-brand-banner{margin-bottom:23px}.hero-brand-banner .brand-lockup{width:min(290px,85%)}
.hero-brand-banner+.eyebrow{display:none}
.footer-brand .brand-lockup{width:224px}.footer-brand .brand-lockup img{width:100%;height:auto}
.shop-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:20px;padding:0 0 24px;border:0;border-radius:0;background:transparent;box-shadow:none;margin-bottom:0}
.shop-toolbar .search{grid-column:1;position:relative;align-self:end;margin:0;min-width:0}
.shop-toolbar .search input{height:54px;background:#fff;border:1px solid #cdd9d3;border-radius:12px;padding-inline:46px 44px;font-size:15px}
.shop-toolbar .search:before{content:"";position:absolute;inset-inline-start:18px;bottom:20px;width:13px;height:13px;border:1.8px solid #5e776d;border-radius:50%;z-index:1;pointer-events:none}
.shop-toolbar .search:after{content:"";position:absolute;inset-inline-start:30px;bottom:16px;width:7px;height:2px;background:#5e776d;transform:rotate(45deg);pointer-events:none}
.shop-toolbar .search>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.shop-sort{display:flex;flex-direction:column;gap:7px;min-width:0}.shop-sort>span{font-size:var(--fs-xs);color:#5b6c63;font-weight:650}
.shop-sort select,.category-select{width:100%;min-width:0;height:54px;padding:0 14px;border:1px solid #cdd9d3;border-radius:12px;background:#fff;color:#183d32;font:600 13px var(--sans);cursor:pointer}
html[dir=rtl] .shop-sort select,html[dir=rtl] .category-select{font-family:var(--arabic)}
.shop-categories{grid-column:1/-1;display:flex;gap:18px;align-items:center;min-width:0;border-bottom:1px solid #dce3dc;padding-bottom:20px}
.filter-caption{font-size:var(--fs-xs);font-weight:700;color:#61756a;flex-shrink:0}
.shop-toolbar .filters{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b7cabe transparent;min-width:0;padding:3px 2px 8px;mask-image:none}
.shop-toolbar .filters button{display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:100px;background:#e9efe9;padding:10px 15px;min-height:44px;color:#3e594b;white-space:nowrap;flex-shrink:0;font-size:12px;font-weight:600;box-shadow:none}
.shop-toolbar .filters button:hover{background:#dce7de;color:#163e30}
.shop-toolbar .filters button.is-active{background:#153f34;color:#fff;border-color:#153f34}
.filter-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding-inline:5px;background:#fff8;border-radius:50px;color:#365c48;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.is-active .filter-count{background:#ffffff24;color:#fff}.category-select{display:none}
.shop-toolbar .result-count{grid-column:1;grid-row:auto;margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.filter-reset{grid-column:2;grid-row:3;justify-self:end;border:0;background:transparent;color:#296448;font:600 12px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:var(--tap);padding:0}
.shop-toolbar select:focus-visible,.filters button:focus-visible{outline:3px solid #45947750;outline-offset:3px}
.product-grid{gap:20px}.product-card{background:#fff;border:1px solid #dce4dc;box-shadow:0 2px 6px #1e3d2805;overflow:hidden;transition:box-shadow .18s,border-color .18s}
.product-card:hover{border-color:#afc5b5;box-shadow:0 8px 22px #1837270c;transform:none}
.product-visual{background:#f7f9f4;aspect-ratio:1.2}.product-visual img{padding:28px 20px 18px;object-fit:contain}.product-category{background:#fff;border:1px solid #e0e7df;color:var(--muted)}
.product-copy h3{min-height:2.8em}.product-copy .product-meta{color:var(--muted);font-weight:500}.product-bottom{align-items:center}.product-bottom .price{font-size:22px}
.product-bottom .add-button{border-radius:9px;background:var(--action);border:1px solid var(--action);box-shadow:none;color:var(--action-ink);font-size:var(--fs-xs);letter-spacing:0;text-transform:none;min-height:var(--tap)}
.product-bottom .add-button:hover{background:var(--action-hover)}.card-stepper{border-radius:9px;overflow:hidden}
.whatsapp-icon{width:22px;height:22px;flex-shrink:0;fill:currentColor;stroke:none}.local-actions [data-whatsapp-display]{display:inline-flex;gap:10px;align-items:center;background:#16734c;border-color:#16734c;color:#fff;font-size:13px;font-weight:650;white-space:nowrap}
.local-actions img.whatsapp-icon{filter:brightness(0) invert(1)}.quickbar-contact .whatsapp-icon{width:23px;height:23px}
.cart-backdrop{background:#0c211bb0;backdrop-filter:blur(4px)}
.cart-drawer{width:min(480px,100%);padding:0;background:#f7f9f5;border:0;box-shadow:-12px 0 60px #09211925;overflow:hidden}
.cart-head{padding:28px 26px 20px;background:#fff;border:0;align-items:center;flex-shrink:0}.cart-head small{font-size:var(--fs-xs);letter-spacing:.15em;color:#628272;font-weight:650}.cart-head h2{font-family:var(--display);font-size:29px;line-height:1.3;font-weight:700;letter-spacing:-.015em;text-transform:none;margin:3px 0 0}
html[dir=rtl] .cart-head h2{font-family:var(--arabic);letter-spacing:0;font-size:26px}
.cart-head button{border:1px solid #e0e6dd;background:#f6f8f3;border-radius:50%;color:#536a5c;font-size:24px;flex-shrink:0}
.cart-item-count{margin:0;padding:0 26px 18px;background:#fff;color:#6e8175;font-size:12px;border-bottom:1px solid #e3e9e1;flex-shrink:0}
.cart-lines{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:6px 24px 20px;scrollbar-width:thin}
.cart-lines:empty{flex:0;padding:0}
.cart-line{display:grid;grid-template-columns:86px minmax(0,1fr) 32px;gap:10px 15px;padding:24px 0;align-items:start;border-bottom:1px solid #dfe7dc}.cart-line:before{content:none}
.cart-thumb{grid-column:1;grid-row:1/3;width:86px;height:94px;border:1px solid #e2e8de;border-radius:12px;background:#fff;position:relative}
.cart-thumb img{object-fit:contain;padding:8px;position:absolute;inset:0}.cart-product-copy{grid-column:2;grid-row:1}.cart-line h3{font:650 14px/1.55 var(--sans);margin:5px 0 7px;color:#183d2f}
html[dir=rtl] .cart-line h3{font-family:var(--arabic)}.cart-category{color:#748777;font-size:var(--fs-xs)}.cart-unit{font-size:12px;color:#617769}
.cart-remove{grid-column:3;grid-row:1;border:0;background:transparent;width:32px;height:40px;padding:7px;color:#7a8d7d;border-radius:8px;cursor:pointer}.cart-remove svg{width:18px;height:18px}.cart-remove:hover{background:#fae9e1;color:#a44d36}
.cart-line-bottom{grid-column:2/4;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cart-line .qty{border:1px solid #d8e2d4;border-radius:9px;background:#fff;gap:0;margin:0;overflow:hidden;direction:ltr}.cart-line .qty button{width:36px;min-width:36px;height:36px;border:0;background:transparent;color:#265b42;font-size:20px}.cart-line .qty button:hover{background:#e9f0e6}.cart-line .qty button:disabled{opacity:.4;cursor:default}.cart-line .qty span{min-width:28px;font-size:12px;font-weight:650}.cart-line strong{font:750 16px var(--sans);color:#183d2f}
.cart-footer{padding:22px 26px max(24px,env(safe-area-inset-bottom));background:#fff;border:0;border-top:1px solid #dbe5d6;box-shadow:0 -5px 22px #193b2705;flex-shrink:0;margin-top:0}.cart-footer .total{font-size:14px;font-weight:650}.cart-footer .total strong{font:750 27px var(--sans);letter-spacing:-.04em}.cart-footer p{font-size:12px;line-height:1.7;margin:10px 0 18px;color:#697e6e}
.cart-footer .button{min-height:52px;border-radius:12px;background:#1b5c46;border:1px solid #1b5c46;box-shadow:none;font-size:14px;text-transform:none;letter-spacing:0}.cart-footer .button:after{content:'→';font-size:20px;margin-inline-start:10px}html[dir=rtl] .cart-footer .button:after{content:'←'}
.cart-empty{max-width:320px;padding:32px 22px;margin:auto;line-height:1.7}.cart-empty p{font-size:17px;font-weight:600;color:#456650}.empty-bag{width:94px;height:94px;padding:12px;background:#eaf1e5;border-radius:26px;color:#4b8561;margin-bottom:14px}.cart-empty a{display:inline-flex;padding:12px 20px;min-height:46px;border:1px solid #bbd0b6;border-radius:10px;margin-top:16px;text-decoration:none;color:#29563a;font-size:13px;font-weight:600}
.cart-limit{margin:10px 24px;border-radius:10px;max-height:22vh;overflow:auto;flex-shrink:0;font-size:12px}
.checkout-dialog{border:1px solid #dce4d5;border-radius:20px;box-shadow:0 24px 100px #10281c40;background:#fff}.checkout-dialog form,.success{padding:34px}.checkout-dialog h2{font-family:var(--display);font-size:34px;line-height:1.25;text-transform:none;letter-spacing:-.03em}.checkout-dialog label{font-size:12px;font-weight:600;text-transform:none}.checkout-dialog input:not([type=radio]),.checkout-dialog textarea{border:1px solid #cfdccb;border-radius:10px;background:#f8faf6;font-size:16px;min-height:48px}.checkout-dialog input:focus,.checkout-dialog textarea:focus{outline:3px solid #45947726;border-color:#459477}.checkout-dialog .choice{border:1px solid #dce6d6;border-radius:11px;background:#f8faf6}.checkout-dialog .choice:has(:checked){background:var(--selected-bg);border-color:var(--selected-line)}.checkout-dialog [data-submit]{min-height:52px;border-radius:10px;background:#1b5c46;border-color:#1b5c46;box-shadow:none;text-transform:none;font-size:14px}.checkout-warning{border:1px solid #dce6d6;border-radius:10px;background:#f3f7ef;color:#496340;font-size:12px}
@media(max-width:760px){main>.hero,main>.browse,main>.local-section,body>footer{width:calc(100% - 28px);margin-inline:auto}main>.browse{margin-block:24px}.hero-brand-banner .brand-lockup{width:240px}.hero-brand-banner{margin-bottom:20px}.shop-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.shop-toolbar .search{grid-column:1/-1}.shop-sort{grid-column:2;grid-row:2;gap:6px}.shop-categories{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0;border:0}.shop-categories .filters{display:none}.filter-caption{font-size:var(--fs-xs);font-weight:650}.category-select{display:block}.shop-sort select,.category-select{height:48px;font-size:12px;padding-inline:10px}.shop-toolbar .result-count{grid-row:3;grid-column:1;align-self:center;font-size:var(--fs-xs)}.filter-reset{grid-row:3;grid-column:2;font-size:var(--fs-xs)}.product-grid{gap:12px}.product-copy{padding:13px}.product-bottom .price{font-size:20px}.product-copy h3{font-size:13px;line-height:1.6}.product-visual img{padding:28px 12px 12px}.product-category{font-size:var(--fs-xs)}.cart-head{padding:23px 20px 16px}.cart-item-count{padding-inline:20px}.cart-lines{padding-inline:18px}.cart-line{grid-template-columns:72px minmax(0,1fr) 30px;gap:9px 12px}.cart-thumb{width:72px;height:82px}.cart-line .qty button{width:38px;min-width:38px;height:40px}.cart-footer{padding-inline:20px}.checkout-dialog form,.success{padding:28px 20px}.checkout-dialog h2{font-size:28px;line-height:1.4}.footer-brand .brand-lockup{width:220px}}
@media(max-width:380px){.cart-line{grid-template-columns:62px minmax(0,1fr) 28px;gap:9px}.cart-thumb{width:62px;height:74px}.cart-line h3{font-size:13px}.cart-line-bottom{grid-column:1/-1;margin-inline-start:71px}.cart-line strong{font-size:14px}.cart-line .qty button{min-width:32px;width:32px}}
@media(prefers-reduced-motion:reduce){.product-card,.cart-drawer{transition:none}}

.footer-brand .brand-lockup img{background:transparent;border:0}
.shop-toolbar .filters button:before,.shop-toolbar .filters button:after{content:none}
.cart-footer .button{display:flex;flex-direction:row;gap:10px}
.cart-footer .button:after{margin:0}
.cart-drawer :focus-visible,.checkout-dialog :focus-visible{outline:3px solid #45947760;outline-offset:2px}
.checkout-dialog input:focus,.checkout-dialog textarea:focus{box-shadow:none}
.checkout-dialog .dialog-close{border:1px solid #dce5d6;background:#f8faf5;border-radius:50%;color:#53735d}
.checkout-recap{border:1px solid #dce6d7;border-radius:12px;overflow:hidden;background:#f8faf5}
.checkout-recap-head{background:#edf3e8;border:0;padding:12px 15px;font-size:12px;font-weight:650}
.checkout-recap-list{padding:0 15px}.checkout-recap-list li{border-color:#e0e8da;padding-block:11px;font-size:12px}
.checkout-cost{border:1px solid #dce6d7;border-radius:12px;background:#f8faf5;padding:12px 16px;font-size:12px}
.checkout-cost>div+div{border-color:#e0e8da}.checkout-cost strong{font-family:var(--sans)}
.checkout-dialog .checkout-governance{color:#6a7b6e;font-size:var(--fs-xs);line-height:1.6}
@media(max-width:700px){.browse-panel,.browse,.local-section{scroll-margin-top:122px}}

/* Shared pictograms for the four homepage shortcuts. */
.need-list>a{grid-template-columns:44px minmax(0,1fr) 24px}
.need-list .need-icon{display:grid;place-items:center;width:44px;height:44px;min-width:0;padding:10px;border:1px solid #d1ded5;border-radius:12px;background:#edf3ec;color:#235f4d}
.need-symbol{display:block;width:23px;height:23px}
.need-list>a:hover .need-icon,.need-list>a:focus-visible .need-icon{background:#dfece0;border-color:#a8c2b2}
@media(max-width:440px){.need-list>a{grid-template-columns:40px minmax(0,1fr) 18px;gap:12px}.need-list .need-icon{width:40px;height:40px;padding:8px}}

/* Let the printing title use the available row and wrap only when needed. */
.browse #print .request-panel-head,.browse #print .request-panel-head h2{max-width:none}
.browse #print .request-panel-head h2>span{display:inline}

/* F-14: the contact panel's tint follows the details column instead of a diagonal that used to
   terminate part-way through the address. */
.local-section{background:var(--white)}
.local-section .store-details{background:#edf5f4;margin-block:calc(-1 * var(--local-pad,34px));padding:var(--local-pad,34px);align-self:stretch}

/* The browser sizes <small> at about .83em, which lands under the 12px floor inside a 12-14px
   label. Hold the floor without flattening <small> where there is room above it. */
small{font-size:max(var(--fs-xs),.85em)}


/* ===========================================================================
   Narrow phones and small tablets.
   Measured at 320-430px: the catalogue was laying out two 127px cards, the four
   service tabs were 73px wide, and the toolbar put the sort control beside the
   category filters at 126px each. Below roughly 420px there is only room for one
   column of anything that carries a sentence.
   =========================================================================== */
@media (max-width:420px){
  .product-grid{grid-template-columns:1fr}
  /* The finishing layer lays these out with grid-auto-flow:column, so the flow has to be
     reset as well or the extra items just become implicit columns. */
  .browse-tabs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-toolbar{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:12px}
  /* Wider rules place these children on explicit rows and columns of a two-column grid. In one
     column those placements collide, so they are cleared and the children simply flow. */
  .shop-toolbar>*{grid-column:1/-1;grid-row:auto}
  /* Read down the column the way the task runs: find it, narrow it, sort it, then the count. */
  .shop-toolbar .search{order:1}
  .shop-toolbar .shop-categories{order:2}
  .shop-toolbar .shop-sort{order:3}
  /* These two carry an explicit grid-row from the two-column layout; clear it at the same
     specificity as the rule that sets it, or they keep their old row and jump the order. */
  .shop-toolbar .result-count{order:4;grid-row:auto;grid-column:1/-1}
  .shop-toolbar .filter-reset{order:5;grid-row:auto;grid-column:1/-1;justify-self:start}
  .shop-toolbar .filters{gap:6px}
  /* One column makes the card wide enough that the category never truncates. */
  .product-category{max-width:calc(100% - 16px)}
  /* A single-column card can afford a wider image and a bigger price. */
  .product-visual{aspect-ratio:16/10}
  .product-bottom .price{font-size:var(--fs-xl)}
}

/* Between 420 and 560 the tabs still need two rows rather than four columns. */
@media (min-width:421px) and (max-width:560px){
  .browse-tabs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two columns leave the category chip about 143px; "Fournitures scolaires" needs more, so let it
     take a second line rather than lose its ending. */
  .product-category{max-width:calc(100% - 16px);white-space:normal;line-height:1.25}
}

/* The footer put its brand, links and contact side by side down to 700px, which left the middle
   column at 81px in Arabic. Stack them, and give the link list two comfortable columns. */
@media (max-width:900px){
  body>footer{grid-template-columns:1fr;gap:24px}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
  .footer-meta{justify-items:start;text-align:start}
}

/* The three hero proof points were down to 109px each on a tablet. Let them find
   their own column count and turn the vertical rules into horizontal ones when
   they wrap, so a wrapped row does not show a divider hanging in mid-air. */
@media (max-width:900px){
  .hero-proof{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px}
  .hero-proof span+span{border-inline-start:0;padding-inline-start:0}
  .hero-proof span{padding-block:10px;border-top:1px solid #526569}
  .hero-proof{border-top:0}
}

/* Reading measure. Body copy was running to 96-99 characters on tablets, well past
   the point where the eye loses the start of the next line. */
.lede,.legal-wrap p,.legal-wrap li{max-width:68ch}


/* Archivo Narrow carries no Arabic, so Darija headings stay on the Arabic face. Without this the
   browser would fall back per-glyph and the two scripts would not share a baseline. */
html[data-lang="ary"] :is(h1,h2,h3,.section-heading h2,.local-section h2,.cart-head h2,.checkout-dialog h2){
  font-family:var(--arabic);letter-spacing:0}


/* ---------------------------------------------------------------- section heading
   The supporting line used to sit in a second grid column beside the heading. In Arabic that put it
   at the far left of a 1220px row, vertically below the heading's baseline and visually attached to
   nothing -- it read as a stray line rather than as the heading's own subtitle. Stacked under the
   heading it reads the same way in both scripts, and the accent rule now points at the text it
   belongs to. */
.section-heading{grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.section-heading>p{max-width:56ch;padding-bottom:0;margin-top:2px}


/* ---------------------------------------------------------------- product sheet
   A modal, not a page: browsing a short catalogue is a back-and-forth activity, and a full page
   navigation for a set of specifications loses the customer's place in the grid. */
.product-card{cursor:pointer}
.product-card:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.product-card:hover .product-copy h3{text-decoration:underline;text-underline-offset:3px}

.product-sheet{width:min(560px,calc(100vw - 32px));max-height:min(88vh,900px);padding:0;border:0;
  border-radius:var(--radius-lg);background:var(--card);color:var(--ink);overflow:hidden}
.product-sheet::backdrop{background:#0b1d20b0}
.product-sheet .sheet-body{overflow-y:auto;max-height:min(88vh,900px);padding:0 24px 8px;
  display:grid;gap:14px;align-content:start}
.sheet-close{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:var(--fs-lg);line-height:1;cursor:pointer}
.sheet-close:hover{background:var(--paper)}
.sheet-close:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* A fixed height rather than an aspect ratio: as a grid item the aspect box could resolve
   taller than its row and print the image underneath the title. */
.sheet-media{margin:0 -24px;height:min(38vh,280px);min-height:180px;background:var(--paper-2);display:grid;grid-template-rows:minmax(0,1fr);place-items:center;overflow:hidden;padding:18px}
.sheet-media img{width:100%;height:100%;object-fit:contain;display:block}
.sheet-glyph{font-family:var(--display);font-size:64px;font-weight:700;color:var(--muted)}
.sheet-head{display:grid;gap:3px}
.sheet-category{margin:0;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:700}
.sheet-head h2{margin:0;font-family:var(--display);font-size:var(--fs-2xl);line-height:1.15}
.sheet-sku{margin:0;font-size:var(--fs-sm);color:var(--muted);font-family:var(--mono)}
.sheet-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sheet-price b{font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.sheet-availability{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--selected-bg);color:var(--selected-ink)}
.sheet-availability.out{background:#f7e4e1;color:var(--danger)}
.sheet-availability.low{background:#f7ecd8;color:#7a5410}
.sheet-summary{margin:0;color:var(--ink-2)}
.sheet-spec-title{margin:6px 0 0;font-family:var(--display);font-size:var(--fs-md);
  padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.sheet-specs{display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:6px 18px;margin:0;font-size:var(--fs-base)}
.sheet-specs dt{color:var(--muted);font-weight:600}
.sheet-specs dd{margin:0}
.sheet-specs .sheet-spec-line{grid-column:1/-1;color:var(--ink-2)}
.sheet-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;position:sticky;bottom:0;padding:12px 0;background:var(--card);box-shadow:0 -10px 14px -10px #0b1d2030}
.sheet-actions .button{flex:1 1 160px;min-height:var(--tap);justify-content:center}
/* The sheet's primary action is the same green as every other primary action on the site. */
.product-sheet .button.primary{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.product-sheet .button.primary:hover:not(:disabled){background:var(--action-hover);border-color:var(--action-hover)}
.product-sheet .button.primary:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:520px){
  .product-sheet{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .product-sheet .sheet-body{max-height:92vh;padding-inline:18px}
  .sheet-media{margin-inline:-18px;height:190px}
}

/* The shop already knows this customer: one line instead of a block of boxes. */
.field-known,.pi-known{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:0 0 14px;font-size:14px;color:var(--ink-soft,#55606b)}
.field-known b,.pi-known b{color:var(--ink,#1d242b);font-weight:650}
.link-button{background:none;border:0;padding:0;font:inherit;color:var(--accent,#16734c);font-weight:650;text-decoration:underline;cursor:pointer}
.link-button:hover{text-decoration:none}

/* Product text in the Arabic page: dir still governs how each string is ordered internally, so a
   Latin model number reads correctly, but the block itself must align with the rest of the page
   instead of jutting to the opposite edge. */
html[dir="rtl"] .product-copy h3,
html[dir="rtl"] .product-copy p,
html[dir="rtl"] .product-meta,
html[dir="rtl"] .sheet-head h2,
html[dir="rtl"] .sheet-sku,
html[dir="rtl"] .sheet-summary,
html[dir="rtl"] .sheet-specs dt,
html[dir="rtl"] .sheet-specs dd{text-align:right}

/* These headings were capped at 620px while their column offers far more, so a line that needs
   749px lost exactly one word to a second line and left it stranded. Give them the room the
   column already has, and balance whatever still wraps - a phone always will. */
.section-heading h2,html[data-lang] .section-heading h2,
.compact-heading h2,html[data-lang] .compact-heading h2,
.request-panel-head h2,html[data-lang] .request-panel-head h2,
.workflow-card header h2,html[data-lang] .workflow-card header h2,
.local-section h2,html[data-lang] .local-section h2{
  max-width:min(100%,820px);
  text-wrap:balance;
}

/* --- panel surface and engraving ------------------------------------------
   One mechanism for all four browse panels, so they agree. The word hangs off the panel (the
   headers sit at different offsets and cannot be trusted as an anchor), at the inline end: left
   in Arabic, right in French, always the opposite side from the heading.

   --panel-ink is each panel's own foreground, so the ruled grid, the stripe and the engraving
   all take their colour from one place and work on the pale shelf, the two dark cards and the
   brass panel without per-panel values. */
.browse-panel{--panel-ink:11,29,32;--panel-stripe:var(--teal);--panel-ground:var(--panel-shop);position:relative;overflow:hidden}
.print-card,.repair-card{--panel-ink:255,253,247;--panel-stripe:var(--teal-hi)}
/* repair has always carried the warm accent; on the dark ground it is the light tone the card
   already uses for its eyebrow and step numbers, not the flat terracotta. */
.repair-card{--panel-stripe:#ff9f89}
.services-panel{--panel-ink:255,247,241;--panel-stripe:var(--accent-soft)}

/* A faint ruled grid: a stationery shop's own material, kept at 4% so it reads as texture. The
   dark cards keep their top stripe here too, now that :after is carrying the engraving. */



/* the engraving itself */
.browse-panel:after{
  position:absolute;inset-inline-end:clamp(14px,3vw,58px);inset-block-start:12px;
  font-family:var(--display);font-size:clamp(40px,6.4vw,92px);font-weight:950;line-height:1;
  letter-spacing:-.05em;
  /* full-strength ink faded as one layer: per-glyph alpha doubles at every Arabic join */
  color:rgb(var(--panel-ink));opacity:.085;
  transform:rotate(-3.5deg);transform-origin:100% 0;
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0;
}
html[dir="rtl"] .browse-panel:after{transform:rotate(3.5deg);transform-origin:0 0}

/* Painted opaque at the tone 8.5% ink over this panel actually gives, so the ruled grid runs
   behind the letters rather than through them. Without this the word carries the grid: 8.5%
   over 4.3% is 12.8%, a hard rule 42% darker crossing every letter every 34px. Browsers
   without color-mix keep the translucent version above, which is still flattened. */
@supports (color:color-mix(in srgb,red 50%,blue)){
  .browse-panel:after{
    color:color-mix(in srgb,rgb(var(--panel-ink)) 8.5%,var(--panel-ground));
    opacity:1;
  }
}
.browse-panel>*{position:relative;z-index:1}

#shop:after{content:"RAYON"}
#print:after{content:"IMPRESSION"}
#repair:after{content:"ATELIER"}
#services:after{content:"SERVICES"}
html[data-lang="ary"] #shop:after{content:"المنتوجات";font-family:var(--arabic);letter-spacing:0}
html[data-lang="ary"] #print:after{content:"الطبع";font-family:var(--arabic);letter-spacing:0}
html[data-lang="ary"] #repair:after{content:"التصليح";font-family:var(--arabic);letter-spacing:0}
html[data-lang="ary"] #services:after{content:"الخدمات";font-family:var(--arabic);letter-spacing:0}
html[data-lang="fr"] #shop:after{content:"PRODUITS"}
html[data-lang="fr"] #print:after{content:"IMPRESSION"}
html[data-lang="fr"] #repair:after{content:"RÉPARATION"}
html[data-lang="fr"] #services:after{content:"SERVICES"}

/* said once, large */
.shop-section .section-heading .eyebrow,
.workflow-card .request-panel-head .eyebrow,
.services-panel .request-panel-head .eyebrow{display:none}

/* --- tighter panels -------------------------------------------------------
   The space above the first useful control on each tab was doing nothing, and the headings were
   set for a page that opened with them rather than a tab someone has already chosen. */

.browse.is-tabbed .section-heading{gap:26px;margin-bottom:22px}
.browse.is-tabbed .section-heading h2,
.browse.is-tabbed .request-panel-head h2{font-size:clamp(26px,3vw,38px);line-height:1.06;max-width:min(100%,620px)}
.browse.is-tabbed .request-panel-head{margin-bottom:20px}
.browse.is-tabbed .request-lede,
.browse.is-tabbed [data-shop-copy]{font-size:13px;line-height:1.5;max-width:60ch}
@media (max-width:700px){
  .browse-panel:after{inset-block-start:8px;font-size:clamp(34px,10vw,54px)}
  .browse.is-tabbed .browse-panel{padding-block:24px}
}

/* Restated with the id specificity the tab system itself uses, so these actually apply. */
.browse.is-tabbed #shop,.browse.is-tabbed #services{
  background-image:
    linear-gradient(rgba(var(--panel-ink),.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--panel-ink),.045) 1px,transparent 1px);
  background-size:34px 34px,34px 34px;background-position:center top;
}
/* the dark cards keep their top stripe, now as the first background layer */
.browse.is-tabbed #print,.browse.is-tabbed #repair{
  background-image:
    linear-gradient(90deg,var(--panel-stripe) 0 13%,transparent 13% 100%),
    linear-gradient(rgba(var(--panel-ink),.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--panel-ink),.045) 1px,transparent 1px);
  background-size:calc(100% - clamp(20px,3vw,44px) * 2) 3px,34px 34px,34px 34px;
  background-position:clamp(20px,3vw,44px) 18px,center top,center top;
  background-repeat:no-repeat,repeat,repeat;
}