/* Branch pages (johor.php, sabah.php) and their trading category pages (johor-office-chairs.php ...). --wbb-top = main menu height (js/branch.js). */
:root { --wbb-top: 72px; --wbb-red: #ce3232; --wbb-navy: #101d39; --wbb-text: #252525; --wbb-grey: #757575; --wbb-line: #e6e6e6; }
.BranchPG { background: #fff; }
/* (the site sets overflow-x: hidden on body, which turns body into a scroll box and stops the sticky sub-menu; clip does the same job without that) */
html:has(body.BranchPG) { overflow-x: clip; }
body.BranchPG { overflow-x: clip !important; overflow-y: visible !important; }
.BranchPG h1, .BranchPG h2 { font-family: 'Geomanist', sans-serif; font-weight: normal; color: #1a1a1a; }
.wbb-anchor { position: relative; top: calc(-1 * (var(--wbb-top) + 57px)); height: 0; visibility: hidden; }

/* banner: the branch photo, darkened on the left where the text sits */
.wbb-hero { position: relative; margin-top: var(--wbb-top0, var(--wbb-top)); background: #1a1a1a center / cover no-repeat; }
.wbb-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.86) 38%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.1) 100%); }
.wbb-hero-in { position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; padding-bottom: 56px; }
.wbb-hero-kicker { margin: 0 0 10px; font-family: 'Geomanist_r', sans-serif; font-size: 17px; color: rgba(255,255,255,.88); }
.wbb-hero h1 { margin: 0 0 14px; font-size: 52px; line-height: 1.1; color: var(--wbb-red); }
.wbb-hero-line { max-width: 520px; margin: 0 0 28px; font-family: 'Geomanist_r', sans-serif; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.88); }
.wbb-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.wbb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
    font-family: 'Geomanist', sans-serif; font-size: 16px; line-height: 1; text-decoration: none !important; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wbb-btn .fa { font-size: 20px; }
