/* Glue between the design and WoodMart.
   The design's own rules are scoped to .barq-skin; these few are deliberately
   global, so the page around the chrome matches it. */

body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--body);
}

/* The chrome is a full-bleed band; WoodMart's wrapper must not sit on top of it. */
.barq-chrome,.barq-foot{position:relative;z-index:5}
.wd-page-wrapper{background:var(--page)}

/* WoodMart's title band is black by default, which fights the blush page. */
.wd-page-title,.page-title{background:var(--blush)!important;border-bottom:1px solid var(--line)}
.wd-page-title .entry-title,.wd-page-title a,.wd-page-title .woocommerce-breadcrumb,
.wd-page-title .woocommerce-breadcrumb a{color:var(--ink)!important}

/* shop buttons in the brand's pink */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce #respond input#submit,
.woocommerce .button.alt,.wd-buy-now-btn{
  background-color:var(--pink);
  border-color:var(--pink);
  color:#fff;
  border-radius:999px;
}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,
.woocommerce input.button:hover,.woocommerce .button.alt:hover{
  background-color:var(--pink-deep);
  border-color:var(--pink-deep);
  color:#fff;
}
/* the WhatsApp button keeps its own green */
.barq-wa-btn,.barq-wa-btn:hover{background:#25d366!important;border-color:#25d366!important;color:#06351a!important}

/* prices and links pick up the brand colour */
.woocommerce .price,.woocommerce span.amount,.wd-product .price{color:var(--pink-deep)}
.woocommerce .product-title a:hover,.wd-entities-title a:hover{color:var(--pink-deep)}

/* product cards: soften to match the design's cards */
.wd-product .product-wrapper,.wd-product .product-element{border-radius:var(--r);overflow:hidden}
.wd-product{--wd-brd-radius:var(--r)}

/* the home page has no WoodMart title band and needs no wrapper padding */
.home .wd-page-wrapper{padding:0}

/* Category accordion on archive pages.
   WoodMart styles it as an overlay on a dark hero: a 40% black panel with white
   text and the product count at white/60%. Over the blush page that panel reads
   as grey mud and the counts vanish entirely. Repaint it for a light page. */
.wd-nav-product-cat{
  background:transparent!important;
  color:var(--ink)!important;
}
.wd-nav-product-cat .category-nav-link,
.wd-nav-product-cat .nav-link-text,
.wd-nav-product-cat .category-nav-link a{
  color:var(--ink)!important;
}
.wd-nav-product-cat .nav-link-count{
  color:var(--ink-soft)!important;
  opacity:1!important;
}
.wd-nav-product-cat .category-nav-link:hover,
.wd-nav-product-cat .category-nav-link:hover .nav-link-text{
  color:var(--pink-deep)!important;
}
.wd-nav-product-cat.wd-style-underline .category-nav-link::after{
  background-color:var(--pink)!important;
}
/* the same panel also wraps the sub-category strip under the title */
.wd-page-title .wd-nav-product-cat,
.page-title .wd-nav-product-cat{background:transparent!important}

/* Brand marquee: the wordmark logos are wide and land at ~40px tall, but the
   square character logos (Stitch, Kuromi) were 350x350 and filled the width,
   so they rendered 94x94 and hung 23px out of their 86px tile. Cap the height
   instead of the width and every logo sits inside its box at a similar size. */
.barq-skin .brands img{
  max-height:50px!important;
  width:auto!important;
  max-width:100%!important;
}

/* Desktop width.
   The design was drawn at 1180px, which leaves ~360px of empty page on each
   side of a 1900px screen. Every grid in it is fractional, so widening the
   container just makes the tiles bigger - nothing reflows or breaks. */
@media (min-width:1400px){
  .barq-skin .wrap{max-width:1340px}
  .wd-page-wrapper .container{max-width:1340px}
}
@media (min-width:1700px){
  .barq-skin .wrap{max-width:1520px}
  .wd-page-wrapper .container{max-width:1520px}
}

/* Main menu was 15px, which reads small next to the rest of the header.
   The design sets three sizes by breakpoint; all three go up by the same step
   so the menu still fits on one line at every width. */
.barq-skin .nav a{font-size:17px}
@media (max-width:640px){ .barq-skin .nav a{font-size:14px} }
@media (max-width:420px){ .barq-skin .nav a{font-size:13px} }

/* Even product cards.
   The catalogue photos come from half a dozen supplier feeds at every shape and
   size, so a card sized to its picture is a different height from its neighbour.
   Give the picture a fixed square box and let it fit inside, clamp the title to
   two lines, and push the button to the bottom - every card then matches. */
.wd-product .product-wrapper{display:flex;flex-direction:column;height:100%}
.wd-product .product-element-top{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#fff;
  border-radius:14px;
}
.wd-product .product-element-top .product-image-link{display:block;width:100%;height:100%}
.wd-product .product-element-top img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#fff;
}
.wd-product .wd-entities-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
.wd-product .wd-bottom-actions{margin-top:auto}

