/* tomobile-menu 1.3.0 — the drawer is ONE page: the first screen, then the family tiles in rows of three; a family's content (pastilles, rayon tiles, « Tout voir », brand logos) opens under its own row, a rayon's sub-rayons in a strip under the rayon's row. The owner's pictures on white, orange on white; the archive header is one phone screen: H1, a swipe line, chips, brand logos */
.tmb-menu-host{list-style:none;padding:0;margin:0}
/* Flatsome's drawer is 300 px (--drawer-width): three tiles did not fit a 390 px phone. Browsers
   without :has() keep 300 px. The HTML element after the menu held a dead shortcode
   (« [aws_search_form] », its plugin is gone) — the menu carries its own search. */
.off-canvas .mfp-content:has(.tmb-menu){--drawer-width:min(92vw,420px)}
.mobile-sidebar .tmb-menu-host ~ li.html_top_right_text{display:none}
/* orange TEXT is #a85a00: the earlier #c46b00 reads 3.9:1 on white, under the 4.5:1 small text needs */
.tmb-menu,.tmb-archive{--tmb-o:#ff9a16;--tmb-o-ink:#a85a00;--tmb-line:#e9e7e2;--tmb-tint:#fff3e0;--tmb-chip:#f4f3ef;--tmb-muted:#6f6f6f;--tmb-warm:#f0dcc0}
/* Flatsome makes the drawer's <li> a flex ROW: without min-width:0 the menu cannot shrink below its
   min-content width, and an open panel's one-line swipe rows (pastilles, logos) pushed it to 490 px */
.tmb-menu{font-family:inherit;color:#1c1c1c;padding:12px;text-transform:none;letter-spacing:0;display:flex;flex-direction:column;gap:9px;flex:1 1 100%;min-width:0;max-width:100%}
.tmb-menu a,.tmb-archive a{color:inherit;text-decoration:none}
/* Flatsome styles every <button> (uppercase, 1em right margin, 2.4em line height, 2.5em min height);
   size, weight, line height and min-height stay with each tile's own class — at this specificity a
   font shorthand or a min-height here outranked them (thin 14 px labels, tiles unable to grow) */
.tmb-menu button{font-family:inherit;text-transform:none;letter-spacing:0;margin:0;box-shadow:none;text-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tmb-menu :focus-visible{outline:2px solid var(--tmb-o-ink);outline-offset:2px}
/* a swiping row clips vertically too: its ring goes inside */
.tmb-fpanel>.tmb-chips :focus-visible,.tmb-fpanel>.tmb-brands .tmb-logos :focus-visible{outline-offset:-3px}
.tmb-ico{width:30px;height:30px;fill:var(--tmb-o-ink,#a85a00);flex:none}
.tmb-ico-sm{width:18px;height:18px}
/* pictures: an image on white, or the glyph in the same box */
.tmb-pic{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;overflow:hidden}
.tmb-pic img{width:100%;height:100%;object-fit:contain;display:block}
.tmb-pic-glyph .tmb-ico{width:28px;height:28px}
.tmb-search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--tmb-line);border-radius:5px;padding:6px 11px;margin:0}
.tmb-search input[type=search]{border:0;box-shadow:none;margin:0;padding:4px 0;font-size:13px;background:transparent;width:100%;height:auto}
.tmb-search .tmb-ico{fill:var(--tmb-muted)}
.tmb-acct{display:flex;gap:7px}
.tmb-acct a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 6px;border-radius:6px;background:var(--tmb-o);color:#1f1200;font-weight:900;font-size:12.5px}
.tmb-acct a .tmb-ico{fill:#1f1200}
.tmb-acct .tmb-acct-alt{background:var(--tmb-chip);color:inherit}
.tmb-acct .tmb-acct-alt .tmb-ico{fill:var(--tmb-o-ink)}
.tmb-parts{display:flex;align-items:center;gap:10px;background:var(--tmb-tint);border-radius:7px;padding:7px 11px}
.tmb-pic-parts{width:40px;height:40px;background:transparent}
.tmb-parts b{display:block;font-size:12.5px;font-weight:900}
.tmb-parts small{color:var(--tmb-muted);font-size:11px}
.tmb-go{margin-left:auto;fill:var(--tmb-o-ink)}
.tmb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tmb-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1/1;width:100%;min-height:auto;border:1.5px solid var(--tmb-line);border-radius:7px;background:#fff;color:inherit;font-weight:900;font-size:11px;padding:6px 4px;text-align:center;line-height:1.2;min-width:0}
.tmb-tile .tmb-pic{width:58px;height:58px}
.tmb-tile span{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.tmb-tile.is-on{border-color:var(--tmb-o);background:var(--tmb-tint)}
.tmb-foot{display:flex;gap:7px;margin-top:4px}
.tmb-foot a{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 4px;border-radius:5px;background:var(--tmb-chip);font-weight:700;font-size:11.5px}
.tmb-chips{display:flex;flex-wrap:wrap;gap:6px}
.tmb-chip{display:inline-flex;align-items:center;min-height:36px;border:1.5px solid var(--tmb-line);border-radius:999px;padding:6px 14px;font-weight:800;font-size:12.5px;line-height:1.2;background:#fff}
.tmb-count{color:var(--tmb-muted);font-weight:700;font-size:11px;margin-left:6px}
.tmb-brands{display:flex;flex-direction:column;gap:6px}
.tmb-brands-label{font-weight:900;font-size:11px;color:var(--tmb-muted);text-transform:uppercase;letter-spacing:.04em}
.tmb-logos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* one tile size for every brand, logo or name, so the row reads as one set */
.tmb-logo{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:76px;padding:6px 10px;border:1.5px solid var(--tmb-line);border-radius:8px;background:#fff}
.tmb-logo img{height:28px;width:auto;max-width:92px;object-fit:contain;display:block}
.tmb-logo-text{font-weight:800;font-size:12.5px;line-height:1.1;text-align:center}
/* 1.3.0 one page: every family panel and rayon strip is in the page, hidden; menu.js flips
   `hidden`. The display rules below would beat the UA's [hidden]{display:none}, hence the
   explicit [hidden] rule. The notch points at the tile's column: equal columns, 7 px gaps for
   the families (14 px notch), 6 px gaps for the rayons (12 px notch). */
.tmb-fams{display:flex;flex-direction:column;gap:7px}
.tmb-fpanel{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:10px;background:var(--tmb-tint)}
.tmb-strip{position:relative;display:flex;flex-direction:column;gap:8px;margin-top:-4px;padding:10px;border-radius:10px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.tmb-fpanel[hidden],.tmb-strip[hidden]{display:none}
.tmb-fpanel::before,.tmb-strip::before{content:"";position:absolute;top:-4px;width:14px;height:14px;border-radius:2px;background:inherit;transform:rotate(45deg)}
.tmb-strip::before{width:12px;height:12px;top:-3px}
.tmb-fpanel[data-col="0"]::before{left:calc((100% - 14px) / 6 - 7px)}
.tmb-fpanel[data-col="1"]::before{left:calc(50% - 7px)}
.tmb-fpanel[data-col="2"]::before{left:calc(100% - (100% - 14px) / 6 - 7px)}
.tmb-strip[data-col="0"]::before{left:calc((100% - 12px) / 6 - 6px)}
.tmb-strip[data-col="1"]::before{left:calc(50% - 6px)}
.tmb-strip[data-col="2"]::before{left:calc(100% - (100% - 12px) / 6 - 6px)}
/* a family's pastilles and brand logos: one line that swipes to the panel's edges */
.tmb-fpanel>.tmb-chips,.tmb-fpanel>.tmb-brands .tmb-logos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}
.tmb-fpanel>.tmb-chips::-webkit-scrollbar,.tmb-fpanel>.tmb-brands .tmb-logos::-webkit-scrollbar{display:none}
.tmb-fpanel>.tmb-chips .tmb-chip,.tmb-fpanel>.tmb-brands .tmb-logo{flex:none;border-color:var(--tmb-warm)}
.tmb-raygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tmb-ray{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;width:100%;min-width:0;min-height:96px;padding:8px 4px 7px;border:1.5px solid var(--tmb-warm);border-radius:7px;background:#fff;color:inherit;font-weight:800;font-size:11px;line-height:1.15;text-align:center}
.tmb-ray .tmb-pic{width:48px;height:48px}
.tmb-ray-name{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.tmb-ray.is-on{border-color:var(--tmb-o)}
.tmb-badge{position:absolute;top:4px;right:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--tmb-tint)}
.tmb-badge .tmb-ico{width:14px;height:14px;transform:rotate(90deg);transition:transform .2s ease}
.tmb-ray.is-on .tmb-badge .tmb-ico{transform:rotate(-90deg)}
.tmb-ray-all{justify-content:center;gap:7px}
.tmb-ray-all .tmb-ray-name{color:var(--tmb-o-ink);font-weight:900}
.tmb-all-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--tmb-o)}
.tmb-all-ico .tmb-ico{width:24px;height:24px;fill:#1f1200}
.tmb-strip .tmb-chip{padding:6px 12px;font-size:12px}
.tmb-strip .tmb-chip-all{gap:2px;padding-right:8px;border-color:var(--tmb-tint);background:var(--tmb-tint);color:var(--tmb-o-ink);font-weight:900}
.tmb-chip-all .tmb-ico{width:16px;height:16px}
.tmb-menu .tmb-tile,.tmb-menu .tmb-ray,.tmb-menu .tmb-chip,.tmb-menu .tmb-logo{transition:border-color .15s ease,transform .12s ease}
.tmb-menu .tmb-tile:active,.tmb-menu .tmb-ray:active,.tmb-menu .tmb-chip:active{transform:scale(.97)}
/* a rayon with no picture: its name in the middle of the tile, not stranded at the top */
.tmb-ray-text{justify-content:center}
.tmb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tmb-fpanel:not([hidden]){animation:tmb-open .26s cubic-bezier(.16,1,.3,1) both}
.tmb-strip:not([hidden]){animation:tmb-pop .2s cubic-bezier(.16,1,.3,1) both}
@keyframes tmb-open{from{opacity:.35;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes tmb-pop{from{opacity:.4;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tmb-fpanel:not([hidden]),.tmb-strip:not([hidden]){animation:none}.tmb-badge .tmb-ico,.tmb-menu .tmb-tile,.tmb-menu .tmb-ray,.tmb-menu .tmb-chip,.tmb-menu .tmb-logo{transition:none}}
/* desktop bar + dropdown: Flatsome's own hover/positioning rules apply through has-dropdown / nav-dropdown */
.tmb-pic-bar{width:24px;height:24px;display:inline-flex;vertical-align:-7px;margin-right:6px;background:transparent}
.tmb-pic-bar .tmb-ico{width:18px;height:18px}
.tmb-desk-drop{min-width:320px}
.tmb-desk-drop .tmb-pic-drop{width:30px;height:30px;display:inline-flex;vertical-align:middle;margin-right:8px}
.tmb-desk-drop .tmb-pic-drop .tmb-ico{width:20px;height:20px}
.tmb-desk-drop .tmb-chips{padding:6px 12px}
.tmb-desk-drop .tmb-count{font-size:11px;color:#6f6f6f;margin-left:6px}
.tmb-desk-leaves{display:flex;flex-wrap:wrap;gap:3px 10px;padding:0 12px 6px 50px;font-size:12px;text-transform:none}
.tmb-desk-leaves a{padding:0!important;display:inline!important;line-height:1.5!important;text-transform:none}
.tmb-desk-drop .tmb-brands{padding:6px 12px}
.tmb-desk-drop li>.tmb-brands{padding:0 12px 6px 50px}
/* archive: the title bar keeps only the breadcrumb; the header is one screen tall on a phone */
.tmb-rayon .shop-page-title{padding:6px 0 0}
.tmb-rayon .page-title-inner{padding-top:0;padding-bottom:0;min-height:0}
.tmb-rayon .shop-page-title .breadcrumbs{font-size:.72em;margin:0}
.tmb-rayon .category-page-row{padding-top:8px}
.tmb-archive{margin:0 0 10px}
.tmb-clear{color:var(--tmb-o-ink)!important;white-space:nowrap}
.tmb-h1{font-size:1.35em;margin:0 0 6px;line-height:1.2}
/* scoped: tomobile-rewards-native prints its own <p class="tmb-sub"> on the checkout, where menu.css also loads */
.tmb-archive .tmb-sub{font-size:12px;color:var(--tmb-muted);font-weight:700;margin:-4px 0 6px}
.tmb-logo.is-on,.tmb-chip.is-on{border-color:var(--tmb-o);box-shadow:0 0 0 2px var(--tmb-tint)}
.tmb-swipe{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 0 6px;margin:0 0 4px;scrollbar-width:none}
.tmb-swipe::-webkit-scrollbar{display:none}
.tmb-sw{flex:0 0 84px;scroll-snap-align:start;text-align:center;font-size:11px;font-weight:800;line-height:1.15;min-width:0}
.tmb-sw .tmb-pic{width:68px;height:68px;margin:0 auto 3px;border:1.5px solid var(--tmb-line)}
.tmb-sw .tmb-pic-glyph .tmb-ico{width:34px;height:34px}
.tmb-sw span{display:block;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.tmb-sw small{display:block;color:var(--tmb-muted);font-weight:700;font-size:10px}
.tmb-archive .tmb-chips{margin:4px 0}
.tmb-archive .tmb-brands{margin:6px 0 2px}
.tmb-archive .tmb-logos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tmb-archive .tmb-logos::-webkit-scrollbar{display:none}
.tmb-archive .tmb-logo,.tmb-archive .tmb-chip{flex:none}
.tmb-intro{max-width:70ch;margin:18px 0 8px;font-size:14px}