.wbb-btn--wa, .wbb-btn--wa:visited { background: #25d366; color: #fff !important; }
.wbb-btn--wa:hover { background: #1fb457; }
.wbb-btn--light, .wbb-btn--light:visited { background: #fff; color: var(--wbb-text) !important; }
.wbb-btn--light:hover { background: #f1f1f1; }
.wbb-btn--line, .wbb-btn--line:visited { background: #fff; color: var(--wbb-text) !important; border-color: #cfcfcf; }
.wbb-btn--line:hover { border-color: var(--wbb-text); }

/* branch sub-menu, sticky under the main menu */
.wbb-subnav { position: sticky; top: var(--wbb-top); z-index: 90; background: #f3f3f3; border-bottom: 1px solid #ececec; }      /* (the blog page's light grey) */
.wbb-subnav-in { display: flex; align-items: center; gap: 28px; min-height: 56px; }
.wbb-subnav-name { font-family: 'Geomanist', sans-serif; font-size: 16px; color: var(--wbb-red) !important; text-decoration: none !important; white-space: nowrap; }
.wbb-subnav-links { display: flex; gap: 24px; }
.wbb-subnav-links a { font-family: 'Geomanist_r', sans-serif; font-size: 15px; color: #555 !important; text-decoration: none !important; }
.wbb-subnav-links a:hover { color: var(--wbb-red) !important; }
.wbb-subnav-wa { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: #25d366; color: #fff !important;
    font-family: 'Geomanist', sans-serif; font-size: 14px; text-decoration: none !important; }
.wbb-subnav-wa .fa { font-size: 18px; }
/* location bar (2026-10-06): pin + branch name + "Change", a divider, then this branch's two tabs (the current one underlined) */
.wbb-subnav-in { gap: 16px; }
.wbb-subnav-loc { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geomanist', sans-serif; font-size: 16px; white-space: nowrap; }
.wbb-subnav-loc .fa { font-size: 19px; color: var(--wbb-red); }
.wbb-subnav-loc a { display: inline !important; color: #1a1a1a !important; text-decoration: none !important; }
.wbb-subnav-change { display: inline !important; font-family: 'Geomanist_r', sans-serif; font-size: 13px; color: #777 !important; text-decoration: underline !important; white-space: nowrap; }
.wbb-subnav-change:hover { color: var(--wbb-red) !important; }
.wbb-subnav-sep { flex: none; width: 1px; height: 22px; margin: 0 8px; background: #d9d9d9; }
.wbb-subnav-links { align-self: stretch; }
.wbb-subnav-links a { position: relative; display: flex !important; align-items: center; white-space: nowrap; }
.wbb-subnav-links a.is-on { color: #1a1a1a !important; }
.wbb-subnav-links a.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wbb-red); }
.wbb-subnav-spacer { height: var(--wbb-top0, var(--wbb-top)); }

.wbb-head { margin: 0 0 28px; }
.wbb-head h2 { margin: 0 0 6px; font-size: 40px; line-height: 1.15; }
.wbb-head p { margin: 0; font-family: 'Geomanist_r', sans-serif; font-size: 16px; color: var(--wbb-grey); }

/* WriteBest range: the home page category cards (css/home-categories.css), with a little less room above */
#wb-cats.wbb-range { padding-top: 64px; }
/* header and cards line up with the content edges (like the sections below): the arrows sit outside the content where there is room,
   otherwise over the first / last card */
#wb-cats.wbb-range .wb-cats-head { padding: 0; }
#wb-cats.wbb-range .wb-cats-slider { display: block; position: relative; }
#wb-cats.wbb-range .wb-cats-btn { position: absolute; top: 50%; z-index: 2; margin-top: -26px; }
#wb-cats.wbb-range .wb-cats-prev { left: -64px; }
#wb-cats.wbb-range .wb-cats-next { right: -64px; }
@media (max-width: 1299px) {
    #wb-cats.wbb-range .wb-cats-btn { background: rgba(80, 80, 80, .45); }
    #wb-cats.wbb-range .wb-cats-btn:hover:not(:disabled) { background: rgba(80, 80, 80, .65); }
    #wb-cats.wbb-range .wb-cats-prev { left: 10px; }
    #wb-cats.wbb-range .wb-cats-next { right: 10px; }
}

/* the branch's own range: cards like the WriteBest range above (4 a row, same corners, title, text and hover shadow),
   with the photo on top on a light grey square (the photos are cut-outs on white) and the name + a line below */
.wbb-trading { padding: 64px 0 72px; background: #f3f3f3; }
.wbb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wbb-tile { position: relative; display: flex !important; flex-direction: column; border-radius: 10px; overflow: hidden; background: #fff; color: var(--wbb-text) !important;
    text-decoration: none !important; transition: box-shadow .3s ease; }
a.wbb-tile:hover { box-shadow: 0 5px 12px rgba(0,0,0,.2); }
.wbb-tile-img { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.wbb-tile-img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: transform .4s ease; }   /* (white card: the photos sit on white, no grey blend) */
a.wbb-tile:hover .wbb-tile-img img { transform: scale(1.04); }
.wbb-tile-txt { display: block; padding: 18px 20px 22px; }
.wbb-tile-txt b { display: block; margin: 0 0 8px; padding-right: 28px; font-family: 'Geomanist', sans-serif; font-size: 20px; line-height: 1.3; font-weight: normal; color: #1a1a1a; }      /* (black: only the arrow is red) */
.wbb-tile-txt span { display: block; font-family: 'Geomanist_r', sans-serif; font-size: 14px; line-height: 1.5; color: #555; }
.wbb-tile-txt { position: relative; }
.wbb-tile-txt .fa { position: absolute; top: 22px; right: 20px; font-size: 18px; color: #ce3232; }
.wbb-tile.is-soon { opacity: .75; }
.wbb-soon { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: #f1f1f1; font-family: 'Geomanist_r', sans-serif; font-size: 12px; font-style: normal; color: var(--wbb-grey); }

/* contact: the Locations page card + map */
.wbb-contact { padding: 72px 0 88px; }
.wbb-contact-grid { display: grid; grid-template-columns: minmax(280px, 4fr) 8fr; gap: 30px; align-items: stretch; }
.wbb-card { margin: 0 !important; padding: 26px 30px 30px !important; }
.wbb-card .card_contacts_p { font-family: 'Geomanist_r', sans-serif; font-size: 16px; line-height: 1.55; }
.wbb-card .card_contacts_p b { font-family: 'Geomanist', sans-serif; font-weight: normal; }
.wbb-card .card_contacts_p small { font-size: 13px; color: rgba(255,255,255,.6); }
.wbb-card a { color: #fff !important; }
.wbb-card .card_contacts_p a { display: inline !important; }      /* (the site makes links blocks: with the <br> between the numbers that left an empty line) */
.wbb-card-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.wbb-card-btns .contacts_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-width: 150px; margin: 0; }
.wbb-map { width: 100%; height: 100%; min-height: 420px; border-radius: 16px; }

/* trading category page */
.wbb-cat-head { padding: 40px 0 8px; }
.wbb-crumbs { margin: 0 0 22px; font-family: 'Geomanist_r', sans-serif; font-size: 14px; color: #a3a3a3; }
.wbb-crumbs a, .wbb-crumbs span { display: inline !important; float: none !important; }
.wbb-crumbs a { color: #a3a3a3 !important; }
.wbb-crumbs span { color: #1a1a1a; }
.wbb-cat-head h1 { margin: 0 0 10px; font-size: 44px; line-height: 1.1; }
.wbb-cat-intro { max-width: 640px; margin: 0 0 6px; font-family: 'Geomanist_r', sans-serif; font-size: 17px; line-height: 1.55; color: #555; }
.wbb-cat-note { margin: 0; font-family: 'Geomanist_r', sans-serif; font-size: 14px; color: var(--wbb-grey); }
.wbb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.wbb-chips a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--wbb-line); font-family: 'Geomanist_r', sans-serif; font-size: 14px; color: var(--wbb-text) !important; text-decoration: none !important; }
.wbb-chips a span { color: var(--wbb-grey); }
.wbb-sec { padding: 36px 0 64px; scroll-margin-top: calc(var(--wbb-top) + 72px); }
.wbb-sec h2 { margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--wbb-line); font-size: 28px; }
.wbb-sec h2 span { margin-left: 8px; font-family: 'Geomanist_r', sans-serif; font-size: 15px; color: var(--wbb-grey); }
.wbb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.wbb-item { display: block; padding: 0; border: 0; background: none; text-align: center; cursor: pointer; scroll-margin-top: calc(var(--wbb-top) + 80px); }
.wbb-item-img { display: block; aspect-ratio: 1 / 1; margin: 0 0 12px; border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .25s ease; }
.wbb-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 2%; transition: transform .35s ease; }
.wbb-item b { display: block; font-family: 'Geomanist', sans-serif; font-size: 17px; font-weight: normal; color: #1a1a1a; }
.wbb-item > span:last-child { display: block; margin-top: 2px; font-family: 'Geomanist_r', sans-serif; font-size: 13px; color: var(--wbb-grey); }
@media (hover: hover) { .wbb-item:hover .wbb-item-img { box-shadow: 0 5px 14px rgba(0,0,0,.12); } .wbb-item:hover .wbb-item-img img { transform: scale(1.03); } }
.wbb-item:focus-visible { outline: 2px solid var(--wbb-red); outline-offset: 4px; border-radius: 10px; }

/* product pop-up (white, full screen) */
.wbb-lb { position: fixed; inset: 0; z-index: 2000; background: #fff; display: flex; align-items: center; justify-content: center; }
.wbb-lb[hidden] { display: none; }
body.wbb-lb-open { overflow: hidden; }
body.wbb-lb-open .whats-app, body.wbb-lb-open .wb-wa-pop, body.wbb-lb-open .wb-back-to-top { visibility: hidden; }
.wbb-lb-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 56px; align-items: center; width: min(1180px, calc(100% - 160px)); max-height: 100%; }
.wbb-lb-img { display: flex; align-items: center; justify-content: center; height: min(78vh, 720px); }
.wbb-lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wbb-lb-sec { margin: 0 0 8px; font-family: 'Geomanist_r', sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--wbb-grey); }
.wbb-lb-title { margin: 0 0 8px; font-size: 32px; line-height: 1.2; }
.wbb-lb-code { margin: 0 0 22px; font-family: 'Geomanist_r', sans-serif; font-size: 15px; color: #555; }
.wbb-lb-vars { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.wbb-lb-vars:empty { display: none; }
.wbb-var { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; padding: 8px 6px; border: 1px solid var(--wbb-line); border-radius: 10px; background: #fff; cursor: pointer; }
.wbb-var img { width: 56px; height: 56px; object-fit: contain; }
.wbb-var span { font-family: 'Geomanist_r', sans-serif; font-size: 12px; line-height: 1.3; color: #555; text-align: center; }
.wbb-var.is-on { border-color: #1a1a1a; }
.wbb-var.is-on span { color: #1a1a1a; }
.wbb-lb-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.wbb-lb-note { margin: 0; font-family: 'Geomanist_r', sans-serif; font-size: 13px; color: var(--wbb-grey); }
.wbb-lb-close { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; border: 0; background: none; font-size: 40px; line-height: 1; color: #1a1a1a; cursor: pointer; }
.wbb-lb-nav { position: absolute; top: 50%; width: 48px; height: 64px; margin-top: -32px; border: 0; background: none; font-size: 30px; color: #8a8a8a; cursor: pointer; }
.wbb-lb-nav:hover, .wbb-lb-close:hover { color: var(--wbb-red); }
.wbb-lb-prev { left: 16px; }
.wbb-lb-next { right: 16px; }

@media (max-width: 900px) {
    .wbb-contact-grid { grid-template-columns: 1fr; }
    .wbb-map { min-height: 320px; }
    .wbb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wbb-lb { align-items: flex-start; overflow-y: auto; }
    .wbb-lb-in { grid-template-columns: 1fr; gap: 18px; width: calc(100% - 40px); padding: 64px 0 32px; }
    .wbb-lb-img { height: 46vh; }
    .wbb-lb-nav { top: 23vh; margin-top: 32px; }
    .wbb-lb-prev { left: 0; } .wbb-lb-next { right: 0; }
    .wbb-lb-close { top: 8px; right: 8px; }
}
@media (max-width: 800px) {
    .wbb-hero-in { min-height: 340px; }
    .wbb-hero h1 { font-size: 38px; }
    .wbb-hero-line { font-size: 16px; }
    .wbb-head h2 { font-size: 30px; }
    .wbb-cat-head h1 { font-size: 34px; }
    .wbb-trading, .wbb-contact { padding: 48px 0 56px; }
}
@media (max-width: 1100px) { .wbb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .wbb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .wbb-hero::before { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.92) 100%); }
    .wbb-subnav-in { gap: 14px; }
    .wbb-subnav-name { display: none; }
    .wbb-long, .wbb-subnav-sep { display: none; }       /* "Johor Bahru  Change  |  Products  Visit & contact" in one line */
    .wbb-subnav-loc, .wbb-subnav-links a { font-size: 14px; }
    .wbb-subnav-links { gap: 16px; margin-left: auto; }
    .wbb-subnav-wa { display: none; }                    /* (the floating WhatsApp button is enough on phones) */
    .wbb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
    .wbb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .wbb-tile-txt { padding: 12px 12px 16px; }
    .wbb-tile-txt b { font-size: 16px; padding-right: 0; }
    .wbb-tile-txt span { font-size: 13px; }
    .wbb-tile-txt .fa { display: none; }
    .wbb-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .wbb-item-img, .wbb-item-img img { transition: none; } }