/* ==========================================================================
   Hipton — main stylesheet
   Single source of truth for all site styling.
   Sections:
     1. Base & reset
     2. Utilities
     3. Loader overlay
     4. Header / navigation
     5. Side menu (mobile drawer)
     6. Home banner
     7. Product tabs (home)
     8. Product grid cards
     9. Product detail page
    10. Footer
    11. Responsive (tablet / mobile)
   ========================================================================== */


/* 1. Base & reset
   ========================================================================== */

html {
    scroll-behavior: smooth;

    /* A phone will let you keep dragging after the footer has finished,
       into empty space. That rubber-band is drawn by the browser *outside*
       the document, so no amount of layout work removes it -- the document
       is exactly as tall as its content and there is nothing down there to
       find. `overscroll-behavior` is the standard switch for it: it stops
       the gesture being passed to whatever sits behind the page (a
       pull-to-refresh affordance, the page behind in a back-swipe), and in
       the browsers that honour it, suppresses the elastic blank outright.

       The trade-off is that pull-to-refresh goes away as well. This is a
       static site with no offline app, so there is nothing for that gesture
       to refresh and little to lose.

       iOS Safari ignores this for the visual rubber-band, so an iPhone will
       still stretch a little past the end; that one belongs to the operating
       system rather than to the page. */
    overscroll-behavior-y: contain;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
}

a {
    text-decoration: none !important;
    transition: color .2s ease;
}

a:hover,
a:focus {
    color: #c41a20;
}

ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-top: 0;
}

img {
    vertical-align: middle;
}


/* 2. Utilities
   ========================================================================== */

.text-white {
    color: #fff;
}

.border {
    border: 1px solid #ddd;
}

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* Visible only to screen readers (skip link, labels) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Skip link: hidden until focused */
.skip-link {
    position: absolute;
    top: -60px;
    left: 10px;
    z-index: 1000;
    padding: 12px 20px;
    background: #fff;
    color: #c41a20;
    border-radius: 0 0 6px 6px;
    font-weight: 500;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 0;
}


/* 3. Loader overlay
   ========================================================================== */

#lodpopup {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 999999999;
}

.lodlogo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 265px;
    margin-top: -65.5px;
    transform: translateX(-50%);
    animation: lod-fade 1s infinite;
}

@keyframes lod-fade {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}


/* 4. Header / navigation
   ========================================================================== */

/* Height of the solid header bar, so that anything needing to clear it has
   one number to agree on instead of each doing its own arithmetic:
   7px padding + 46px logo + 15px padding. The mobile value is set in the
   responsive section (10 + 46 + 9). */
:root {
    --header-h: 68px;
}

/* The bar is a flex row so the hamburger (21.6px tall), the logo (46px tall)
   and the nav text (30.4px line box) are all centred on one axis. Previously
   each was nudged with a hard-coded margin-top, which left the nav sitting
   ~6px below the logo. */
.menubtn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 999;
    padding: 7px 20px 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
}

/* Logo and nav links are hidden over the dark banner, revealed on scroll */
.hmenubtn .header-left a img,
.hmenubtn .header-right ul {
    visibility: hidden;
    transition: .8s;
}

.hmenubtn.affix .header-left a img,
.hmenubtn.affix .header-right ul {
    visibility: visible;
}

/* Solid black bar once the page is scrolled past the banner */
.menubtn.hmenubtn.affix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    padding-bottom: 15px;
    z-index: 999999;
}

/* product.html has no banner to sit against, so the rule above is wrong there.
   It started transparent with the logo and nav hidden, filling in only after
   50px of scroll, which left the top of every product page looking headerless:
   a lone hamburger floating over the product photo, and no visible way back to
   the catalogue. On this page the bar is solid and fully visible from the
   first pixel -- it starts in the state it would otherwise scroll into. */
.page-product .menubtn.hmenubtn,
.page-product .menubtn.hmenubtn.affix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    padding-bottom: 15px;
    z-index: 999999;
}

.page-product .hmenubtn .header-left a img,
.page-product .hmenubtn .header-right ul {
    visibility: visible;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
}

.header-left {
    gap: 17px;
}

.header-left a {
    display: flex;
    align-items: center;
}

.header-right ul {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
}

.header-right a {
    color: #fff;
    font-size: 19px;
    line-height: 1;
}

/* Current page in the nav. The original stylesheet tried this with
   `li:last-child()` (empty parentheses), which is an invalid selector and so
   never applied. */
.header-right ul li.active a {
    color: #ed1c24;
}

