/* minimal-v33: one quiet look in the colours of the Dentiyab logo (charcoal #202124 on white), Google-Shopping-like
   (owner, 2026-10-25). One sticky header on every page: logo row, a round Google-style search bar with the magnifier
   on the left, and a row of the main groups under it. On phones the logo row scrolls away and the search and the
   groups stay; there is no bottom bar. The /categories/ page is text only. Loaded last: it overrides older sheets. */

/* Theme tokens: the logo's charcoal and white, Google greys, one link blue */
:root{--bg:#202124;--surface:#292a2d;--panel:#292a2d;--input:#303134;--line:#3c4043;--text:#e8eaed;--muted:#9aa0a6;
  --muted-2:#bdc1c6;--accent:#e8eaed;--on-accent:#202124;--blue:#8ab4f8;--soft:#303134;--chip-text:#e8eaed;--shadow:#0000004d;
  --band-a:#303134;--band-b:#303134;--icon-bg:#303134;--icon-ink:#e8eaed;--icon-tint:#5f6368;
  --header:0px;--bottom:0px;--brand-row:52px;--sticky-h:100px}
:root:not([data-theme=dark]){color-scheme:light;--bg:#fff;--surface:#fff;--panel:#fff;--input:#f1f3f4;--line:#dadce0;--text:#202124;
  --muted:#5f6368;--muted-2:#3c4043;--accent:#202124;--on-accent:#fff;--blue:#1a0dab;--soft:#f1f3f4;--chip-text:#3c4043;
  --shadow:#20212429;--band-a:#f1f3f4;--band-b:#f1f3f4;--icon-bg:#f1f3f4;--icon-ink:#3c4043;--icon-tint:#dadce0}
@media(min-width:761px){:root{--brand-row:0px;--sticky-h:106px}}
body{background:var(--bg);color:var(--text);padding-bottom:env(safe-area-inset-bottom)!important}
.primary,.best-offer,.deal-badge,.panel-nav em{color:var(--on-accent)!important}

/* Header: sticky on every page; on phones only its logo row scrolls away (top = minus the logo row) */
.top,.home-page .top,.home-page header.top{position:sticky!important;top:calc(0px - var(--brand-row));z-index:40;background:var(--bg)!important;
  border-bottom:1px solid var(--line);box-shadow:none!important}
.top-inner,.home-page .top-inner{max-width:1200px;height:auto!important;margin:0 auto;padding:10px 20px!important;display:flex;
  align-items:center;gap:20px}
.top .wordmark{display:flex!important;align-items:center;flex-shrink:0;height:44px}
.top .wordmark .site-logo{height:26px!important;width:auto;display:block}
.top .wordmark .site-mark{display:none!important}
.top .logo-night{display:none!important}
[data-theme=dark] .top .logo-day{display:none!important}
[data-theme=dark] .top .logo-night{display:block!important}
html body .top .wordmark .logo-day,html body .top .top-tools .theme-toggle{display:block!important}
html body .top .top-tools .theme-toggle{display:grid!important}
html[data-theme=dark] body .top .wordmark .logo-day{display:none!important}
.top-tools{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-inline-start:auto}
.tool-link,.top-tools .theme-toggle{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent!important;color:var(--muted);box-shadow:none!important}
.tool-link:hover,.top-tools .theme-toggle:hover{background:var(--soft)!important;color:var(--text)}
.tool-link .icon,.top-tools .theme-toggle svg{width:21px;height:21px}

/* Google-like search: a white pill, thin grey border, the magnifier on the left */
.top .searchbar,.home-page .top .searchbar{flex:1;max-width:690px;height:46px!important;margin:0;padding:0 6px 0 0!important;display:flex;
  align-items:center;gap:0;border:1px solid var(--line)!important;border-radius:24px!important;background:var(--bg)!important;
  box-shadow:none!important;transition:box-shadow .15s}
.top .searchbar:hover,.top .searchbar:focus-within{box-shadow:0 1px 6px var(--shadow)!important;border-color:transparent!important}
[data-theme=dark] .top .searchbar{background:var(--input)!important;border-color:transparent!important}
.top .searchbar input,.home-page .top .searchbar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);
  font-size:15px!important;padding:0 14px}
.top .searchbar input::placeholder{color:var(--muted)!important}
.top .searchbar input::-webkit-search-cancel-button{-webkit-appearance:none}
.top .searchbar button{order:2;width:46px;height:44px;min-width:44px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--muted)!important;border-radius:0 24px 24px 0;cursor:pointer;padding:0}
.top .searchbar button .icon{width:21px;height:21px}
.top .searchbar a{display:none}

