/* Sub / child categories: desktop flyout, sidebar tree, category chips, /cats accordion. Shared by both storefronts. */

/* Desktop "সব ক্যাটাগরি" menu: hovering (or focusing) a main category opens its sub categories on the right. */
.dcatmenu{overflow:visible;max-height:none}
/* The main list and the all-categories button above it are 6px wider than the logo (owner marked this on a screenshot). */
@media (min-width:1000px){
  html .dsubnav .dcatmenu{width:var(--sc-cat,196px)!important;box-sizing:border-box;padding:6px 4px}
  html .dsubnav .dcatmenu a{gap:6px;padding:8px 6px;font-size:13px;min-width:0;overflow-wrap:anywhere}
  html .dsubnav .dcatmenu a>span{width:20px;flex:none;font-size:16px}
  html .dsubnav .dcatmenu .dcm-fly a>span{width:auto}
}
.dcm-item{position:static}
.dcm-item>a{position:relative}
.dcatmenu a .dcm-arrow{font-style:normal;color:var(--mu);font-size:16px;line-height:1;margin-left:4px}
.dcm-item:hover>a,.dcm-item:focus-within>a{background:var(--bg);color:var(--rd);font-weight:700}
.dcm-fly{display:none;position:absolute;left:calc(100% - 4px);top:-1px;min-height:calc(100% + 2px);width:min(620px,calc(100vw - 260px));box-sizing:border-box;
  background:var(--cd);border:1px solid var(--br);border-radius:0 14px 14px 0;box-shadow:var(--sh);padding:16px 20px 18px;z-index:41;animation:dcmIn .14s ease-out}
.dcm-item:hover .dcm-fly,.dcm-item:focus-within .dcm-fly{display:block}
@keyframes dcmIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dcm-fly{animation:none}}
.dcm-fly-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--br)}
.dcm-fly-head b{font-size:16px;color:var(--tx)}
.dcm-fly .dcm-fly-head a{display:inline;padding:0;font-size:13px;color:var(--rd);font-weight:700;background:none}
.dcm-fly-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 18px}
.dcm-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dcatmenu .dcm-fly a{display:flex;align-items:center;gap:8px;border-radius:8px}
.dcatmenu .dcm-fly a.dcm-sub{font-weight:700;font-size:14px;padding:8px 10px;color:var(--tx)}
.dcatmenu .dcm-fly a.dcm-child{font-size:13px;padding:6px 10px 6px 20px;color:var(--mu)}
.dcatmenu .dcm-fly a:hover,.dcatmenu .dcm-fly a:focus-visible{background:var(--bg);color:var(--rd)}
.dcatmenu .dcm-fly a em{margin-left:auto;font-size:11px;font-style:normal;color:var(--mu);font-weight:400}

/* Desktop sidebar: the open category lists its sub (and the open sub its child) categories. */
.side .side-subs{margin:2px 0 6px 22px;padding-left:10px;border-left:2px solid var(--br);display:flex;flex-direction:column;gap:1px}
.side .side-subs a{font-size:13.5px;padding:7px 10px;gap:8px}
.side .side-subs a.side-child{font-size:12.5px;padding:5px 10px 5px 22px;color:var(--mu)}
.side .side-subs a.on{color:var(--rd);font-weight:700;background:var(--bg)}

/* Category page: breadcrumb and the sub / child chips (scroll sideways on phones). */
.scat-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--mu);margin:2px 0 10px}
.scat-crumbs a{color:var(--mu)}
.scat-crumbs a:hover{color:var(--rd)}
.scat-crumbs span{color:var(--tx);font-weight:700}
.scat-crumbs i{font-style:normal;opacity:.6}
.scat-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 1px 4px;margin-bottom:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.scat-row::-webkit-scrollbar{display:none}
.scat-row .scat{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--br);background:var(--cd);
  color:var(--tx);font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.scat-row .scat em{font-style:normal;font-size:11px;color:var(--mu);font-weight:600;background:var(--bg);border-radius:999px;padding:1px 7px}
.scat-row .scat:hover{border-color:var(--rd);color:var(--rd)}
.scat-row .scat.on{background:var(--rd);border-color:var(--rd);color:#fff}
.scat-row .scat.on em{background:#ffffff33;color:#fff}
.scat-row-child .scat{padding:6px 12px;font-size:12.5px;background:transparent}
.scat-row-child .scat.on{background:color-mix(in srgb,var(--rd) 14%,transparent);color:var(--rd);border-color:var(--rd)}
.scat-row-child .scat.on em{background:var(--cd);color:var(--rd)}

/* /cats: one card per main category; categories with sub categories open in place. */
.mcat-list{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.mcat-list{grid-template-columns:repeat(2,1fr);align-items:start}}
@media (min-width:1200px){.mcat-list{grid-template-columns:repeat(3,1fr)}}
.mcat{display:block;background:var(--cd);border:1px solid var(--br);border-radius:14px;box-shadow:var(--sh);overflow:hidden;color:var(--tx)}
.mcat-face{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;min-height:64px;box-sizing:border-box}
.mcat-face::-webkit-details-marker{display:none}
.mcat-face img,.mcat-face .mcat-icon{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:0 0 46px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--bg)}
.mcat-face b{font-size:15.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcat-face em{font-style:normal;font-size:12px;color:var(--mu);white-space:nowrap}
.mcat-face>i{font-style:normal;color:var(--mu);font-size:20px;line-height:1;transition:transform .2s;width:20px;text-align:center}
.mcat-face>i.mcat-chev{width:9px;height:9px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg);margin:0 6px 4px 4px;flex:0 0 9px;box-sizing:border-box}
.mcat[open] .mcat-chev{transform:rotate(225deg);margin:4px 6px 0 4px;border-color:var(--rd)}
.mcat[open]>.mcat-face{border-bottom:1px solid var(--br)}
.mcat-face:focus-visible{outline:2px solid var(--bl);outline-offset:-2px}
.mcat-body{padding:10px 12px 14px;display:flex;flex-direction:column;gap:8px}
.mcat-body .mcat-all{align-self:flex-start;font-size:13px;font-weight:700;color:var(--rd);padding:4px 2px}
.mcat-sub>a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--bg);color:var(--tx);min-height:44px;box-sizing:border-box}
.mcat-sub>a b{font-size:14px;flex:1}
.mcat-sub>a em,.mcat-children a em{font-style:normal;font-size:11px;color:var(--mu)}
.mcat-children{display:flex;flex-wrap:wrap;gap:6px;padding:8px 2px 2px 10px}
.mcat-children a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--br);font-size:12.5px;color:var(--tx);min-height:36px;box-sizing:border-box}
.mcat-sub>a:hover,.mcat-children a:hover{color:var(--rd);border-color:var(--rd)}