.hmenubtn .header-right ul li a:hover {
    color: #c41a20;
}

.header-left .menubtnt1,
.menubtn .menubtnt2 {
    display: flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
}

.menubtn .menubtnt1 img,
.header-left .menubtnt1 img {
    width: 32px;
}

.menubtn .menubtnt2 img {
    width: 28px;
}


/* 5. Side menu (mobile drawer)
   ========================================================================== */

.sidemenu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    transition: left .8s;
}

.sidemenu.sidemenu2 {
    left: 0;
}

/* Dimmed page behind the open drawer */
.fadec {
    position: relative;
}

.fadec::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 999;
    display: block;
    background: rgba(0, 0, 0, .8);
    transition: .4s;
}

.menu-block {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.sidemenu .mclose-btn {
    display: flex;
    align-items: flex-start;
    padding: 25px 17px 0;
    background: #fff;
    z-index: 99999;
}

.sidemenu .mclose-btn .menubtnt3 {
    display: flex;
    background: none;
    border: none;
    padding: 0;
}

.main-menu {
    position: relative; /* containing block for .menu-bottom */
    display: flex;
    flex-direction: column;
    width: 31%;
    padding: 25px 46px 4px;
    background: #4a4a4a;
    color: #dbdbdb;
}

.main-menu ul li {
    margin-bottom: 18px;
}

.main-menu ul li a {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 22px;
    color: #dbdbdb;
}

.main-menu p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #dbdbdb;
    padding: 0 12px 18px;
    border-bottom: 1px solid #e31e24;
}

.main-menu p a {
    color: #fff;
    font-weight: 500;
}

.main-menu .menu-bottom ul {
    display: flex;
    gap: 0;
}

.main-menu .menu-bottom ul li a {
    font-size: 20px;
    padding: 17px 22px;
}

/* Anchored to the bottom of .main-menu and inset by the same 46px padding as
   the menu's own content, so this block lines up with the links above it.
   (It used to resolve against .sidemenu — a full-screen fixed element — so it
   was sized to 24% of the *viewport* and sat under the close-button column.) */
.menu-bottom {
    position: absolute;
    bottom: 0;
    left: 46px;
    right: 46px;
}

/* Animated search field in the drawer.
   The empty .tsearch-box container is present in every page's drawer, but its
   trigger button is not in the markup, so the field stays collapsed. These
   rules are what style it once a trigger is added back. */
.tsearch-box {
    position: relative;
    margin-bottom: 60px;
    padding-bottom: 10px;
    transition: .8s;
}

.tsearch-box::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 0;
    height: 1px;
    background: #e31e24;
    transition: .8s;
}

.tsearch-box.tsearch-box2::after {
    width: 100%;
}

.tsearch-box .form-control {
    width: calc(100% - 32px);
    margin-left: -95%;
    float: left;
    font-size: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    transition: margin-left .8s, color .8s;
}

.tsearch-box.tsearch-box2 .form-control {
    margin-left: 0;
}

.tsearch-box .form-control:focus {
    box-shadow: none;
}


/* 6. Home banner
   ========================================================================== */

.banner2 {
    position: relative;
}

/* Stretched to all four edges so it covers exactly the banner image, and laid
   out as a centred flex row. The blocks previously used percentage margins
   (margin-top: 20%), which CSS resolves against the containing block's
   *width* — that pushed the logo ~144px below the fan image on a 1440px
   screen, and the gap grew with the viewport. */
.banner2 .banner-content2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.bannerblock1,
.bannerblock2 {
    width: 50%;
    text-align: center;
}

.bannerblock1 img,
.bannerblock2 img {
    margin-top: 0;
}

/* The tagline in the markup is an <h1>, so a `h2` selector here never matched
   anything and the tagline silently fell back to Bootstrap's 36px. Both
   heading levels are listed so the rule holds whichever one the markup uses. */
.bannerblock2 h1,
.bannerblock2 h2 {
    margin: 18px 0 0;
    font-size: 30px;
}

/* Flex with an explicit gap, so the two buttons are spaced consistently and
   stay aligned even when they wrap onto separate lines on small screens.
   (Previously a margin-right on the first button plus vertical-align: top was
   needed to paper over the resulting baseline mismatch.) */
.bannerbtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 23px;
    margin-top: 32px;
}

.bannerbtn a {
    padding: 9px 50px;
    border: solid .5px #d8d8d8;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #fff;
}

.bannerbtn a:last-child {
    background: #fff;
    color: #403f3e;
}

.bannerbtn a:hover {
    background: #c41a20;
    border-color: #c41a20;
    color: #fff;
}