/* Main groups under the search (DirhamScan): one quiet scrolling row */
.cat-strip{border-top:0;background:var(--bg)}
.cat-strip-inner{max-width:none;margin:0 auto;padding:0 12px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  justify-content:safe center;-webkit-overflow-scrolling:touch}
.cat-strip-inner::-webkit-scrollbar{display:none}
.cat-strip a{flex:0 0 auto;padding:9px 10px 10px;font-size:13px;line-height:1.6;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent}
.cat-strip a:hover{color:var(--text)}
.cat-strip a[aria-current=page]{color:var(--text);border-bottom-color:var(--text);font-weight:600}
/* One line on every width: a carousel that moves by swipe, wheel or the two arrows */
.cat-strip{position:relative;max-width:1640px;margin:0 auto}
.cat-strip-inner{scroll-behavior:smooth;flex-wrap:nowrap}
.cat-arrow{position:absolute;top:0;bottom:2px;z-index:2;width:44px;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  color:var(--text);background:transparent}
.cat-arrow[hidden]{display:none}
.cat-arrow .icon{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--bg);border:1px solid var(--line);box-shadow:0 1px 4px var(--shadow)}
.cat-more{left:0;background:linear-gradient(to right,var(--bg) 55%,transparent)}
.cat-back{right:0;background:linear-gradient(to left,var(--bg) 55%,transparent)}
.cat-back .icon{transform:scaleX(-1)}
@media(min-width:761px){.cat-strip a{padding:8px 10px 9px}}
@media(hover:none){.cat-arrow{pointer-events:none;width:28px}.cat-arrow .icon{display:none}}

/* Old navigation pieces that the new header replaces */
.desktop-navigation,.group-strip,.bottom-nav,.home-brand,.home-tools,.home-groups,.page-scrollbar{display:none!important}

@media(max-width:760px){
  .top-inner,.home-page .top-inner{flex-wrap:wrap;gap:0 8px;padding:0 12px 8px!important}
  .top .wordmark{height:var(--brand-row);flex:1}
  .top .wordmark .site-logo{height:24px!important}
  .top-tools{height:var(--brand-row)}
  .top .searchbar,.home-page .top .searchbar{order:3;flex:1 0 100%;max-width:none;height:44px!important}
  .cat-strip-inner{justify-content:flex-start;padding:0 6px}
  .cat-strip a{padding:7px 9px 9px;font-size:12.5px}
  .filters form button[type=submit],.filters form .primary{bottom:8px!important}
}

/* Quiet surfaces: no coloured bands or badges */
.home-page .deals-band,:root:not([data-theme=dark]) .home-page .deals-band{background:transparent!important;color:var(--text)!important;
  border:0!important}
.deals-band .section-heading h2,.deals-band .shelf-caption{color:var(--text)!important}
.deals-band .section-heading a,:root:not([data-theme=dark]) .deals-band .section-heading a{color:var(--blue)!important}
.deal-badge,:root:not([data-theme=dark]) .deal-badge,:root:not([data-theme=dark]) .deals-band .deal-badge{background:var(--accent)!important}
:root:not([data-theme=dark]) .shelf:not(.deals-band) .section-heading h2{color:var(--text)}
.section-heading a,.all-category{color:var(--blue)}
.chip,.home-page .chip-strip .chip{background:var(--bg);border:1px solid var(--line);color:var(--chip-text)}
.home-pitch{color:var(--muted)}
.home-page .chip-strip{margin-top:14px}

/* /categories/: text only — group names in a narrow rail, subgroups as small outlined chips */
.categories-page,.categories-page main{height:auto!important;overflow:visible!important;min-height:0}
.category-browser{display:grid!important;grid-template-columns:220px minmax(0,1fr);gap:0;height:auto!important;max-width:1200px;
  margin:0 auto;align-items:start}
.category-rail{position:sticky;top:var(--sticky-h);max-height:calc(100dvh - var(--sticky-h));overflow-y:auto;background:var(--bg)!important;
  border-left:1px solid var(--line)!important;padding:8px 0;scrollbar-width:thin}
.category-rail>a{display:block!important;padding:10px 16px!important;min-height:0!important;font-size:13.5px!important;line-height:1.7!important;
  color:var(--muted);text-align:right!important;border-right:3px solid transparent;background:transparent!important}