/* ---------- sub-category tiles on a category page ----------
   Round tiles: the picture is a circle, the name and count sit under it. The
   card chrome is dropped - a ring of circles reads as an index and leaves the
   boxed look to the products below, which keeps the two from competing.
   This lives outside .barq-skin, so the variables it needs are restated. */
.barq-subcats{--sc-line:#f0dfe6;--sc-blush:#fde9f1;--sc-ink:#1d2327;--sc-soft:#6b7280;
  --sc-pink:#f4a3c0;--sc-shadow:0 3px 10px rgba(180,90,130,.10);
  --sc-shadow-lg:0 10px 22px rgba(180,90,130,.22);margin:0 0 26px}
.barq-subgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px 10px}
.barq-subcat{display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--sc-ink);text-decoration:none}
.barq-subcat .pic{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;display:block;
  background:#fff;border:2px solid var(--sc-line);box-shadow:var(--sc-shadow);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.barq-subcat:hover .pic{transform:translateY(-4px);box-shadow:var(--sc-shadow-lg);
  border-color:var(--sc-pink)}
.barq-subcat .pic img{width:100%;height:100%;display:block;transition:transform .35s ease}
/* artwork drawn for the tile fills the circle; a borrowed product shot is
   floated inside it instead, so the product is never cropped */