/* 7. Product tabs (home)
   ========================================================================== */

.heading {
    margin-bottom: 20px;
}

/* Matches the <h2> used for this section heading in the markup. */
.heading h2 {
    margin-bottom: 0;
    font-size: 28px;
    color: #1c1d1d;
    text-align: center;
}

/* Flex rather than inline-block: the pills then wrap as centred rows with a
   consistent gap, instead of sitting on a shared text baseline. */
ul.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

ul.tabs li {
    padding: 8px 20px;
    border: 1px solid;
    border-bottom: 2px solid #8b8b8b;
    border-radius: 30px;
    background: none;
    color: #222;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

ul.tabs li:hover {
    color: #ed1c24;
}

ul.tabs li.current {
    background: #ededed;
    color: #ed1c24;
    border-bottom-color: #ed1c24;
}

.tab-content {
    display: none;
    padding: 15px 0;
}

.tab-content.current {
    display: block;
}

/* Once the page is scrolled the header becomes a fixed bar, so anything an
   in-page link scrolls to has to come to rest below it. Without this, tapping
   "View Products" in the banner left the whole first row of category tabs
   hidden behind the bar: the browser put the target flush at the top of the
   viewport, under 65-68px of header. */
#tabs,
.tab-content {
    scroll-margin-top: calc(var(--header-h) + 10px);
}


/* 8. Product grid cards
   ========================================================================== */

.best-seller {
    position: relative;
    padding-bottom: 33px;
    box-shadow: 0 0 10px 0 #fff;
}

.bseller-box {
    margin-bottom: 15px;
}

/* Product photos have different intrinsic aspect ratios, so without a fixed
   box the caption in each card sits at a different height and the rows never
   line up. `contain` keeps the product undistorted and centred. */
.bseller-box img {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
    object-fit: contain;
}

.bseller-box a {
    display: block;
    margin-top: 18px;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;
    text-align: center;
}

/* The product name in a card caption. */
.bseller-box a span {
    color: #c41a20;
    font-weight: 600;
}

/* This used to draw a 1px grey vertical bar just before the name
   (`.bseller-box a span::after`, inherited from the original stylesheet), and
   the span carried `padding-left: 6px; margin-left: 4px` to make room for it.
   The bar was a separator for a two-part caption -- name, then a price or a
   call link -- but the markup only ever held the name, so it read as a stray
   "|" in front of every product. With nothing following it, the rule and its
   spacing are both gone. */


/* 9. Product detail page
   ========================================================================== */

/* margin-top clears the header, which is position:absolute on desktop and so
   sits out of the normal flow: 7px + 46px logo + 10px = 63px. The mobile
   override swaps this for a fixed header of the same height. */
.details {
    margin-top: 63px;
    padding: 40px 0 60px;
}

/* On product.html the header is a fixed bar from the first pixel (see section
   4), and what sits in <main> there is built at runtime -- a product, a
   not-found panel, or the whole catalogue. Pushing <main> down once is more
   robust than each of those clearing the header itself, and it means the
   clearance cannot be forgotten when a new view is added. */
.page-product main {
    padding-top: var(--header-h);
}

.page-product .details {
    margin-top: 0;
}

.product-image {
    width: auto;
    max-width: 100%;
    max-height: 400px;
    margin: 0 auto 20px;
}

/* Colour variants of one product, shown as thumbnails under the main image.
   Added when the per-variant pages were merged into a single page each. */
.product-gallery {
    margin-top: 26px;
    text-align: left;
}

.product-gallery .gallery-heading {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 400;
    color: #787878;
}

.product-gallery ul {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-gallery li {
    width: 84px;
    text-align: center;
}

.product-gallery img {
    display: block;
    width: 84px;
    height: 84px;
    padding: 4px;
    border: 1px solid #e5e5e5;
    background: #fff;
    object-fit: contain;
}

.product-gallery span {
    display: block;
    margin-top: 6px;
    color: #666;
    font-size: 12px;
    line-height: 1.3;
}

.product-title {
    font-size: 28px;
    color: #1c1d1d;
}

.spec-heading {
    font-size: 17px;
    color: #787878;
}

.specification-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5px;
}

.specification-table th,
.specification-table td {
    padding: 10px 15px;
    border: 1px dashed #ddd;
    text-align: left;
    vertical-align: top;
}

.specification-table th {
    width: 42%;
    font-weight: 500;
    color: #2e2e2e;
}

.specification-table td {
    color: #4a4a4a;
}

.stripped-table tbody tr:nth-child(even) {
    background-color: #efeff4;
}

/* Call-to-action buttons */
.callbtn,
.whatsappbtn {
    display: inline-block;
    margin-top: 20px;
    margin-right: 10px;
    padding: 10px 35px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
}

.callbtn {
    background: #ed1c24;
}

.whatsappbtn {
    background: #0dc143;
    margin-right: 0;
}

.callbtn:hover {
    background: #c41a20;
    color: #fff;
}

.whatsappbtn:hover {
    background: #0aa735;
    color: #fff;
}

/* Breadcrumb */
.breadcrumb {
    margin: 0 0 25px;
    font-size: 13px;
    color: #979797;
}

.breadcrumb li {
    display: inline-block;
}

.breadcrumb li + li::before {
    content: '/';
    display: inline-block;
    margin: 0 8px;
    color: #ccc;
}

.breadcrumb a {
    color: #979797;
}

.breadcrumb a:hover {
    color: #c41a20;
}

.breadcrumb .current {
    color: #4a4a4a;
}


/* 10. Footer
   ========================================================================== */

.top-footer {
    padding: 16px 0 14px;
    background: #dbdbdb;
}

.top-footer.htop-footer {
    padding: 21px 0 5px;
    background: #000;
}

.footer-logo {
    display: block;
    flex: 0 0 auto;
}

/* Logo (46px tall) and nav (24px line box) are centred on one axis instead of
   being baseline-aligned with a 16px nudge. */
.footer-left {
    display: flex;
    align-items: center;
}

.footer-left ul {
    display: flex;
    align-items: center;
    margin: 0 0 0 52px;
}

.footer-left ul li {
    display: flex;
    align-items: center;
}

.footer-left ul li a {
    padding: 5px 12px;
    border-right: 1.5px solid #979797;
    color: #4a4a4a;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.4;
}

.htop-footer .footer-left ul li a {
    color: #bdbdbd;
}

.footer-left ul li:last-child a {
    border-right: none;
}

.footer-left ul li a:hover {
    color: #c41a20;
}

.footer-right {
    display: flex;
    justify-content: flex-end;
}

.footer-right ul {
    display: flex;
    align-items: center;
    gap: 17px;
}

.footer-right ul li a {
    display: flex;
    padding: 5px;
    color: #747474;
    font-size: 18px;
}

.footer-right ul li a:hover {
    color: #c41a20;
}

.copyright {
    padding-top: 14px;
}

.copyright.hcopyright {
    padding-top: 0;
    background: #000;
}

.copyright-content {
    padding: 0 0 14px;
}

.copyright-content p {
    position: relative;
    margin-bottom: 0;
    color: #2e2e2e;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 13px;
    text-align: center;
}

.copyright-content p::before,
.copyright-content p::after {
    content: '';
    position: absolute;
    top: 19px;
    display: block;
    width: 38%;
    height: 1px;
    background: #979797;
}

.copyright-content p::before {
    left: 0;
}

.copyright-content p::after {
    right: 0;
}

.hcopyright .copyright-content p {
    color: #fff;
}

.copyright-content p span {
    margin-right: 13px;
}


/* 11. Messages and related products
   ========================================================================== */

/* Shown instead of the catalogue when it cannot be built: no JavaScript, an
   unknown ?id=, or products.js failing to load. Centred column so it stays
   readable on a phone as well as a desktop. */
.message-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 30px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    text-align: center;
}