.category-rail>a::after{display:none!important}
.category-rail>a:hover{color:var(--text)}
.category-rail .selected{color:var(--text)!important;font-weight:600;border-right-color:var(--text)!important;background:var(--soft)!important}
.category-rail .group-photo,.category-rail .group-badge,.category-rail .product-icon,.category-rail .dm-icon,.category-rail img,
.category-rail svg,.subcategory-icon{display:none!important}
.category-body{padding:16px 24px 32px!important;min-width:0}
.category-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.category-heading h1{font-size:18px;margin:0}
.category-heading .all-category{font-size:13px}
.category-sections{display:block!important;columns:auto!important}
.category-section{margin:18px 0 0;break-inside:avoid}
.category-section h2{font-size:14px;margin:0 0 8px;border:0!important;padding:0!important}
.category-section h2 a{color:var(--text);display:inline-flex;align-items:center;gap:4px}
.category-section h2 .icon{width:14px;height:14px;color:var(--muted)}
.subcategory-links,.category-body .subcategory-links{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:6px!important;
  grid-template-columns:none!important}
.subcategory-links>a,.category-body .subcategory-links>a{display:inline-flex!important;flex-direction:row!important;align-items:center;width:auto!important;min-height:0!important;
  padding:5px 12px!important;border:1px solid var(--line);border-radius:16px;font-size:12.5px!important;line-height:1.7!important;
  color:var(--chip-text);background:var(--bg)!important;text-align:right;box-shadow:none!important}
.subcategory-links>a:hover{border-color:var(--muted);color:var(--text)}
@media(max-width:760px){
  .category-browser{grid-template-columns:104px minmax(0,1fr)}
  .category-rail>a{padding:10px 10px!important;font-size:12px!important;line-height:1.6!important}
  .category-body{padding:12px 12px 24px!important}
  .category-heading h1{font-size:16px}
}

/* Shelves without frames: the cards are the only boxes */
.shelf,:root:not([data-theme=dark]) .shelf{border:0!important;box-shadow:none!important;background:transparent!important}

/* Home = Google's start page: the logo and one big round search in the middle of the screen, popular searches and the
   main groups under it. The sticky header stays out of sight until the big search has scrolled away. */
.home-page .top,.home-page header.top{position:fixed!important;left:0;right:0;top:calc(0px - var(--brand-row));visibility:hidden;
  transform:translateY(-110%);transition:transform .18s ease,visibility .18s}
.home-page.top-on .top{visibility:visible;transform:none}
.home-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:clamp(48px,9vh,96px) 16px 8px;text-align:center}
.hero-tools{position:absolute;top:10px;left:16px;margin:0}
.hero-logo{margin:0 0 26px;line-height:0}
.hero-logo img{height:64px;width:auto}
.hero-logo .logo-night{display:none!important}
[data-theme=dark] .hero-logo .logo-day{display:none!important}
[data-theme=dark] .hero-logo .logo-night{display:inline!important}
.home-hero .hero-search{flex:0 0 auto!important;width:100%;max-width:584px;height:50px!important;margin:0;padding:0 6px 0 0!important;display:flex;align-items:center;
  border:1px solid var(--line)!important;border-radius:25px!important;background:var(--bg)!important;box-shadow:none!important;
  transition:box-shadow .15s}
.home-hero .hero-search:hover,.home-hero .hero-search:focus-within{box-shadow:0 1px 6px var(--shadow)!important;border-color:transparent!important}
[data-theme=dark] .home-hero .hero-search{background:var(--input)!important;border-color:transparent!important}
.home-hero .hero-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:16px!important;
  padding:0 16px}
.home-hero .hero-search input::placeholder{color:var(--muted)}
.home-hero .hero-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.home-hero .hero-go{width:48px;height:48px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:0 25px 25px 0;padding:0}
.home-hero .hero-go .icon{width:22px;height:22px}
.home-hero .suggest-box{text-align:right}
.home-hero .chip-strip{margin:22px auto 0!important;max-width:640px;padding:0!important;justify-content:center;flex-wrap:wrap;gap:8px}
.home-hero .chip-label{display:none}
.home-hero .chip{font-size:12.5px!important;padding:4px 14px!important}
.home-hero .home-pitch{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.home-hero .cat-strip{width:100%;max-width:760px;margin:26px auto 0;border-top:1px solid var(--line)}
.home-hero .cat-strip-inner{justify-content:safe center}
@media(max-width:760px){
  .home-hero{padding:12vh 16px 8px}
  .hero-tools{left:8px;top:4px}
  .hero-logo{margin-bottom:24px}
  .hero-logo img{height:48px}
  .home-hero .hero-search{height:48px!important}
  .home-hero .chip-strip{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;scrollbar-width:none}
  .home-hero .chip-strip::-webkit-scrollbar{display:none}
  .home-hero .cat-strip{margin-top:20px}
  .home-hero .cat-strip-inner{justify-content:flex-start}
}

/* Carousels follow the finger: a fast swipe flies past many cards (iOS stopped at every card with snapping on) */
html *{scroll-snap-type:none!important;scroll-snap-stop:normal!important}
.shelf-products,.cat-strip-inner,.chip-strip,.top-categories-grid{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