.barq-subcat .pic img.styled{object-fit:cover}
.barq-subcat .pic img.shot{object-fit:contain;padding:10%;box-sizing:border-box;background:#fff}
.barq-subcat:hover .pic img{transform:scale(1.07)}
.barq-subcat .pic-empty{background:linear-gradient(145deg,#fdf1f6,var(--sc-blush))}
.barq-subcat .lab{display:flex;flex-direction:column;gap:1px;text-align:center;padding-inline:2px}
.barq-subcat .lab b{font-size:11.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.barq-subcat .lab i{font-style:normal;font-size:10px;color:var(--sc-soft)}
.barq-subcat:hover .lab b{color:var(--sc-pink)}
@media (max-width:1100px){.barq-subgrid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:760px){.barq-subgrid{grid-template-columns:repeat(4,1fr);gap:12px 8px}}
@media (max-width:460px){.barq-subgrid{grid-template-columns:repeat(3,1fr)}
  .barq-subcat .lab b{font-size:11px}}

/* brands rail: the drift is a scroll now, so arrows can steer it */
.barq-skin .brands-wrap{position:relative}
.barq-skin .brands{overflow-x:auto; direction:ltr;
  scrollbar-width:none; -ms-overflow-style:none}
.barq-skin .brands::-webkit-scrollbar{display:none}
.barq-skin .brands-track{animation:none}
.barq-skin .barw{position:absolute; top:50%; translate:0 -50%;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow-lg);
  display:grid; place-items:center; color:var(--pink-deep);
  z-index:3; cursor:pointer; padding:0; transition:scale .18s, box-shadow .18s}
.barq-skin .barw:hover{scale:1.07}
.barq-skin .barw.prev{left:-6px}
.barq-skin .barw.next{right:-6px}
@media (max-width:640px){.barq-skin .barw{width:32px; height:32px}}


/* ---- category grid v3 (preview, ?cats=v2): a real product photo per department
   on white, ink text, no accent colour. The photo well stays white in dark mode
   because the product shots themselves are on white. */
#cats{--c2-line:#ebe7e9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #cats{--c2-line:#3a2f36}}
:root[data-theme="dark"] #cats{--c2-line:#3a2f36}

/* flex, not grid, so a short last row sits centred instead of hugging one side */
.cat2-grid{--c2-cols:6; --c2-gap:14px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--c2-gap); margin-bottom:44px}
.cat2-grid > .cat2{flex:0 0 calc((100% - (var(--c2-cols) - 1) * var(--c2-gap)) / var(--c2-cols))}
.cat2{display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--card); border:1px solid var(--c2-line); border-radius:var(--r);
  color:var(--ink); text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease}
.cat2 .ph{display:block; aspect-ratio:1/1; background:#fff; padding:12%; overflow:hidden}
.cat2 .ph img{display:block; width:100%; height:100%; object-fit:contain; transition:transform .35s ease}
.cat2 .tx{display:flex; flex-direction:column; gap:2px; padding:10px 12px 13px; border-top:1px solid var(--c2-line); text-align:start}
.cat2 h3{margin:0; font-size:15px; font-weight:700; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cat2 .n{font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.cat2:hover,.cat2:focus-visible{border-color:#cfc8cc; box-shadow:0 6px 18px rgba(27,16,22,.07)}
.cat2:hover .ph img,.cat2:focus-visible .ph img{transform:scale(1.06)}
.cat2:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (max-width:1024px){.cat2-grid{--c2-cols:4}}
@media (max-width:640px){
  .cat2-grid{--c2-cols:3; --c2-gap:8px}
  .cat2 .ph{padding:10%}
  .cat2 .tx{padding:8px 8px 10px}
  .cat2 h3{font-size:13px}
  .cat2 .n{font-size:11px}
}
@media (prefers-reduced-motion: reduce){.cat2,.cat2 .ph img{transition:none} .cat2:hover .ph img{transform:none}}
/* label only, no count: centre it */
.cat2 .tx{text-align:center; padding:11px 8px 12px}
/* 3D app-icon tiles: the render carries its own pink backdrop, so it fills
   the photo well edge to edge */
.cat2-grid.is3d .ph{padding:0; background:#e4bab6}
.cat2-grid.is3d .ph img{object-fit:cover}

/* trust rail motion: each icon acts out its promise once, staggered right to left,
   when the rail scrolls into view. JS adds .go - without it the icons sit still. */
.trust .ic{position:relative; overflow:hidden}
.trust .ic svg *{transform-box:fill-box; transform-origin:center}
.trust > div:nth-child(1){--d:.05s} .trust > div:nth-child(2){--d:.27s}
.trust > div:nth-child(3){--d:.49s} .trust > div:nth-child(4){--d:.71s}
.trust > div:nth-child(5){--d:.93s}
.trust.go .ic{animation:tr-pop .55s cubic-bezier(.34,1.56,.64,1) var(--d) both}
@keyframes tr-pop{0%{transform:scale(.6); opacity:0} 60%{transform:scale(1.12); opacity:1} 100%{transform:none}}
/* 1 truck drives in, speed lines trail behind */
.trust.go > div:nth-child(1) svg{animation:tr-drive .7s cubic-bezier(.2,.8,.3,1.2) calc(var(--d) + .15s) both}
@keyframes tr-drive{0%{transform:translateX(-24px)} 70%{transform:translateX(2px)} 85%{transform:translateX(-1px) rotate(-4deg)} 100%{transform:none}}
.trust > div:nth-child(1) .ic::after{content:""; position:absolute; left:3px; top:12px; width:8px; height:9px; opacity:0;
  background:repeating-linear-gradient(to bottom,var(--pink) 0 1.5px,transparent 1.5px 3.5px)}
.trust.go > div:nth-child(1) .ic::after{animation:tr-lines .8s ease-out calc(var(--d) + .3s) both}
@keyframes tr-lines{0%{opacity:0; transform:translateX(6px)} 40%{opacity:.8} 100%{opacity:0; transform:translateX(-6px)}}
/* 2 lock: the shackle drops shut with a click */
.trust.go > div:nth-child(2) svg path{animation:tr-shackle .6s cubic-bezier(.5,0,.3,1.4) calc(var(--d) + .2s) both}
@keyframes tr-shackle{0%,30%{transform:translateY(-4px)} 100%{transform:none}}
.trust.go > div:nth-child(2) svg rect{animation:tr-click .25s ease-out calc(var(--d) + .62s) both}
@keyframes tr-click{50%{transform:scale(1.1)}}
/* 3 shield: the tick draws itself */
.trust.go > div:nth-child(3) svg path:last-child{stroke-dasharray:10; animation:tr-tick .5s ease-out calc(var(--d) + .35s) both}
@keyframes tr-tick{from{stroke-dashoffset:10} to{stroke-dashoffset:0}}
/* 4 percent: one full turn, then a pink pulse */
.trust.go > div:nth-child(4) svg{animation:tr-spin .8s cubic-bezier(.5,0,.2,1) calc(var(--d) + .15s) both}
@keyframes tr-spin{from{transform:rotate(-360deg)} to{transform:none}}
.trust.go > div:nth-child(4) .ic{animation:tr-pop .55s cubic-bezier(.34,1.56,.64,1) var(--d) both, tr-pulse .9s ease-out calc(var(--d) + .9s) both}
@keyframes tr-pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--pink) 45%,transparent)} to{box-shadow:0 0 0 10px transparent}}
/* 5 headset rings */
.trust.go > div:nth-child(5) svg{transform-origin:50% 25%; animation:tr-ring .9s ease-in-out calc(var(--d) + .2s) both}
@keyframes tr-ring{0%,100%{transform:none} 15%{transform:rotate(-14deg)} 30%{transform:rotate(14deg)} 45%{transform:rotate(-10deg)} 60%{transform:rotate(8deg)} 75%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.trust.go .ic,.trust.go .ic::after,.trust.go svg,.trust.go svg *{animation:none!important}}

/* wide category cards (preview ?cats=w): the product photo sits on the right and
   fades into the card, name + tagline + arrow on the left, as in the owner's
   mockup. Both site languages are RTL, so the sides are pinned physically. The card colours follow the
   photos' blurred shop backdrop (blush above, white table below). */
.cat3-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:44px}
.cat3{position:relative; isolation:isolate; display:flex; aspect-ratio:5/2; overflow:hidden;
  border-radius:18px; background:linear-gradient(180deg,#f1e3df 0%,#f3e8e5 55%,#f1eceb 100%);
  box-shadow:0 1px 2px rgba(27,16,22,.05),0 6px 18px rgba(27,16,22,.06);
  color:var(--ink); text-decoration:none; transition:box-shadow .25s ease, transform .25s ease}
.cat3 img{position:absolute; top:0; right:0; z-index:-1; width:60%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(to left,#000 62%,transparent); mask-image:linear-gradient(to left,#000 62%,transparent);
  transition:transform .4s ease}
/* a veil in the card colour under the words, so a long tagline never runs over the products */
.cat3::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to right,rgba(242,231,228,.92) 0,rgba(242,231,228,.92) var(--c3-veil,44%),rgba(242,231,228,0) calc(var(--c3-veil,44%) + 18%))}
.cat3 .tx{width:47%; margin-right:auto; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; padding:16px 20px; text-align:left}
.cat3 h3{margin:0; font-size:20px; font-weight:800; line-height:1.25; color:var(--ink)}
.cat3 .sub{font-size:14px; line-height:1.45; color:var(--ink-soft)}
.cat3 .go{display:grid; place-items:center; width:34px; height:34px; margin-top:10px; border-radius:50%;
  background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(27,16,22,.12); transition:background .2s ease, color .2s ease}
.cat3:hover,.cat3:focus-visible{box-shadow:0 2px 4px rgba(27,16,22,.06),0 12px 28px rgba(27,16,22,.10); transform:translateY(-2px)}
.cat3:hover img,.cat3:focus-visible img{transform:scale(1.05)}
.cat3:hover .go,.cat3:focus-visible .go{background:var(--pink); color:#fff}
.cat3:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (max-width:1024px){.cat3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .cat3-grid{gap:10px}
  .cat3{aspect-ratio:auto; min-height:124px; border-radius:14px}
  .cat3 img{width:56%}
  .cat3{--c3-veil:50%}
  .cat3 .tx{width:60%; justify-content:flex-start; gap:3px; padding:11px 11px 10px}
  .cat3 h3{font-size:14.5px; line-height:1.2}
  .cat3 .sub{font-size:11px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .cat3 .go{width:26px; height:26px; margin-top:auto}
  .cat3 .go svg{width:13px; height:13px}
}
@media (prefers-reduced-motion: reduce){.cat3,.cat3 img{transition:none} .cat3:hover,.cat3:hover img{transform:none}}

/* sold-out badge: WoodMart's rounded labels are a fixed 50px circle with
   word-break:break-all, which chopped "نفد من المخزون" / "אזל מהמלאי" mid-word.
   This one label becomes a pill sized to its text. */
.product-labels.labels-rounded .product-label.out-of-stock{width:auto;min-width:0;max-width:none;height:auto;min-height:0;padding:5px 10px;border-radius:999px;white-space:nowrap;word-break:normal;line-height:1.3}

/* Category cards v2 - live since 2026-10-30, laid out after the owner's mobile
   mockup: the four lead departments as wide cards two by two, the rest as small
   photo tiles, four to a row on phones. */
.cat4-feat{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px}
.cat4-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:14px; margin-bottom:44px}
.cat4{position:relative; display:block; isolation:isolate; overflow:hidden; border-radius:16px; color:var(--ink); text-decoration:none;
  box-shadow:0 1px 2px rgba(27,16,22,.05),0 6px 16px rgba(27,16,22,.06); transition:box-shadow .25s,transform .25s}
.cat4 h3{margin:0; font-weight:800; line-height:1.25; color:var(--ink)}
.cat4 .go{display:grid; place-items:center; flex:none; border-radius:50%; background:#fff; color:var(--pink);
  box-shadow:0 1px 3px rgba(27,16,22,.12); transition:background .2s,color .2s}
/* lead cards: the photo takes the right two thirds and fades into the card's tint */
.cat4.big{--c4-bg:#F6E6E2; display:flex; align-items:center; aspect-ratio:2/1; background:var(--c4-bg)}
.cat4.big img{position:absolute; top:0; right:0; z-index:-1; width:64%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(to left,#000 68%,transparent); mask-image:linear-gradient(to left,#000 68%,transparent); transition:transform .5s}
.cat4.big .tx{width:46%; margin-right:auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px; padding:12px 16px; text-align:left}
.cat4.big h3{font-size:21px}
.cat4.big .go{width:32px; height:32px}
.cat4.big .go svg{width:15px; height:15px}
/* small tiles: photo on top, name and arrow underneath */
.cat4.sm{display:flex; flex-direction:column; background:#fff}
.cat4.sm .ph{display:block; aspect-ratio:4/3; overflow:hidden; background:#F3ECEA}
.cat4.sm img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s}
.cat4.sm .lb{flex:1; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; min-height:44px}
.cat4.sm h3{font-size:14px}
.cat4.sm .go{width:22px; height:22px; box-shadow:0 0 0 1px #EFE7E4}
.cat4.sm .go svg{width:12px; height:12px}
.cat4:hover,.cat4:focus-visible{box-shadow:0 2px 4px rgba(27,16,22,.06),0 12px 28px rgba(27,16,22,.10); transform:translateY(-2px)}
.cat4:hover img,.cat4:focus-visible img{transform:scale(1.04)}
.cat4:hover .go,.cat4:focus-visible .go{background:var(--pink); color:#fff}
.cat4:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (max-width:1024px){
  .cat4-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat4-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:640px){
  .cat4-feat{gap:8px; margin-bottom:8px}
  .cat4-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
  .cat4{border-radius:12px}
  .cat4.big{aspect-ratio:1.9/1}
  .cat4.big .tx{width:50%; gap:7px; padding:8px 10px}
  .cat4.big h3{font-size:15px}
  .cat4.big .go{width:24px; height:24px}
  .cat4.big .go svg{width:12px; height:12px}
  .cat4.sm .lb{gap:3px; padding:5px 6px; min-height:36px}
  .cat4.sm h3{font-size:11px; line-height:1.2}
  .cat4.sm .go{width:16px; height:16px}
  .cat4.sm .go svg{width:9px; height:9px}
}
@media (prefers-reduced-motion: reduce){.cat4,.cat4 img,.cat4 .go{transition:none} .cat4:hover,.cat4:hover img{transform:none}}

/* warm-white page instead of blush, pink kept for details (live 2026-10-30) */
body.barq-w2{--page:#FAF9F7}

/* Hero, 2026-10-30: one banner, its copy in live text over the picture's empty
   left side - it reads in both languages and stays legible on a phone. Sizes
   follow the banner's width (cqw) with a floor for small screens. */
.barq-skin .slider.one .arw,.barq-skin .slider.one .dots{display:none}
.barq-skin .bn.hero2{aspect-ratio:2000/750; container-type:inline-size; background:#fbeff2}
.barq-skin .bn.hero2 img{object-position:center}
.barq-skin .bn.hero2 .h2c{position:absolute; top:0; bottom:0; left:0; width:43%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 1.5%}
.barq-skin .bn.hero2 h1{margin:0 0 .3em; display:flex; flex-direction:column; align-items:center;
  font-family:var(--display); font-size:max(19px,5cqw); font-weight:800; line-height:1.12}
.barq-skin .bn.hero2 h1 .k{font-size:max(18px,4.5cqw); color:var(--ink); white-space:nowrap}
.barq-skin .bn.hero2 h1 .t{font-size:max(22px,5.6cqw); color:var(--pink-deep); white-space:nowrap}
.barq-skin .bn.hero2 .s{margin:0 0 1.2em; font-size:max(10.5px,1.95cqw); font-weight:600; line-height:1.45; color:var(--ink); text-wrap:balance}
.barq-skin .bn.hero2 .go{display:inline-flex; align-items:center; justify-content:center; gap:.8em; min-width:62%;
  padding:.7em 1.6em; border-radius:999px; background:var(--pink-deep); color:#fff; font-size:max(12px,2.05cqw);
  font-weight:700; line-height:1; box-shadow:0 8px 22px rgba(224,42,108,.28); transition:transform .2s,box-shadow .2s}
.barq-skin .bn.hero2 .go svg{width:1.05em; height:1.05em; flex:none}
.barq-skin .bn.hero2 .go:hover,.barq-skin .bn.hero2 .go:focus-visible{transform:translateY(-2px); box-shadow:0 12px 26px rgba(224,42,108,.34)}
.barq-skin .bn.hero2 .go:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media (max-width:640px){
  .barq-skin .bn.hero2{aspect-ratio:2000/750}
  .barq-skin .bn.hero2 img{object-position:center}
  .barq-skin .bn.hero2 .h2c{width:48%}
  .barq-skin .bn.hero2 h1{margin-bottom:.22em}
  .barq-skin .bn.hero2 .s{margin-bottom:.75em}
}
@media (prefers-reduced-motion: reduce){.barq-skin .bn.hero2 .go{transition:none} .barq-skin .bn.hero2 .go:hover{transform:none}}

/* Sub-category strip (every category, 2026-10-30) - one swipeable row of compact
   cards on white; the chosen one framed in pink; products start right below. */
.barq-strip,.barq-strip.wd-nav-product-cat{position:relative; display:block; margin:0 0 12px; padding:10px 0;
  background:#fff; border:1px solid #F2E6EB; border-radius:16px}
.barq-strip .bs-track{display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 10px}
.barq-strip .bs-track::-webkit-scrollbar{display:none}
.barq-strip .bs-card{flex:0 0 74px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px 4px 7px; border:1.5px solid transparent; border-radius:14px; color:var(--ink); text-decoration:none;
  transition:border-color .2s,background .2s}
.barq-strip .bs-pic{display:block; flex:none; width:60px; height:60px; overflow:hidden; border-radius:14px; background:#F6EEF0}
.barq-strip .bs-pic img{display:block; width:100%; height:100%; object-fit:cover}
.barq-strip .bs-lab{min-height:2.5em; font-size:12px; font-weight:600; line-height:1.25; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.barq-strip .bs-card:hover{background:#FDF6F9}
.barq-strip .bs-card.is-active{border-color:var(--pink); background:#fff}
.barq-strip .bs-card.is-active .bs-lab{color:var(--pink-deep); font-weight:700}
.barq-strip .bs-card:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.barq-strip .bs-arw{position:absolute; top:48px; z-index:2; display:grid; place-items:center; width:28px; height:28px;
  transform:translateY(-50%); border:1px solid #EFE4E8; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink);
  cursor:pointer; box-shadow:0 2px 6px rgba(27,16,22,.14); transition:opacity .2s}
.barq-strip .bs-arw svg{width:14px; height:14px}
.barq-strip .bs-arw.prev{right:4px}
.barq-strip .bs-arw.next{left:4px}
.barq-strip .bs-arw.is-off{opacity:.55}
@media (min-width:1025px){
  .barq-strip,.barq-strip.wd-nav-product-cat{padding:12px 46px}
  .barq-strip .bs-track{gap:8px; padding:2px 2px}
  .barq-strip .bs-card{flex-basis:104px}
  .barq-strip .bs-pic{width:76px; height:76px}
  .barq-strip .bs-lab{font-size:13px}
  .barq-strip .bs-arw{display:grid; place-items:center; position:absolute; top:50%; z-index:2; width:32px; height:32px;
    transform:translateY(-50%); border:1px solid #EFE4E8; border-radius:50%; background:#fff; color:var(--ink); cursor:pointer;
    box-shadow:0 2px 6px rgba(27,16,22,.08)}
  .barq-strip .bs-arw.prev{right:8px}
  .barq-strip .bs-arw.next{left:8px}
  .barq-strip .bs-arw:hover{color:var(--pink-deep)}
}
@media (prefers-reduced-motion: reduce){.barq-strip .bs-card{transition:none}}

/* Categories drawer (2026-10-30) - the header's "all categories" button opens it
   from the right; departments with their photo, sub-categories under a toggle. */
.barq-drawer{position:fixed; inset:0; z-index:100000}
.barq-drawer[hidden]{display:none}
.barq-drawer .bd-backdrop{position:absolute; inset:0; background:rgba(27,16,22,.42); opacity:0; transition:opacity .25s}
.barq-drawer .bd-panel{position:absolute; top:0; bottom:0; right:0; width:min(86vw,380px); display:flex; flex-direction:column;
  background:#fff; box-shadow:-8px 0 30px rgba(27,16,22,.18); transform:translateX(100%); transition:transform .26s ease}
.barq-drawer.is-open .bd-backdrop{opacity:1}
.barq-drawer.is-open .bd-panel{transform:none}
.barq-drawer .bd-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #F2E6EB}
.barq-drawer .bd-head b{font-size:19px; font-weight:800; color:var(--ink)}
.barq-drawer .bd-x{width:38px; height:38px; border:0; border-radius:50%; background:#F7EEF2; color:var(--ink); font-size:24px; line-height:1; cursor:pointer}
.barq-drawer .bd-list{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px 0 28px}
.barq-drawer .bd-item{border-bottom:1px solid #F6EEF2}
.barq-drawer .bd-row{display:flex; align-items:center}
.barq-drawer .bd-dep{flex:1; display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px; color:var(--ink);
  font-size:15px; font-weight:700; text-decoration:none}
.barq-drawer .bd-dep img{flex:none; width:40px; height:40px; border-radius:10px; object-fit:cover}
.barq-drawer .bd-tog{display:grid; place-items:center; width:46px; height:46px; margin-left:6px; border:0; border-radius:50%;
  background:none; color:var(--ink-soft); cursor:pointer}
.barq-drawer .bd-tog svg{transition:transform .2s}
.barq-drawer .bd-tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.barq-drawer .bd-subs{list-style:none; margin:0; padding:0 68px 10px 16px}
.barq-drawer .bd-subs a{display:block; padding:8px 0; font-size:14.5px; color:var(--ink-soft); text-decoration:none}
.barq-drawer .bd-dep:hover,.barq-drawer .bd-subs a:hover{color:var(--pink-deep)}
.barq-drawer :focus-visible{outline:2px solid var(--pink-deep); outline-offset:2px}
html.bd-lock,html.bd-lock body{overflow:hidden}
@media (prefers-reduced-motion: reduce){.barq-drawer .bd-panel,.barq-drawer .bd-backdrop,.barq-drawer .bd-tog svg{transition:none}}

/* footer: the address line opens Waze (2026-10-30) */
.barq-skin a.f-map,.barq-skin a.f-tel{color:inherit; text-decoration:none}
.barq-skin a.f-tel:hover b,.barq-skin a.f-tel:focus-visible b{color:var(--pink-deep)}
.barq-skin a.f-map span{text-decoration:underline; text-decoration-color:rgba(224,42,108,.35); text-underline-offset:3px}
.barq-skin a.f-map:hover b,.barq-skin a.f-map:focus-visible b{color:var(--pink-deep)}

/* Floating WhatsApp button (2026-10-30) - bottom right on every page, above the
   phone toolbar; a short pulse three times after load, none with reduced motion. */
.barq-wa-float{position:fixed; right:18px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:360;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  text-decoration:none; box-shadow:0 6px 18px rgba(37,211,102,.42),0 2px 6px rgba(0,0,0,.16); transition:transform .2s,box-shadow .2s}
.barq-wa-float svg{width:31px; height:31px}
.barq-wa-float::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  animation:barqWaPulse 2.4s ease-out 1.2s 3}
@keyframes barqWaPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 80%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
.barq-wa-float:hover,.barq-wa-float:focus-visible{transform:scale(1.07); box-shadow:0 8px 24px rgba(37,211,102,.5),0 2px 6px rgba(0,0,0,.18)}
.barq-wa-float:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
@media (max-width:1024px){
  .barq-wa-float{right:14px; bottom:calc(68px + env(safe-area-inset-bottom, 0px)); width:54px; height:54px}
  .barq-wa-float svg{width:29px; height:29px}
}
@media (prefers-reduced-motion: reduce){.barq-wa-float{transition:none} .barq-wa-float::after{animation:none}}

.barq-skin .waze-ic{display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:#33CCFF; box-shadow:0 2px 6px rgba(51,204,255,.35)}

/* phones: the accessibility button and scroll-to-top clear the bottom toolbar
   (55px) instead of covering its "account" item. UserWay positions itself with
   inline styles, hence !important. */
@media (max-width:1024px){
  .userway_buttons_wrapper{top:auto!important; bottom:calc(68px + env(safe-area-inset-bottom, 0px))!important}
  .scrollToTop{bottom:calc(126px + env(safe-area-inset-bottom, 0px))!important}
}

/* Hero slide 2, "design your gift" (2026-10-30): same type as slide 1, in the
   banner's dusty rose, plus its three selling points (hidden on phones). */
.barq-skin .bn.hero2 .ht{margin:0 0 .3em; display:flex; flex-direction:column; align-items:center;
  font-family:var(--display); font-size:max(19px,5cqw); font-weight:800; line-height:1.12; color:var(--ink)}
.barq-skin .bn.hero2 .ht .k{font-size:max(18px,4.5cqw); color:var(--ink); white-space:nowrap}
.barq-skin .bn.hero2 .ht .t{font-size:max(22px,5.6cqw); white-space:nowrap}
.barq-skin .bn.hero2.gift .t{color:#B5566A}
.barq-skin .bn.hero2.gift .go{background:#B5566A; box-shadow:0 8px 22px rgba(181,86,106,.3)}
.barq-skin .bn.hero2.gift .go:hover,.barq-skin .bn.hero2.gift .go:focus-visible{box-shadow:0 12px 26px rgba(181,86,106,.38)}
.barq-skin .bn.hero2 .feats{display:flex; justify-content:center; margin:0 0 1.1em; padding:0; list-style:none;
  font-size:max(10px,1.4cqw); line-height:1.3; color:var(--ink-soft)}
.barq-skin .bn.hero2 .feats li{display:flex; flex-direction:column; align-items:center; gap:.25em; padding:0 1.3em; text-align:center}
.barq-skin .bn.hero2 .feats li + li{border-inline-start:1px solid rgba(181,86,106,.28)}
.barq-skin .bn.hero2 .feats svg{width:2.1em; height:2.1em; color:#B5566A}
.barq-skin .bn.hero2 .feats b{display:block; color:var(--ink); font-weight:800}
@media (max-width:640px){
  .barq-skin .bn.hero2 .feats{display:none}
  .barq-skin .bn.hero2.gift .s{margin-bottom:.75em}
}

/* hero dots: WoodMart's 42px button min-height turned them into tall pills */
.barq-skin .dots button{min-height:0!important; height:8px; border:0; line-height:0}
/* phones: the gift slide keeps title and button only, so both fit the banner */
@media (max-width:640px){.barq-skin .bn.hero2.gift .s{display:none}}
/* phones: hero buttons stay on one line */
@media (max-width:640px){.barq-skin .bn.hero2 .go{white-space:nowrap; padding-inline:1.1em; min-width:0}}

/* gift slide title: bold Kufi, bigger (Hebrew falls through to Heebo 900) */
.barq-skin .bn.hero2.gift .ht{font-family:'Noto Kufi Arabic',var(--display); font-weight:900; line-height:1.15; margin-bottom:.35em}
.barq-skin .bn.hero2.gift .ht .k{font-size:max(21px,5.4cqw)}
.barq-skin .bn.hero2.gift .ht .t{font-size:max(30px,7.6cqw)}
/* gift slide: fit the taller Kufi title and everything under it inside the banner */
.barq-skin .bn.hero2.gift .ht{line-height:1.1; margin-bottom:.3em}
.barq-skin .bn.hero2.gift .ht .k{font-size:max(20px,4.6cqw)}
.barq-skin .bn.hero2.gift .ht .t{font-size:max(28px,6.4cqw)}
.barq-skin .bn.hero2.gift .s{margin-bottom:.9em}
.barq-skin .bn.hero2.gift .feats{margin-bottom:.9em}
/* gift slide: room between the two Kufi lines (they touched), the rest tightened to keep it all inside the banner */
.barq-skin .bn.hero2.gift .ht{line-height:1.32; gap:.08em; margin-bottom:.2em}
.barq-skin .bn.hero2.gift .ht .k{font-size:max(20px,4.4cqw)}
.barq-skin .bn.hero2.gift .ht .t{font-size:max(28px,6.1cqw)}
.barq-skin .bn.hero2.gift .s{margin-bottom:.6em}
.barq-skin .bn.hero2.gift .feats{margin-bottom:.7em}
.barq-skin .bn.hero2.gift .feats svg{width:1.8em; height:1.8em}

/* brand marks that carry their own background (Marvel's red block, the Champions
   League badge) keep their colours in dark mode instead of being inverted */
.barq-skin .brands img.bk{filter:none!important}


/* promo trio: the Champions League banner (owner, 2026-10-30) is wider than the
   other two, so on desktop its column widens in the same proportion - all three
   stand the same height and each is shown whole */
.barq-skin .promo.wide{aspect-ratio:1200/436}
@media (min-width:981px){.barq-skin .promos.has-wide{grid-template-columns:2.752fr 2.2197fr 2.2197fr}}
/* Champions League card: the badge fills the whole card (owner, 2026-10-31) */
.barq-skin .brands a.full{padding:0; overflow:hidden}
.barq-skin .brands a.full img{width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover}
/* featured rail: rows wrap and the last one is centred, so an odd number of
   picks never leaves a hole (seven since 2026-10-31) */
.barq-skin #featured .rail{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.barq-skin #featured .rail > .card{flex:0 0 calc((100% - 4 * 14px) / 5); min-width:0}
@media (max-width:980px){.barq-skin #featured .rail > .card{flex-basis:calc((100% - 2 * 14px) / 3)}}
@media (max-width:640px){.barq-skin #featured .rail > .card{flex-basis:calc((100% - 14px) / 2)}}
@media (max-width:420px){.barq-skin #featured .rail{gap:10px} .barq-skin #featured .rail > .card{flex-basis:calc((100% - 10px) / 2)}}
/* featured rail on phones: always two per row, never one card left alone
   (owner, 2026-10-31: "يكونو منتجين بالسطر") - an odd last card sits out */
@media (max-width:640px){.barq-skin #featured .rail > .card:last-child:nth-child(odd){display:none}}
/* phones: arrows on the home page's sideways rows (owner, 2026-10-31: "اعمل اسهم
   في الموبايل على السلايدرات يمين وشمال"). Trust and stats rows: shown only while
   the row overflows (JS adds .is-scroll), like the brands rail. */
.barq-skin .srail{position:relative}
.barq-skin .sarw{display:none}
.barq-skin .srail.is-scroll .sarw{display:grid; place-items:center; position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--card);
  box-shadow:var(--shadow-lg); color:var(--pink-deep); cursor:pointer; transition:opacity .2s}
.barq-skin .sarw.prev{right:-14px}
.barq-skin .sarw.next{left:-14px}
.barq-skin .sarw.is-off{opacity:.45}
/* hero slider: the arrows return on phones, in the dots row under the slide -
   on the slide they would cover its text, which runs nearly to the edge */
@media (max-width:980px){
  .barq-skin .slider .arw{display:grid; inset-block-start:auto; bottom:0; transform:none; width:32px; height:32px}
  .barq-skin .slider .arw.prev{inset-inline-end:0}
  .barq-skin .slider .arw.next{inset-inline-start:0}
  .barq-skin .slider .dots{height:40px; padding-block:8px 0; align-items:center}
}
/* featured rail: six picks since 2026-10-31, so six across on desktop - the
   narrower widths are restated after it so they still win there */
.barq-skin #featured .rail > .card{flex-basis:calc((100% - 5 * 14px) / 6)}
@media (max-width:980px){.barq-skin #featured .rail > .card{flex-basis:calc((100% - 2 * 14px) / 3)}}
@media (max-width:640px){.barq-skin #featured .rail > .card{flex-basis:calc((100% - 14px) / 2)}}
@media (max-width:420px){.barq-skin #featured .rail > .card{flex-basis:calc((100% - 10px) / 2)}}