.message-panel h1 {
    margin-bottom: 20px;
}

.message-panel p {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
}

/* The id the visitor typed is echoed back, so it can wrap rather than pushing
   the panel wide on a narrow screen. */
.message-panel code {
    word-break: break-all;
    color: #1c1d1d;
}

/* "More in <category>" strip at the foot of a product page. Reuses the product
   grid cards; only the spacing is its own, so a related row lines up with the
   catalogue above it. */
.related-products {
    padding-bottom: 60px;
}


/* 12. Responsive
   ========================================================================== */

/* Tablet: 768px – 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .main-menu {
        width: 48%;
    }

    .main-menu ul li a {
        font-size: 19px;
    }

    .footer-left ul {
        margin-left: 25px;
    }

    .copyright-content p::before,
    .copyright-content p::after {
        width: 32%;
    }
}

/* Mobile: up to 767px */
@media only screen and (max-width: 767px) {
    /* 10px padding + 46px logo + 9px padding */
    :root {
        --header-h: 65px;
    }

    .details {
        margin-top: 65px;
        padding: 25px 0 40px;
    }

    /* Header becomes a fixed bar so nav stays reachable */
    .menubtn.hmenubtn,
    .menubtn.hmenubtn.affix {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px 6px 9px;
    }

    /* The desktop product-page rule sets padding-bottom, which would win on
       specificity and make the mobile bar taller than --header-h. */
    .page-product .menubtn.hmenubtn,
    .page-product .menubtn.hmenubtn.affix {
        padding: 10px 6px 9px;
    }

    /* Home banner on a phone.

       The layout is deliberately unchanged from desktop: product photo on the
       left, logo and text on the right, as a 50/50 flex row. What needed
       fixing was the treatment inside that row, not the row itself:

       - the tagline inherited Bootstrap's 36px h1 and wrapped onto three lines
         in a 180px column, so it is sized down here;
       - the buttons were 32px tall, under the 44px a thumb needs, and do not
         fit two abreast in half a phone, so they stack full width;
       - the 1920x900 backdrop was forced into a 375x290 box, stretching it
         from an aspect of 2.13 to 1.29. It is now a covering backdrop that
         crops rather than squashes, which also keeps its alt text in the
         accessibility tree;
       - the banner takes its height from its content, and the top padding
         clears the header, which on a phone sits over the banner from the
         very first pixel. */
    .banner2 {
        background: #000;
    }

    .banner2 > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: center;
    }

    .banner2 .banner-content2 {
        /* Relative rather than the base `inset: 0`, so the content decides the
           height of the banner and the absolute backdrop covers it. The base
           offsets are cleared because they still apply to a relative box. */
        position: relative;
        inset: auto;
        padding: var(--header-h) 0 20px;
    }

    .bannerblock2 img {
        width: 104px;
    }

    .bannerblock2 h1,
    .bannerblock2 h2 {
        margin: 10px 0 0;
        font-size: 19px;
        line-height: 1.35;
    }

    /* Two buttons side by side need ~250px and the right half of a 375px
       phone is ~180px, so they stack and fill their column instead of
       overflowing it. 12px of vertical padding brings each to ~47px: the 4px
       it had before was a 32px target, well under the 44px a thumb needs. */
    .bannerbtn {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 16px;
    }

    .bannerbtn a {
        padding: 12px 16px;
        font-size: 13px;
        text-align: center;
    }

    /* Touch targets. Anything a finger has to hit wants roughly 44px in its
       smallest dimension (Apple HIG / Material guidance). Measured on a 375px
       phone before this block: 32px hamburger, 32px banner buttons, 37px
       tabs, 24px drawer close button, 22px footer links, 28px social icons
       and a 14px-tall email link. */
    .header-left .menubtnt1 {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .sidemenu .mclose-btn {
        padding: 12px 8px 0;
    }

    .sidemenu .mclose-btn .menubtnt3 {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* Drawer links were 18px text with no padding, giving a ~28px target. The
       extra room comes out of the gap between items, so the drawer keeps its
       overall height. */
    .main-menu {
        width: 100%;
        padding: 17px 20px 4px;
    }

    .main-menu .tsearch-box {
        margin-bottom: 33px;
    }

    .main-menu ul li {
        margin-bottom: 10px;
    }

    .main-menu ul li a {
        display: block;
        padding: 8px 0;
        font-size: 18px;
    }

    .main-menu p {
        font-size: 12px;
    }

    .main-menu p a {
        display: inline-block;
        padding: 13px 0;
    }

    .menu-bottom {
        left: 20px;
        right: 20px;
    }

    ul.tabs li {
        margin-bottom: 10px;
        padding: 12px 14px;
        font-size: 13px;
    }

    .tab-content {
        padding: 15px 0;
    }

    /* Two cards per row on a phone, so the 200px card image is nearly square
       against a ~170px column and pushed its caption out of proportion. */
    .bseller-box img {
        height: 150px;
    }

    .footer-left ul {
        margin-left: 0;
    }

    .footer-left ul li a {
        padding: 13px 9px;
        font-size: 14px;
    }

    /* Icon-only social links: padding alone left them 30-35px wide, so the
       target is sized explicitly and the glyph centred in it. */
    .footer-right ul li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .copyright-content p::before,
    .copyright-content p::after {
        display: none;
    }

    .callbtn,
    .whatsappbtn {
        padding: 12px 24px;
        font-size: 14px;
    }

    /* Breadcrumb links are 13px inline text, a 15px target. inline-block plus
       vertical padding gives them a 44px row without disturbing the `/`
       separator, which is generated from the li, not the link. */
    .breadcrumb li a {
        display: inline-block;
        padding: 14px 0;
    }
}