/* ==========================================================================
   Nepter overrides
   Loaded after the Aguapure template CSS. Keep template files untouched and
   put every project-specific delta here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Vertical rhythm: section spacing.

   Aguapure sets nearly every section to `padding: 110px 0 110px`, so any two
   stacked sections sit 220px apart, and `.sec-title` adds another 70px between
   a section's heading and its content. Nothing in responsive.css reduces
   either - it restates the same values at 992-1199px, 768-991px and =<767px -
   so a phone carries the same 220px band as a 4K monitor.

   Reduced to 40px, which puts sections 80px apart, and the heading gap to 22px.
   Only the section classes the site actually renders are listed, so this stays
   an explicit, auditable set rather than a blanket `[class*="-area"]` rule that
   would also catch cards and header components.

   These were 80/45 in the first pass. Halved again after the homepage showed
   the cost on a phone: the gap above "Our Products", stacked under a heading
   that wraps to three lines at 38px, filled the screen before a single product
   appeared. Applied site-wide rather than to phones alone, so the rhythm stays
   one thing rather than two.

   Deliberately left alone:
     - `.breadcrumb-area` (229/124) - that padding sits inside the banner's
       background image, so it is banner height, not a gap between sections;
     - `.fact-counter-area` (54/51) - already a deliberately thin band;
     - `.shop-page-one` (40) - the gap between the banner and the promo band on
       /products, set to that value on purpose;
     - `.fact-counter-style3-area` - carries no padding at all;
     - `.our-service-location-area` - part of the header.

   `.footer` (110/93) was on this list too, as internal to the blue block rather
   than a gap between sections. It is handled further down instead.

   nepter.css loads after responsive.css and these selectors match its
   specificity, so a plain rule wins at every breakpoint. Media queries add no
   specificity of their own.
   -------------------------------------------------------------------------- */

/* the standard 110/110 sections */
.service-style1-area,
.about-style1-area,
.choose-style3-area,
.blog-details-area,
.blog-page-two,
.main-contact-form-area,
.faq-style1-area,
.faq-form-area,
.pricing-plan-style2-area {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* sections whose bottom padding is already short because the next element
   overlaps them or they end flush - only the top is ours to change */
.about-style3-area,
.working-process-style2-area,
.choose-style1-area {
    padding-top: 40px;
}

/* Sections ending in a card grid carry a reduced bottom because the last row of
   cards adds its own margin. Kept the same way: the two together should come to
   40px, as they previously came to 80px.
     blog  50 + 30 (`.single-blog-style1`)   -> 10 + 30
   The homepage products band is a carousel now, so its cards contribute no
   bottom margin - what sits under them is the dots, and this padding under
   those. */
.shop-style1-area    { padding-bottom: 20px; }
.blog-style1-area    { padding-top: 40px; padding-bottom: 10px; }

.google-map-area     { padding-bottom: 40px; }

/* Heading to content, inside a section. */
.sec-title {
    padding-bottom: 22px;
}

/* Two containers state their own `.sec-title` padding, which is more specific
   than the rule above and would otherwise survive it. (The others that do -
   `.blog-style1_top` and `.about-style1_top` - set it to 0 because their
   heading sits beside a button, and are left that way.) */
.choose-style1-content .sec-title {            /* homepage, Why Choose Us   */
    padding-bottom: 22px;
}

.about-style1-tab-content .inner-content .sec-title {  /* about page tabs   */
    padding-bottom: 16px;
}

/* The products section states its own, which is more specific than the rule
   above and would otherwise survive it (`style.css:1759`). Its top padding
   stands in for the section's, which is 0.

   Halved from 80px: this is the whole gap between the hero and the products
   heading, and on a phone it was stacked under a heading that already runs to
   three lines at 38px - the two together filled the screen before a single
   product appeared. */
.shop-style1-area .sec-title {
    padding-top: 40px;
    padding-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Subscription plans: one card at a time beside the request form.

   `.single-price-box` has no width of its own, so in a half-width column it
   would stretch to 570px - the template drew it for the ~370px of a col-xl-4,
   and at 570px the centred price and short feature list look marooned. Held to
   370px and centred in the column instead, which also gives the carousel dots
   an obvious centre line.
   -------------------------------------------------------------------------- */
.subscription-plans-box .single-price-box--style2-outer {
    max-width: 370px;
    margin: 0 auto;
}

/* The blue panel that flipped in on hover is gone, and with it the reason for
   the template's `:hover .static-content { opacity: 0 }` (style.css:4244). Left
   alone that rule now fades the card to nothing on hover, because there is no
   longer a second panel behind it to reveal. */
.subscription-plans-box .single-price-box--style2-outer:hover .static-content {
    opacity: 1;
}

/* Matching the card to the request form beside it.

   Measured, the form is 535px while the card ran 210-840. Three things caused
   that, and all three are on the card side - the form is untouched:

     1. `.single-price-box--style2-outer` carries `padding: 30px 0 40px`
        (style.css:4232), so the card started 30px below the form and its tail
        hung 40px past. That padding existed to give the flip panel room to
        scale from; there is no flip panel now.

     2. The card's own `47px / 44px` padding (style.css:4089) made its natural
        height about 560px, still over the form's 535px. Trimmed to 30px, which
        brings it under so the stretch below can do the rest.

     3. The carousel dots sat in normal flow, so they added their height to the
        column and the column then stretched past the form. Taken out of flow,
        they no longer influence it.

   With those out of the way the column height is simply the form's, and the
   height chain hands it to the card: box fills column, carousel fills box,
   `.owl-stage-outer` takes the rest, then stage, item and card each resolve
   100% against it. `.owl-item` is `float: left` with `min-height: 1px`
   (owl.css:42-47), which resolves a percentage height once its parent has a
   definite one. `autoheight` is off for the same reason - it would set an
   inline stage height that fights this.

   Only from 992px, where the two columns actually sit side by side. */
@media only screen and (min-width: 992px) {

    .subscription-plans-box {
        position: relative;
    }

    .subscription-plans-box,
    .subscription-plans-box .owl-carousel {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .subscription-plans-box .owl-stage-outer {
        flex: 1 1 auto;
    }

    .subscription-plans-box .owl-stage,
    .subscription-plans-box .owl-item,
    .subscription-plans-box .single-price-box--style2-outer,
    .subscription-plans-box .single-price-box.static-content {
        height: 100%;
    }

    .subscription-plans-box .single-price-box--style2-outer {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Measured off the rendered page, the card came to 564px against the form's
       534px. Until it is the shorter of the two the column sizes to the card,
       so the stretch above has nothing to stretch into and the 30px overhang
       just stays.

       That 30px plus a few to spare comes off the bottom, not the top: the last
       list item has no rule under it, so the space below it is dead, while the
       top padding is what keeps the title off the card edge. */
    .subscription-plans-box .single-price-box.static-content {
        padding: 30px 30px 10px;
        /* taller than its contents now, so centre them rather than leaving the
           price list floating above a gap */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* template is `21px 0 19px`: the top half of the gap under the paragraph,
       and dead space under the last list item, which has no rule beneath it */
    .subscription-plans-box .price-list ul {
        padding-top: 8px;
        padding-bottom: 4px;
    }

    /* The gap under "Five 12L jars delivered every month..." was 55px: 34px of
       margin on the paragraph plus 21px of padding on top of the list
       (style.css:4192, 4252). Down to 18px, which takes about 37px off the
       card's natural height and leaves it comfortably under the form's, so the
       stretch above has room to land the two bottom edges together. */
    .subscription-plans-box .single-price-box--style2 .text {
        margin-bottom: 10px;
    }


    /* Below the card rather than part of it, so the column measures the card
       alone and settles at the form's height.

       The selector has to carry `.owl-carousel.owl-dot-style1` to set the
       margin: `style.css:560` states it with `!important` at three classes, so
       two classes lost and the dots kept sitting 50px down - which, inside a
       40px band, put them past the section and over the footer. */
    .subscription-plans-box .owl-carousel.owl-dot-style1 .owl-dots {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   Contact page info cards: one height for all four.

   Their content is now a single line each, so they match on their own. This
   keeps them matched if a line ever grows: `.row` stretches the columns, and
   the card takes that height less the 30px bottom margin it already carries
   (contact-page.css:9).
   -------------------------------------------------------------------------- */
.breadcrumb-area .single-contact-info-box {
    height: calc(100% - 30px);
}

/* --------------------------------------------------------------------------
   Service area map, contact page.

   Ours is a different class so map-script.js leaves it alone, which means it
   needs its own height. 500px, the same as the template gives `.map-canvas`
   (contact-page.css:320-323), so the section is unchanged in size.
   -------------------------------------------------------------------------- */
.service-area-map {
    position: relative;
    display: block;
    width: 100%;
    height: 500px;
}

/* --------------------------------------------------------------------------
   QA/QC badge in the About certification box.

   The template's badge was 140x117 and sat at natural size inside a 170px
   table-cell (`about-section.css:33-37`). Ours is square and 1254px, and the
   global `img { max-width: 100% }` would render it at the full 170px - taller
   than the old one, which pushes the box from roughly 169px to 222px.

   Held to 140px so it takes the same width as the badge it replaces, and
   centred, because a 140px image left-aligned in a 170px cell reads as
   misaligned against the divider on the right.
   -------------------------------------------------------------------------- */
.certificate-logo img {
    display: block;
    max-width: 140px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Promotion banners, products page.

   Sized to the `.shop-page-top-info` bar it replaces, so the page is exactly as
   tall as it was before: that bar was a single 55px row (the height of its sort
   select) plus `padding-bottom: 60px` - 115px in total, sitting inside
   `.shop-page-one` after its 90px top padding.

   That 115px here is 14px of padding, a 65px row, 22px of carousel dots and
   14px of padding. The dots' template margin is 50px, which alone would eat the
   whole allowance and leave them flush against the grid, so it comes down to
   12px.

   The band is filled with `--thm-base` rather than left white. A white strip on
   a white page is invisible, which is why it previously needed flashing badges
   to be noticed at all; a solid brand-blue band against the white above it and
   the grey grid below is unmissable on contrast alone, needs no animation, and
   carries no accessibility risk. Same treatment the footer already uses, so it
   reads as part of the design rather than bolted on.

   Text colours are the footer's too: white headings, `#ccdbeb` body - both
   already proven against this exact blue.
   -------------------------------------------------------------------------- */
/* `.shop-page-one` opens with 90px of white (style.css:5850-5855), which is
   fine when the first thing under it is white - the gap is invisible. Against
   a solid blue band 90px reads as a stripe of dead space, so it comes down to
   40px: enough to separate the band from the banner without stranding it.

   Not scoped to a modifier: `.shop-page-one` is only on /products, which opens
   with the promo band. */
.shop-page-one {
    padding-top: 40px;
}

.promo-banner-area {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--thm-base);
    padding: 14px 0;
}

/* The shine. A highlight travels edge to edge and bounces back, never leaving
   the band - light moving over a sign rather than something switching on and
   off. Continuous motion is what catches peripheral vision; a blink is what the
   eye learns to ignore as an advert.

   It stays on screen because the travel is bounded by the band, not by the
   viewport: the highlight is 45% of the band wide, and `translateX` is a
   percentage of the element's own width, so 116% of 45% lands its right edge
   just inside the band's right edge. Both numbers are relative, so this holds
   at any width without a media query - the sweep is simply shorter on a phone
   and longer on a monitor.

   The 4% start and the 4% short of the far end are the skew's doing: leaning
   the highlight 20 degrees pushes its top and bottom corners about 20px past
   its own box, and `overflow: hidden` would clip that into a flat edge right as
   it turned around.

   `alternate` gives the bounce, rather than a keyframe that walks back, so the
   return leg is the outbound one reversed and the two can never drift apart.
   `ease-in-out` eases both ends, which is what stops a turnaround looking like
   a snap.

   14% white: bright enough to read as light, not so bright it competes with the
   offer text. It cannot flash, so the seizure threshold that governed the old
   badges (WCAG 2.3.1) does not come into it at all. */
.promo-banner-area:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg) translateX(4%);
    animation: nepter-promo-shine 2.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes nepter-promo-shine {
    from { transform: skewX(-20deg) translateX(4%); }
    to   { transform: skewX(-20deg) translateX(116%); }
}

/* text above the sweep, not under it */
.promo-banner-area > .container {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .promo-banner-area:before {
        animation: none;
    }
}

.promo-banner-area .single-promo-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 30px heading + 4px + 26px copy is 60px, so 65px holds it with air to
       spare and keeps the band's total at 115px */
    min-height: 65px;
    padding: 0 15px;
}

.promo-banner-area .single-promo-banner h3 {
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 4px;
}

.promo-banner-area .single-promo-banner p {
    color: #ccdbeb;
    margin: 0;
}

/* The dots' template margin is 50px, which alone would overrun the band's
   remaining allowance. Inactive dots also need lifting off the blue - the
   template's `#d1d9dd` was chosen against white. */
.promo-banner-area .owl-carousel.owl-dot-style1 .owl-dots {
    margin-top: 12px !important;
}

.promo-banner-area .owl-carousel.owl-dot-style1 .owl-dots .owl-dot {
    background: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   Keyword search on the products page.

   A class rather than jQuery's `.hide()`, which writes `display: none` inline:
   the sort control re-appends these same columns, and inline styles would have
   to be carried across that by hand. A class survives the move untouched.

   The column selector is `[class*="col-"].is-hidden` and not the shorter
   `> .is-hidden` it was, because the grid sizing further down sets
   `.js-product-grid > [class*="col-"] { display: flex }`. An attribute selector
   weighs the same as a class, so the two were tied at (0,2,0) and the later one
   won - which meant that above 1200px, where that rule applies, typing in the
   search box added the class and changed nothing on screen. Media queries carry
   no specificity of their own, so matching its shape and adding the class is
   what settles it, at any source order.
   -------------------------------------------------------------------------- */
.js-product-grid > [class*="col-"].is-hidden,
.product-search-empty.is-hidden {
    display: none;
}

.product-search-empty {
    margin: 0;
    padding: 10px 15px 40px;
}

/* --------------------------------------------------------------------------
   Sort control in the products sidebar.

   It used to live in `.shop-page-top-info` above the grid, styled for that bar
   (70px wide, transparent, no border - `style.css:5909-5924`). That bar is gone,
   so the control is restyled to match the search field directly above it in the
   same card: same 55px height, same #ecf2f6 fill, same 27px radius.
   -------------------------------------------------------------------------- */
.single-sidebar-box .sidebar-sort-box {
    position: relative;
    display: block;
    margin-top: 20px;
}

.single-sidebar-box .sidebar-sort-box p {
    color: #151515;
    margin: 0 0 10px;
}

.single-sidebar-box .sidebar-sort-box .select-box {
    position: relative;
    display: block;
    width: 100%;
}

/* the base `.nice-select` carries `padding-left: 65px` (style.css:3740), which
   would sit the label well right of the search field's 30px */
.single-sidebar-box .sidebar-sort-box .nice-select {
    width: 100%;
    height: 55px;
    line-height: 53px;
    background: #ecf2f6;
    border: 1px solid #ecf2f6 !important;
    border-radius: 27px;
    color: #585858;
    font-size: 16px;
    font-weight: 400;
    padding-left: 30px;
    padding-right: 45px;
    font-family: var(--thm-font);
}

.single-sidebar-box .sidebar-sort-box .nice-select:after {
    border-bottom: 2px solid #a6aeb3;
    border-right: 2px solid #a6aeb3;
    right: 25px;
}

/* --------------------------------------------------------------------------
   The last box in the sidebar, whichever one that turns out to be.

   Popular Products only appears once something has sold, so on a site with no
   sales the Search box is the last - and it trails a 50px margin
   (`style.css:5098`) inside a card that already ends with 50px of its own
   padding, plus a divider drawn for a box below it that is not there.

   `.last-box` is NOT the answer here, though it is what it looks like. It
   zeroes `padding-bottom` as well, and that 61px is not decoration: the sort
   control renders as `.nice-select`, which is floated (`nice-select.css:10`)
   and so adds nothing to its parent's height. The padding is the only thing
   holding it inside the card. Removing it drops the control out through the
   card's blue border and pulls the divider up onto the "Sort by" row.

   So: the margin goes, the divider goes, the padding stays. Keyed off
   `:last-child` rather than a flag from the controller, because "last" is a
   fact about the markup and the CSS can see it.
   -------------------------------------------------------------------------- */
.sidebar-content-box .single-sidebar-box:last-child {
    margin-bottom: 0;
}

.sidebar-content-box .single-sidebar-box:last-child .border-box {
    display: none;
}

/* --------------------------------------------------------------------------
   Header: logo and menu on one row, template proportions.

   Measured against the real Be Vietnam 700 webfont, the BRD labels
   (ABOUT / PRODUCTS / SUBSCRIPTIONS / BULK ORDERS / RESOURCES / CONTACT) run
   491px of text at 15px, against the Aguapure demo's 344px - a 147px deficit
   in a header that only had ~3px to spare to begin with. Dropping the search
   icon returned 82px of that. The remaining 65px comes from a smaller logo
   (202 -> 170px) and tighter item padding (20 -> 12px, inside the range the
   template itself uses: it drops to 10px at 1200-1390px).

   The 1400px box, its 100px inner padding, the divider, the cart and the
   Order Now button are all left on template defaults.
   -------------------------------------------------------------------------- */

/* `.outer-box` is `justify-content: space-between` over just two children -
   the logo and the nav+cart+button group - so every spare pixel collects
   between them, which pushed the menu far from the wordmark. Pin the
   logo-to-menu gap to the original's 35px instead and let any slack fall
   after the menu, keeping the cart and Order Now flush right. */
.header .outer-box {
    justify-content: flex-start;
}

.header-left {
    margin-right: 35px;
}

/* `1 0 auto`: grow into the free space, but never shrink. Shrinking is what
   squeezed the menu box until its `float: left` items wrapped and dropped
   CONTACT onto a second line. */
.header-right {
    flex: 1 0 auto;
}

.header-right .nav-outer {
    margin-right: auto;
}

@media only screen and (min-width: 1200px) {

    .header .outer-box {
        flex-wrap: nowrap;
    }

    /* the menu items are floats, which wrap as soon as their container is
       narrower than their total width; a nowrap flex row cannot wrap at all */
    .main-menu .navigation {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .main-menu .navigation > li {
        margin-right: 0;
    }

    .main-menu .navigation > li > a {
        white-space: nowrap;
    }
}

@media only screen and (min-width: 1391px) {

    .main-menu .navigation > li > a {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* mirrors the template's 20px -> 15px trim on dropdown parents, which
       tucks the "+" indicator in close to the label */
    .main-menu .navigation > li.dropdown > a {
        padding-right: 7px;
    }
}

/* 1200-1390px: the template's own tight tier, trimmed a little further to
   absorb the longer labels while keeping the row intact. */
@media only screen and (min-width: 1200px) and (max-width: 1390px) {

    .header-left {
        margin-right: 20px;
    }

    .space-box2 {
        width: 24px;
    }
}

/* --------------------------------------------------------------------------
   Phone header: hamburger left, wordmark centred, account and cart right.

   The bar itself is untouched - same height, same white box, same blue lip
   under it. Only the order of the three groups inside changes, through
   `order` on the flex children, so nothing above 767px sees any of this. The
   bar's height is set by the toggler (54px of bars inside 25px of padding,
   104px in all), and a 42px icon sits well inside that, so the row does not
   grow.
   -------------------------------------------------------------------------- */

/* off everywhere else: above 767px the template's own cart and Order Now
   button are showing, and the row has no space for a second pair of icons */
.header-mobile-actions {
    display: none;
}

@media only screen and (max-width: 767px) {

    /* three groups now, and `space-between` centres the middle one only if
       the two sides happen to be the same width. Give both sides an equal
       share of the free space instead and the logo lands dead centre. */
    .header .outer-box {
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .header-right {
        flex: 1 1 0;
        order: 1;
    }

    /* `min-width: 0` so the wordmark scales down rather than shoving the
       icons off the edge on a 320px screen */
    .header-left {
        order: 2;
        margin-right: 0;
        min-width: 0;
    }

    .header-left .logo img {
        max-width: 100%;
        height: auto;
    }

    .header-mobile-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 0;
        order: 3;
    }

    .header-mobile-actions_btn + .header-mobile-actions_btn {
        margin-left: 8px;
    }

    /* the same circle `.shopping-cart-box a` draws for the desktop cart, so
       the two read as one family once the cart is switched on */
    .header-mobile-actions_btn {
        position: relative;
        display: block;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border: 2px solid var(--thm-base);
        border-radius: 50%;
        color: var(--thm-base);
        font-size: 18px;
        line-height: 38px;
        text-align: center;
    }

    /* The item count, sitting on the rim of the circle. The template draws this
       for `.shopping-cart-box a .count`, which is the desktop cart and is
       display:none down here - so the phone had the icon but no number. Same
       size and colours, positioned against the 42px button rather than the
       desktop one. */
    .header-mobile-actions_btn .count {
        position: absolute;
        top: -4px;
        right: -4px;
        display: block;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        background: var(--thm-base);
        border-radius: 9px;
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        line-height: 18px;
        text-align: center;
    }

}

/* --------------------------------------------------------------------------
   The slide-out menu comes in from the left.

   The template anchors the panel to the right and slides it in from
   `translateX(101%)`, which was right when the toggler was on the right. The
   toggler moved to the left of the bar, so the panel opening on the far side of
   the screen from the button that opened it now reads as the wrong drawer.

   Three mirrored properties and nothing else: the panel's edge, the backdrop's
   edge, and the direction both slide from. The open state is already
   `translateX(0%)` in the template, which is the same whichever side it starts
   on, so the animation and its timing are untouched.

   No media query: `.mobile-menu` is only ever shown by `.mobile-menu-visible`
   on the body, and the only thing that sets that is `.mobile-nav-toggler`,
   which responsive.css displays below 992px. Desktop cannot reach this.
   -------------------------------------------------------------------------- */

.mobile-menu {
    right: auto;
    left: 0;
    padding-right: 0;
    padding-left: 30px;
}

.mobile-menu .menu-backdrop {
    right: auto;
    left: 0;
    -webkit-transform: translateX(-101%);
    -ms-transform: translateX(-101%);
    transform: translateX(-101%);
}

.mobile-menu .menu-box {
    -webkit-transform: translateX(-101%);
    -ms-transform: translateX(-101%);
    transform: translateX(-101%);
}

/* The close button follows the panel: on a right-hand drawer the template puts
   it in the top-right, nearest the screen edge. Mirrored, that is the top-left,
   which is also where the thumb already is having just tapped the toggler. */
.mobile-menu .close-btn {
    right: auto;
    left: 10px;
}

/* --------------------------------------------------------------------------
   Products section, now that its header image is gone.

   The jar, the drifting ice and the "order 5 get 6th free" disc came out, and
   two template values had been measured against them:

     - the grey backdrop starts 185px down (`style.css:1669`) so the 370px
       circular photo straddled the white/grey edge;
     - the "100% Pure Water.Natural" watermark is pinned 270px down
       (`style.css:1743`), which put it in the band between that photo and the
       section heading.

   With the photo gone the first leaves a bare white band above the heading, and
   the second drops the watermark onto the product cards. Re-point both at what
   is actually left: grey from the top, watermark behind the heading.

   `.shop-style1-area` is only on the homepage, so this reaches nothing else -
   the Promotions grid is `.shop-page-one`.
   -------------------------------------------------------------------------- */
.shop-style1-area:before {
    top: 0;
}

/* The "100% Pure Water.Natural" watermark is gone from the markup entirely.
   It was 145px type with `white-space: nowrap` (style.css:1743), so on a phone
   it ran far wider than the viewport and sat across the heading and the first
   product card. Nothing here needs to position it any more. */

/* --------------------------------------------------------------------------
   Product grids built on `.shop-style1_content`: centre the row.

   The template shipped five cards in these, so `.single-shop-item`'s
   `max-width: 20%` + `float: left` filled the row exactly. We sell three, so
   they take 60% and hug the left edge, leaving all the slack on the right.
   A centred flex row puts equal space on both sides instead.

   This is now the Promotions grid only (`.shop-page-one`). The homepage band
   became a carousel, where Owl does the placing - see below. The Products page
   was never affected: it lays its cards out in Bootstrap columns and overrides
   the float itself via `.single-shop-item--style2`.

   Scoped to `min-width: 1200px` because that is the only range that is
   actually broken: between 1200 and 1870px `responsive.css:2074` already caps
   the row at 1110px and the cards at 370px, so three of them fill it exactly
   and this rule is a no-op. Below 1200px the template drops to a two- then
   one-column grid, which is left alone.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {

    .shop-page-one .shop-style1_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* the cards are floats, which is what pinned them to the left; as flex
       items their `max-width: 20%` still sets the card width */
    .shop-page-one .shop-style1_content .single-shop-item {
        float: none;
    }
}

/* --------------------------------------------------------------------------
   Featured products carousel, homepage.

   The cards must stay the size the grid gave them: a 1110px row holding three
   370px cards, centred, with 30px gutters. The template only guarantees that
   between 1200 and 1870px (responsive.css:2069-2081). Outside that range it
   sets neither, and `.single-shop-item` falls back to its base `max-width: 20%`
   with the row taking the section's full-width `.auto-container` - which is why
   the carousel rendered ~600px cards on a 1920px screen.

   So both are pinned here for every width. Owl divides the row by the number of
   visible items, so a 1110px row and three items is a 370px slide, and a 370px
   card fills it exactly. The gutters then come from the card's own 15px side
   padding, exactly as they did in the grid - which is why the carousel is set
   to `margin: 0` rather than Owl's usual 30, or the two would stack into 60px.

   `float: left` (style.css:1782) fights the stage, and the 40px bottom margin
   separated grid rows a carousel does not have - it would only push the dots
   away from the cards.
   -------------------------------------------------------------------------- */
.shop-style1_content--carousel {
    max-width: 1110px;
    margin-left: auto;
    margin-right: auto;
}

.shop-style1_content--carousel .single-shop-item {
    max-width: 370px;
    float: none;
    /* centred in its slide for the breakpoints showing one or two at a time,
       where Owl's slide is wider than the card */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Welcome-discount sign-up pop-up (BRD S8).

   The overlay itself is the template's `.search-popup` - fixed full-screen
   layer, close button, `.overlay-layer` click-catcher and the `.popup-visible`
   transition are all inherited from it. The card is the template's
   `.subscribe-content-box`, which already caps itself at 370px and paints its
   own opaque white `.inner-content`.

   So the only new rules here are the ones that centre the card in the overlay
   and mirror the staggered reveal that `.search-form` gets at style.css:800.
   -------------------------------------------------------------------------- */

.signup-popup .popup-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 60px 15px;
}

.signup-popup_form {
    position: relative;
    /* above `.overlay-layer`, so clicks on the card do not dismiss it */
    z-index: 10;
    opacity: 0;
    transform: translateY(50px);
    transition: all 900ms ease;
}

.signup-popup.popup-visible .signup-popup_form {
    opacity: 1;
    transform: translateY(0px);
    transition: all 900ms ease 500ms;
}

/* The heading was invisible.

   `.search-popup h3` (style.css:848) paints white, which is right for the dark
   search overlay it was written for. `.subscribe-content-box h3` (style.css:2926)
   comes later and restyles the type - size, weight, leading, margin - but never
   mentions colour, so the white came through onto the card's own white. The
   result was "Get 10% Off" rendering as a 34px band of nothing between the icon
   and the body copy, which is exactly what it looked like: a gap.

   Its uppercase and letter-spacing come from the same rule and are also unwanted
   here; the card is not shouting. */
.signup-popup .subscribe-content-box h3 {
    color: var(--thm-black);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 10px;
}

/* The card's vertical rhythm.

   The template's own values are built for this box standing in a page section,
   where it can afford 55px above the icon and 35px below it. In a pop-up the
   card is the whole of what you are looking at, and that spacing reads as
   things drifting apart rather than as breathing room. Tightened so the stack -
   icon, heading, copy, button, note - holds together. */
.signup-popup .subscribe-content-box .inner-content {
    padding: 40px 30px 34px;
}

.signup-popup .subscribe-content-box .icon {
    margin-bottom: 22px;
}

.signup-popup .subscribe-content-box p {
    margin-bottom: 26px;
}

.signup-popup .subscribe-content-box .message {
    margin-top: 18px;
}

/* the form reports validation and success in place of the expiry note, so it
   needs to hold its height when the text changes */
.signup-popup .subscribe-form .message {
    min-height: 21px;
}

.signup-popup .subscribe-form .message.is-error {
    color: #d64242;
}

/* --------------------------------------------------------------------------
   The "are you sure?" box.

   Same shell as the pop-up above - the template's `.search-popup` layer, its
   `.overlay-layer` backdrop and its `.popup-visible` toggle - so a question
   arrives the way the discount card does and there is one overlay behaviour on
   the site rather than two.

   Two differences, both because this one is an answer the customer is waiting
   to give. It fades rather than sliding up from the bottom of the screen, and
   it does it in 250ms rather than the pop-up's leisurely 700 - a question in
   the way of a button should already be there by the time you look up.

   The z-index is left alone deliberately: `.search-popup` is 99999, which is
   over the header and over the toast stack at 1200. A toast arriving must not
   land on top of these two buttons.
   -------------------------------------------------------------------------- */

.confirm-popup {
    background: rgba(12, 21, 41, 0.72);
    transform: none;
    transition: opacity 250ms ease, visibility 250ms ease;
}

.confirm-popup.popup-visible {
    transform: none;
}

.confirm-popup .popup-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 40px 15px;
}

.confirm-popup_box {
    position: relative;
    /* above `.overlay-layer`, so a click on the card does not dismiss it */
    z-index: 10;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 10px;
    padding: 36px 40px 40px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(12, 21, 41, 0.25);
    opacity: 0;
    transform: translateY(20px);
    transition: all 250ms ease;
}

.confirm-popup.popup-visible .confirm-popup_box {
    opacity: 1;
    transform: translateY(0);
}

/* The heading was going to be invisible.

   `.search-popup h3` (style.css:848) paints white, which is right for the dark
   search overlay it was written for and wrong on a white card. The same trap
   caught the discount pop-up - see the note on its `h3` above - so the colour
   is stated here rather than discovered later. */
.confirm-popup h3 {
    color: var(--thm-black);
    font-size: 24px;
    line-height: 34px;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 12px;
}

.confirm-popup_text {
    color: var(--thm-gray);
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 28px;
}

/* Side by side where there is room, stacked where there is not - at 480px wide
   two 45px-padded pills do not both fit on a phone. */
.confirm-popup_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* The close cross is a real button here, not the template's bare div, so a
   keyboard reaches it. Positioned against the card rather than the screen. */
.confirm-popup .close-search {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    color: var(--thm-gray);
    line-height: 1;
}

.confirm-popup .close-search:hover {
    color: var(--thm-base);
}

@media only screen and (max-width: 575px) {

    .confirm-popup_box {
        padding: 30px 24px 32px;
    }

    /* Full width and stacked, with the action first: on a narrow screen the
       thumb lands on the top button, and that should be the one they came for.

       Wrapping is put back for this, because the row above turns it off - two
       full-width buttons on one line would run off the side of the box. */
    .confirm-popup_actions {
        flex-wrap: wrap;
    }

    .confirm-popup_actions .btn-one {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* --------------------------------------------------------------------------
   Product cards: keep every card the same height.

   The card height follows the title, and our titles are not all the same
   length - "600ml Spring Water - 1 Pack (12 Bottles)" wraps to two lines while
   "12L Water Jar" fits on one. That left the third card visibly shorter than
   its neighbours with its button riding higher.

   Reserving two lines of title space fixes the card height and the button
   position together, and keeps the gap between title and button identical on
   every card. Headings are `line-height: 1.25em` (style.css:68) and these
   titles are 20px, so two lines is 2.5em - expressed in em so it still holds
   if the font size is ever changed.

   `.single-shop-item-style3` (the Products sidebar carousel) is a different
   class and is deliberately not matched.
   -------------------------------------------------------------------------- */
.single-shop-item .title-holder h3 {
    min-height: 2.5em;
}

/* --------------------------------------------------------------------------
   "Why Nepter" points: smaller headings.

   The template's labels were one or two short words ("Reliable", "Certified"),
   so 24px fitted on a single line. Each item's text column is only ~170px wide
   (`li` is 270px with a 100px indent for the icon, style.css:2168/2216), so our
   longer labels wrapped and pushed the whole section taller.

   20px/28px keeps the heading comfortably above the 16px body copy while
   letting the shorter labels back onto one line.
   -------------------------------------------------------------------------- */
.choose-style1-content ul li .text h3 {
    font-size: 20px;
    line-height: 28px;
}

/* --------------------------------------------------------------------------
   FAQ answers written as a list.

   The template resets every list globally - `ul, li { list-style: none;
   margin: 0; padding: 0 }` at style.css:140 - because its own markup only ever
   uses `<p>` inside an answer. The products answer is a genuine list, so it
   needs its bullets and indent handing back, scoped so no other list is
   affected.
   -------------------------------------------------------------------------- */
.accordion-box .block .acc-content ul {
    list-style: disc;
    padding-left: 20px;
}

/* `li` is reset directly by that same rule, so inheriting is not enough */
.accordion-box .block .acc-content ul li {
    list-style: disc;
    margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Textarea inside `.contact-form-box1` (the FAQ "Ask Your Question" form).

   The icon divider is `top: 15px; bottom: 15px`, which is right beside a 55px
   input but stretches into a ~100px rule beside a 130px textarea. The template
   already solved this for its own contact page with `.input-box.two`
   (module-css/contact-page.css:159) - capping the divider at 24px from the top.
   That rule is scoped to `.contact-form`, so the same idiom is repeated here
   for `.contact-form-box1`.
   -------------------------------------------------------------------------- */
.contact-form-box1 form .input-box.two .icon:after {
    top: 15px;
    bottom: auto;
    height: 24px;
}

/* --------------------------------------------------------------------------
   Homepage services: four cards at the template's designed size.

   The template laid this section out as three `col-xl-4` cards, each capped at
   370px by `.single-service-style1`. Adding a fourth inside the standard
   1200px container would squeeze all four to ~270px and force the fixed 230px
   image circle to be shrunk with them. Widening the container for this section
   instead lets every card keep its original 370px, its 40px padding and its
   full-size image circle - nothing about the card itself is restyled.

   4 x (370px card + 15px column padding either side) = 1600px.
   Below that the container falls back to 100% width and the cards scale down
   together, which is the template's own behaviour.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {

    .service-style1-area .container {
        max-width: 1600px;
    }
}

/* the four cards carry very different amounts of copy, so let the flex row
   size every box to the tallest rather than leaving ragged card bottoms */
.service-style1-area .row > [class*="col-"] {
    display: flex;
}

/* Centred, because the row is drawn for four cards and Custom & Pallet Orders
   is switched off - three `col-xl-3` fill nine columns of twelve and would sit
   against the left edge. A no-op at four, so this can stay when it comes back,
   and it also centres the odd card at the widths that show two at a time. */
.service-style1-area .row {
    justify-content: center;
}

.service-style1-area .single-service-style1 {
    width: 100%;
}

/* --- the fourth card: enquiry form in place of the photo --- */

/* `.contact-form-box1` is carried over only to reuse the template's field,
   icon, select and button styling. Its own padding and background would draw a
   second card inside the card, so those are cleared - the fields themselves are
   left at their designed size, which fits the 290px inside a 370px card. */
.single-service-style1--form .contact-form-box1 {
    padding: 0;
    margin: 0;
    background: transparent;
    text-align: left;
}

/* no image above the title on this card, so the gap that cleared it goes too */
.single-service-style1--form .title-holder {
    margin-top: 0;
}

/* This was 110px, which started the form on the white part of the card rather
   than over the decorative band: `.single-service-style1__bg` covers the card's
   top 190px, the card's own 40px padding puts that edge 150px into the content
   box, and the heading takes roughly the first 41px.

   That was affordable while the form was six controls and fitted the card
   whole. It is now ten, running about 537px against the ~323px it used to, so
   the card scrolls - and 110px of blue was a third of the face given to
   nothing. The form starts under the heading instead, which brings roughly two
   more fields above the fold.

   The first fields do now sit on the blue. They carry their own `#ecf2f6`
   background, so they read as panels on it rather than as text over it. */
.single-service-style1--form .contact-form-box1 {
    margin-top: 24px;
}

/* The 36px disc behind the dropdown arrow sits at `z-index: 2` directly over
   nice-select's chevron, so clicking the arrow hit the disc and nothing opened.
   It is decoration only - let clicks through to the select underneath. */
.contact-form-box1 form .round-shape {
    pointer-events: none;
}

.single-service-style1--form .form-message {
    margin-top: 14px;
    font-size: 15px;
    line-height: 22px;
}

.single-service-style1--form .form-message.is-error {
    color: #d64242;
}

/* --------------------------------------------------------------------------
   About Company tabs: whatever the Pages screen's editor wrote.

   The template's tabs each held a single `<p>`; these hold Mission, Vision and
   Core Values, written in the admin editor, so what lands here is a `<ul>`, an
   `<ol>` or plain `<p>`s depending on what was typed.

   Lists are reset globally at style.css:140 - `ul, li` lose their marker and
   `ul, ol, li` lose their margin and padding - so the marker and the indent
   have to be handed back. `li` is what carries `list-style: none` there, which
   is why a numbered list would otherwise come out with no numbers even though
   `ol` itself was never reset; `list-style: inherit` on the item takes it from
   whichever list it is in. Scoped to this section only.

   The 18px indent and the 10px between items are the ones this block already
   carried; nothing here is a new number.
   -------------------------------------------------------------------------- */
.about-style1-tab-content .inner-content .about-tab-list ul,
.about-style1-tab-content .inner-content .about-tab-list ol {
    padding-left: 18px;
    margin: 0;
}

.about-style1-tab-content .inner-content .about-tab-list ul {
    list-style: disc;
}

.about-style1-tab-content .inner-content .about-tab-list ol {
    list-style: decimal;
}

.about-style1-tab-content .inner-content .about-tab-list li {
    list-style: inherit;
    margin-bottom: 10px;
}

/* Quill nests a sub-list as a plain `<ul>` inside the `<li>` above it, so the
   indent comes from this rather than from the item's own margin. */
.about-style1-tab-content .inner-content .about-tab-list li > ul,
.about-style1-tab-content .inner-content .about-tab-list li > ol {
    margin-top: 10px;
}

.about-style1-tab-content .inner-content .about-tab-list p {
    margin-bottom: 10px;
}

.about-style1-tab-content .inner-content .about-tab-list > *:last-child,
.about-style1-tab-content .inner-content .about-tab-list li:last-child {
    margin-bottom: 0;
}

/* Core Values pairs a name with its description. The name sits on its own line
   so the two read as a pair rather than one run-on sentence. */
/* --------------------------------------------------------------------------
   Fourth service card: compact the form so it fits the card, not the reverse.

   The row is flex, so all four cards take the height of the tallest. At the
   template's own field sizes the form runs roughly 500px, which is well past
   what the three photo cards need and was stretching every card to match.

   Budget: the tallest photo card is about 546px (40 top padding + 230 image +
   47 + 41 heading + ~156 of copy + 32 bottom padding). Card four spends 40 +
   41 on its heading and 110 clearing the decorative band, leaving ~323px for
   the form. Fields at 40px with 8px gaps and a 66px message box come to ~306px,
   which fits without the card driving the row height.
   -------------------------------------------------------------------------- */
.single-service-style1--form .contact-form-box1 form .input-box {
    margin-bottom: 8px;
}

.single-service-style1--form .contact-form-box1 form input[type="text"],
.single-service-style1--form .contact-form-box1 form input[type="email"] {
    height: 40px;
    font-size: 14px;
    padding-left: 42px;
    padding-right: 15px;
}

.single-service-style1--form .contact-form-box1 form textarea {
    height: 66px;
    font-size: 14px;
    padding-top: 10px;
    padding-left: 42px;
    padding-right: 15px;
}

/* the icon gutter has to come in with the fields, or it eats a third of the
   width once the field is only 40px tall */
.single-service-style1--form .contact-form-box1 form .input-box .icon {
    left: 13px;
    width: 18px;
    font-size: 14px;
    line-height: 38px;
}

.single-service-style1--form .contact-form-box1 form .select-box,
.single-service-style1--form .contact-form-box1 form .nice-select {
    height: 40px;
    line-height: 38px;
    font-size: 14px;
}

.single-service-style1--form .contact-form-box1 form .select-box {
    margin-bottom: 8px;
}

/* The template pads `.nice-select` itself by 65px to clear the icon gutter. The
   earlier override padded the inner `.current` span instead, so the two stacked
   and the label sat ~93px in while the text inputs started at 42px. Bring the
   padding back onto the field and match the inputs exactly. */
.single-service-style1--form .contact-form-box1 form .nice-select {
    padding-left: 42px;
    padding-right: 15px;
}

.single-service-style1--form .contact-form-box1 form .nice-select .current {
    padding-left: 0;
}

/* The service is fixed to Custom Order and the field is disabled, so it should
   not read as something that can be typed into. Same shape and spacing as the
   other fields, but a shade darker with muted text - the cue a browser gives a
   native disabled input. The chevron goes: there is no list left to open. */
.single-service-style1--form .contact-form-box1 form .nice-select.disabled {
    background: #dde5ec;
    border-color: #dde5ec !important;
    color: #7c8891;
}

.single-service-style1--form .contact-form-box1 form .nice-select.disabled .current {
    color: #7c8891;
}

.single-service-style1--form .contact-form-box1 form .nice-select.disabled:after {
    display: none;
}

.single-service-style1--form .contact-form-box1 form .button-box {
    margin-top: 2px;
}

/* `.button-box` is a flex row built for a button plus a checkbox; this card has
   only the button, so it was left sitting against the left edge with the rest
   of the row empty. Let it take the full width and centre its label. */
.single-service-style1--form .contact-form-box1 form .btn-one {
    display: block;
    width: 100%;
    padding: 8px 26px;
    font-size: 14px;
    text-align: center;
}

.single-service-style1--form .form-message {
    margin-top: 8px;
    font-size: 13px;
    line-height: 18px;
}

/* --------------------------------------------------------------------------
   Dropdowns in the contact-page form (bulk orders enquiry).

   That form ships with text fields only, so the wrapper `.select-box` is
   styled solely under `.contact-form-box1`. nice-select already matches this
   form's fields for height and fill, so it needs the wrapper, the same 27px
   corner as the inputs next to it, and a chevron that can be seen - the global
   one is white because it was drawn on top of a blue disc.
   -------------------------------------------------------------------------- */
.contact-form form .select-box {
    position: relative;
    display: block;
    width: 100%;
    height: 55px;
}

.contact-form form .nice-select {
    border-radius: 27px;
}

.contact-form form .nice-select:after {
    border-color: #585858;
}

/* The chevron sits 24px from the right and is 8px wide, so it occupies 24-32px,
   while the template only reserves 30px of padding - a selected label long
   enough to fill the field runs straight under it. That is what happens to
   "Monthly 5-Jar Plan" here and to "600ml Water Bottles" on bulk orders.

   Reserve past the chevron, and truncate rather than overlap if a label is
   still too long for the field. */
.contact-form form .nice-select {
    padding-right: 42px;
}

.contact-form form .nice-select .current {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Bulk order card: bring it down to the height of the two service cards.

   Measured at >=1200px, where the container is 1200 and each column is 600.
   Service card: the image is 270x334 in a 270px column, so it is unscaled at
   334px, and the text block is 37 top padding + 72 title + 78 of copy (three
   lines at 26px) + 42 button row + 40 bottom padding = 269px. Total 603px.

   The form ran roughly 814px with all eight fields stacked full width. Pairing
   the six short ones two to a row removes 210px, and trimming the gaps to 12px
   and the message box to 88px takes it to about 582px - just inside the target,
   with the last few pixels closed by stretching the card to the row height.
   -------------------------------------------------------------------------- */
.contact-style1_form--bulk .contact-form form .input-box {
    margin-bottom: 12px;
}

.contact-style1_form--bulk .contact-form form textarea {
    height: 88px;
}

/* Bootstrap 4 rows are already flex with align-items: stretch, so the two
   columns match; the card just has to fill the one it sits in. */
@media only screen and (min-width: 1200px) {
    .contact-style1_form--bulk {
        height: 100%;
    }
}

/* --------------------------------------------------------------------------
   Breadcrumb with nothing sitting under it.

   `--style2` runs 260px of bottom padding, plus 74px under the heading, to
   leave room for the four contact info cards and for the delivery finder that
   pulls itself up 180px into that space. Bulk orders has neither any more, so
   without this the page opens on a tall empty band. These are the plain
   `.breadcrumb-area` values, so the section keeps the template's own
   proportions and the man image stays anchored to the bottom right.
   -------------------------------------------------------------------------- */
/* The page name, in white.

   The template sets `#151515` on it (breadcrumb-section.css:41), which was
   written for its own pale banner photograph. Nepter's is a dark one, and near
   black on it reads as a smudge rather than as the page title.

   One rule, on the heading only. The trail underneath it - HOME / PRODUCTS -
   keeps the template's grey and blue, because it was not what was asked for.

   Worth knowing now that the banner is something staff can change: this colour
   is fixed, so a pale photograph uploaded from the Banners screen would take
   the heading with it. */
.breadcrumb-area .title h1,
.breadcrumb-area .title h2 {
    color: #fff;
}

/* The page name is an <h1> now, and the template styles that band by TAG -
   `.breadcrumb-area .title h2` at breadcrumb-section.css:41 - so promoting the
   heading dropped every one of those five declarations and left it at the
   browser's own h1: a different size, a different weight, and 0.67em of margin
   the band never had.

   Restated here rather than edited there, so the template file stays untouched
   and this file keeps being the whole of the delta. Copied exactly; if that
   rule ever changes, this is the second place to look.

   `h2` is left in the selector above because the blog post page still uses one:
   its band says "Blog" while the article's own headline is the h1. */
.breadcrumb-area .title h1 {
    font-size: 60px;
    line-height: 1.3em;
    font-weight: 700;
    text-transform: capitalize;
}

/* The price on a plan card was an <h1> - the only one on the site, on a page
   whose actual subject is the plans. It is a <div class="package-price"> now,
   and `.single-price-box .package h1` (style.css:4154) no longer reaches it, so
   the four rules that styled it are restated for the new element.

   Same declarations, same order, including the white pair the highlighted card
   uses. Nothing about how the card looks changes.

   The first four are not from that rule - they are the shared heading reset at
   style.css:65, which every h1-h6 gets and a <div> does not. Without them the
   price would come out in the body font at normal weight, with the browser's
   own margin under it. `line-height` is set below anyway; it is listed there
   rather than here for that reason. */
.single-price-box .package .package-price {
    margin: 0;
    color: var(--thm-black);
    font-weight: 700;
    font-family: var(--thm-font-2);
    font-size: 48px;
    line-height: 58px;
    padding-top: 10px;
}

.single-price-box .package .package-price span {
    position: relative;
    top: -10px;
    color: var(--thm-black);
    font-size: 22px;
    font-weight: 700;
}

.single-price-box--style2-outer .single-price-box.overlay-content .package .package-price,
.single-price-box--style2-outer .single-price-box.overlay-content .package .package-price span {
    color: #ffffff;
}

/* Banners whose `--style2` 260px bottom was making room for a card that
   overlapped up into it. Back to 124px, the bottom every other banner carries,
   so the gap to the section below is 124 + 40 like the rest of the site. */
.breadcrumb-area--compact {
    padding-bottom: 124px;
}

/* `--style2` puts 74px under .inner-content to separate the title from what
   follows it in the banner. Only zeroed where nothing follows - on contact the
   four info boxes do, and that gap is theirs. */
.breadcrumb-area--compact .container > .row:last-child .inner-content {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Footer width on large screens.

   `.container` is capped at 1200px site-wide (style.css:99), so past about
   1500px the four footer columns sit in a band in the middle with a wide empty
   blue margin either side. The footer has no imagery to hold the composition
   together the way the sections above do, so the gap reads as a mistake.

   Let it run to 1600px with a 60px gutter, matching the wider container the
   services section already uses. Below 1400px nothing changes.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1400px) {
    .footer-area .container {
        max-width: 1600px;
        padding-left: 60px;
        padding-right: 60px;
    }

    /* Four equal 25% columns left uneven gaps, because the content in them is
       not equally wide: the intro paragraph fills its column, while Locations
       uses about two thirds of its own. Measured, that put roughly 38px between
       the first pair and 103px before the last one.

       So size each column to what it holds and let space-between share the
       remainder out equally - the gaps end up identical whatever the container
       is doing. Widths include the 15px column padding on each side.

       Row content here is 1510px (1600px container, less the 60px gutters, plus
       the row's own -15px margins), so 1300px of column leaves three 70px gaps. */
    .footer .row {
        justify-content: space-between;
    }

    .footer .row > [class*="col-"] {
        flex: 0 0 auto;
        max-width: none;
    }

    /* Subscribe Us held 400px for a box that capped itself at 370px. What
       replaced it is much narrower: the widest thing in that column is either
       the "Follow Us" heading at 24px (~110px) or three 20px icons 30px apart
       (20+30+20+30+20 = 120px), so 120px of content plus the 15px column
       padding each side - 150px.

       The 250px it gives back is shared out in proportion to the three columns
       that remain, which is how they were sized in the first place - by what
       they hold. 380:290:230 is 900, so each takes that share of 250:
         about     380 + 106 = 486
         links     290 +  81 = 371
         location  230 +  63 = 293

       486 + 371 + 293 + 150 = 1300, the same total as before, which is what
       keeps the gap at exactly the 70px it has always been. */
    .footer-col--about     { width: 486px; }
    .footer-col--links     { width: 371px; }
    .footer-col--location  { width: 293px; }
    .footer-col--social    { width: 150px; }
}

/* --------------------------------------------------------------------------
   Social icons in the footer.

   `.social-links-style1` is the template's own list - 20px marks, 30px apart -
   and all of that is kept. What is not is its colour: it paints them #777777
   and turns them white on hover, which is a grey written for a white page. On
   the footer's blue that is barely legible.

   So they take the colour the footer's own links already use, #ccdbeb going to
   white on hover (module-css/footer-section.css:122). Nothing new is chosen -
   the icons simply match the link list two columns to their left.

   Set on the `<a>` as well as on its `<i>`: TikTok is an inline SVG sized in
   `em` and filled with `currentColor`, so it reads the anchor rather than the
   `<i>` rule the other two land on.
   -------------------------------------------------------------------------- */
.footer .social-links-style1 li a {
    color: #ccdbeb;
    font-size: 20px;
    transition: all 200ms linear;
}

.footer .social-links-style1 li a i {
    color: inherit;
    font-size: inherit;
}

.footer .social-links-style1 li a:hover,
.footer .social-links-style1 li a:hover i {
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Fact counter - one row on laptops and tablets.

   The template only keeps the five counters on a single line above 1750px. All
   the way down from there it drops them to `max-width: 50%`, which on a 15"
   laptop (1366 or 1536 wide) produces two per row plus a lone fifth centred
   underneath - a tall, lopsided block on a screen with room to spare.

   There is width for five columns well below 1750px; what does not fit is the
   type at its full size. So the columns stay at 20% and the numbers and labels
   step down instead, in three brackets, until the phone layout at 767px takes
   over and stacking is genuinely the right answer.

   The template's own responsive rules are the ones being overridden here, and
   media queries add no specificity, so these win only because this file loads
   after responsive.css.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1750px) {

    /* Bottom padding is 11px in the template's blocks because each counter
       carries a 40px bottom margin for the row it wraps onto. One row needs no
       such margin, so the padding goes back to holding the band on its own. */
    .fact-counter-area {
        padding: 45px 0;
    }

    .single-fact-counter {
        max-width: 20%;
        margin-bottom: 0;
    }

    .single-fact-counter .title {
        margin-top: 8px;
    }
}

/* Laptops: 1200px leaves ~216px a column, which the type only needs trimming
   slightly to sit inside. */
@media only screen and (min-width: 1200px) and (max-width: 1750px) {

    .single-fact-counter .count-box {
        font-size: 40px;
        line-height: 40px;
    }

    .single-fact-counter .title h6 {
        font-size: 18px;
        line-height: 26px;
    }

    /* The -10px is kerning for a 48px numeral; at 40px it starts to collide. */
    .single-fact-counter .count-box .k,
    .single-fact-counter .count-box .plus {
        margin-left: -7px;
    }
}

/* Small laptops: the 60px side padding on the box is worth more than it costs
   at this width, so half of it goes to the columns. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .fact-counter_box {
        padding: 0 30px;
    }

    .single-fact-counter .count-box {
        font-size: 34px;
        line-height: 34px;
    }

    .single-fact-counter .title h6 {
        font-size: 15px;
        line-height: 22px;
    }

    .single-fact-counter .count-box .k,
    .single-fact-counter .count-box .plus {
        margin-left: -5px;
    }
}

/* Tablets: ~147px a column at 768px, which the longest label - "Professional
   Team" - fits into at 13px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    .fact-counter_box {
        padding: 0 15px;
    }

    .single-fact-counter .count-box {
        font-size: 28px;
        line-height: 28px;
    }

    .single-fact-counter .title h6 {
        font-size: 13px;
        line-height: 20px;
    }

    .single-fact-counter .count-box .k,
    .single-fact-counter .count-box .plus {
        margin-left: -4px;
    }
}


/* --------------------------------------------------------------------------
   Sub-headings inside a written article body.

   The template's blog copy was flat - `blog-details-text-1` and `-text-2` each
   hold one h3 and then paragraphs - so it never styled a level below that. The
   real posts do have one: "Advantages" under each water type, and the five
   named points under "Things to Consider".

   `style.css:65` gives h4 the site's colour, weight and family but no size, so
   without this it renders at the browser default - the same size as the
   paragraph under it, and with `margin: 0` no space around it either. This sits
   it between the 24px h3 and the body text.
   -------------------------------------------------------------------------- */
.blog-details-content h4 {
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 10px;
}

/* only when it follows body copy: the first one in a block already has the
   h3's 24px bottom margin above it */
.blog-details-content p + h4 {
    margin-top: 26px;
}


/* --------------------------------------------------------------------------
   Blog sidebar tag search: hiding filtered-out posts.

   Same class-not-inline-style approach as the products grid above, and the same
   `is-hidden` name so there is one convention for this across the site.
   -------------------------------------------------------------------------- */
.js-blog-list > .is-hidden,
.blog-search-empty.is-hidden {
    display: none;
}

.blog-search-empty {
    margin: 0;
    padding-top: 8px;
}


/* --------------------------------------------------------------------------
   Products page: size the card grid to the sidebar.

   The two columns are flex siblings in the same `.row`, so they are already
   exactly the same height as each other - the taller one sets it, and that was
   the grid. Two rows of cards at their natural size come to roughly 1290px
   against a sidebar of roughly 1240px, so the third card hung below the
   Popular Products box with the sidebar's column padded out beneath it.

   Rather than pick a smaller photo height and hope it lands, the grid is given
   the column's height and told to divide it between its two rows. Everything in
   a card except the photo keeps its natural size; the photo takes whatever is
   left. So the bottom row ends level with the sidebar by construction, at any
   width, and stays level if the sidebar's contents ever change.

   `object-fit: contain` rather than `cover`: the product shots are bottles and
   jars that already fill their frame, so cropping would clip a cap or a base.
   They sit on white, which is also the card's background, so the letterboxing
   contain produces is invisible - the bottle simply gets smaller.

   Only above 1200px. Below that the template drops to one card per row, where
   there is no second row to level with anything.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {

    /* `.col-xl-8` is a stretched flex item, so its height is definite and the
       percentages below resolve against it */
    .js-product-grid {
        height: 100%;
    }

    .js-product-grid > [class*="col-"] {
        display: flex;
        height: 50%;
        /* the gutter the card's own bottom margin used to provide; moved onto
           the column so the card can fill the height it is given */
        padding-bottom: 30px;
    }

    /* The two rules above assume two full rows, which a keyword search can take
       away: filter four products down to one and that card still claims half
       the grid, leaving the sidebar's whole lower half blank beside it.

       So while anything is hidden - `is-filtered`, set in nepter.js only when
       the visible count is short of the full one - the rows size to their own
       content instead and the levelling is dropped. There is nothing left to
       level against: the grid is showing a subset, not the catalogue.

       Nothing else in this block is unwound. The cards stay flex columns, so
       `.img-holder` still governs the photo and every card in a result set is
       still exactly as tall as the others - it settles at its own 240px basis
       rather than growing into a row height that no longer exists. */
    .js-product-grid.is-filtered,
    .js-product-grid.is-filtered > [class*="col-"] {
        height: auto;
    }

    .js-product-grid .single-shop-item--style2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 0;
    }

    .js-product-grid .single-shop-item_inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        /* a flex item will not shrink below its content unless told it may */
        min-height: 0;
    }

    /* The basis has to be a length, not `auto`. When the browser works out how
       tall the grid column wants to be, `height: 100%` above is still
       unresolved and counts as auto - so that pass measures the cards at their
       natural size. With `auto` here that means the photo's own 323px, the grid
       comes out taller than the sidebar, and the grid ends up setting the row
       height again: the column would never shrink.

       240px is deliberately shorter than the sidebar needs, so the sidebar wins
       that first pass and the photo then grows into whatever the row gives it -
       around 285px as the sidebar stands. It is a starting point, not the final
       height. */
    .js-product-grid .img-holder {
        flex: 1 1 240px;
        min-height: 0;
    }

    .js-product-grid .img-holder img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* the price row and the name/button block hold their natural height - the
       photo is the only part that gives */
    .js-product-grid .product-quantity-box,
    .js-product-grid .title-holder {
        flex: 0 0 auto;
    }

    /* Two lines reserved for every name. "12L Water Jar" is one line where the
       two 600ml names are two, and without this its card would spend the
       difference on a taller photo than its neighbours' - same card height,
       visibly different product shot. */
    .js-product-grid .title-holder h3 {
        min-height: 50px;
    }
}


/* --------------------------------------------------------------------------
   Homepage products heading: the heading IS the gap, on phones.

   Nothing sits between the hero and this section in the markup - the band under
   the banner is `.sec-title`'s own top padding, which stands in for the
   section's (the template sets that to 0). That band is 40px on a desktop,
   where it separates two full-width blocks.

   On a phone it was 40px of empty space with the heading stacked underneath it,
   and the two together were filling the screen before a product appeared. So
   the band stays 40px and the heading moves into it: the top padding goes to
   zero, and "Our Products" and "Delivered fresh to your door" are sized to sit
   inside that same 40px rather than below it. The space between banner and
   cards is unchanged - it just has the heading in it now.

   The budget, at a 375px viewport:

     sub-title  14px type, 1.2em line   16.8px
     its own bottom padding              2.0px
     h2         6vw = 22.5px, 1.2em     27.0px
                                        ------
                                        45.8px

   "Our Products" was 11px here for a while, which bought 3.6px and cost more
   than it was worth: it made this the one sub-title on the homepage smaller
   than the rest, against "How we Work?", "Services" and "Testimonials" all at
   the template's 14px. Back to 14px - the band is a few pixels over 40 now, and
   that is the better trade.

   The h2 stays viewport-relative, so the block still tracks the device.

   The wave decor stays. Its 17px top margin is what comes down instead, to 6px
   - the margin is the spare part, the image is not.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    .shop-style1-area .sec-title {
        padding-top: 0;
    }

    .shop-style1-area .sec-title .sub-title {
        padding-bottom: 2px;
    }
}


/* --------------------------------------------------------------------------
   Hero slider: every slide the height of the tallest.

   This is the gap that comes and goes under the banner.

   Owl lays the slides out as floats inside `.owl-stage` (owl.css:42-47), so the
   stage is as tall as the tallest of them - but each slide is only as tall as
   its own content, and `.image-layer` is absolutely positioned inside its
   slide. A shorter slide therefore leaves the stage's white background showing
   beneath its photo, and since the carousel rotates, the gap appears and
   disappears with whichever slide is showing.

   The slides were near enough the same height until the third one changed to
   "Free Pack of 600ml Water for Each 10 Packs You Buy" - 49 characters against
   24 on the first. On a phone `responsive.css:2358` drops the `<br>` and the
   text wraps naturally at 32px, so that slide runs two lines longer than the
   others and sets a stage height neither of them fills.

   Making the stage a flex row stretches every slide to the line's height, so
   each photo covers the full stage whichever slide is active. `flex: 0 0 auto`
   keeps the widths Owl writes inline on each item, which a flex row would
   otherwise be free to shrink.
   -------------------------------------------------------------------------- */
.banner-carousel.owl-carousel .owl-stage {
    display: flex;
}

.banner-carousel.owl-carousel .owl-item {
    flex: 0 0 auto;
}

.banner-carousel.owl-carousel .owl-item .slide {
    height: 100%;
}

/* Anchor a slide photo to its top edge.

   `.image-layer` is `background-size: cover, background-position: center` in the
   template, which is right for a photo shot at roughly the slide's proportions.
   The second Nepter banner is 3:2 against a much wider slide, so `cover` scales
   it to fill the width and then crops equally from the top and bottom - and the
   subject is at the top of that frame, so what survived the crop was the bottom
   of the image. Anchoring to the top keeps the head of the photo and lets the
   crop fall off the bottom, where there is least to lose.

   Per-slide, not global: the other two are proportioned for the slide already
   and centre correctly. */
.banner-carousel .image-layer--top {
    background-position: center top;
}


/* --------------------------------------------------------------------------
   "Delivered fresh to your door" on one line, phones only.

   At the template's mobile size (38px, responsive.css:963) the line runs about
   473px against the 315px a 375px phone has inside this section's 30px side
   padding, so it broke across two lines. The only way to hold it on one is to
   size the type to the viewport - nothing else here changes.

   The multiplier comes from the string itself: in Laila 700 it measures roughly
   12.4em, and the section leaves `100vw - 60px` for it. 6vw keeps it inside
   that with room to spare at every phone width, narrow ones included, and
   `min()` stops it growing past the 38px it already uses as the viewport
   approaches the 767px edge of this query.

   `nowrap` is the guarantee; the size is what makes the guarantee safe.

   Scoped to this one heading in this one section. Every other `.sec-title h2`
   on the site keeps the template's sizing.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    .shop-style1-area .sec-title h2 {
        font-size: min(6vw, 38px);
        white-space: nowrap;
    }
}


/* --------------------------------------------------------------------------
   Phones: tighten every section gap.

   The desktop rhythm at the top of this file (40px sections, 22px under a
   heading) still reads as a lot of empty space on a 360px screen, where the
   same padding is a far bigger share of the viewport. The Services section is
   the clearest case: sub-title, heading, decor and two lots of padding, and the
   first card is most of a screen down.

   Same set of section classes as the desktop rules, at roughly 60% of them, so
   the two stay one rhythm rather than two unrelated ones. Nothing here changes
   type size - only space.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    .service-style1-area,
    .about-style1-area,
    .choose-style3-area,
    .blog-details-area,
    .blog-page-two,
    .main-contact-form-area,
    .faq-style1-area,
    .faq-form-area,
    .pricing-plan-style2-area {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .about-style3-area,
    .working-process-style2-area,
    .choose-style1-area {
        padding-top: 24px;
    }

    /* the card grids, whose last row adds its own bottom margin */
    .shop-style1-area    { padding-bottom: 12px; }
    .blog-style1-area    { padding-top: 24px; padding-bottom: 0; }

    .google-map-area     { padding-bottom: 24px; }

    /* Inside a section heading. The sub-title's 20px and the decor's 17px are
       both dead space between three short elements, and together they cost more
       than the section padding does. */
    .sec-title {
        padding-bottom: 14px;
    }

    .sec-title .sub-title {
        padding-bottom: 8px;
    }

    .sec-title .decor {
        margin-top: 6px;
    }

    /* the two that state their own, and would otherwise survive the rule above */
    .choose-style1-content .sec-title {
        padding-bottom: 14px;
    }

    .about-style1-tab-content .inner-content .sec-title {
        padding-bottom: 10px;
    }
}


/* --------------------------------------------------------------------------
   Sign-up pop-up: close button in the card's corner.

   The template anchors `.close-search` to the full-screen overlay at
   `right: 25px; top: 25px` (style.css:777) - fine for its search overlay, which
   fills the screen, but the sign-up card sits in the middle, and a cross in the
   far corner reads as belonging to the page rather than to the card.

   `.signup-popup_form` is already `position: relative`, so moving the markup
   inside it re-anchors the same absolute positioning to the card.

   It also has to change colour. White was right against a dark full-screen
   overlay; the card's background (`subscribe-content-box-bg.jpg`) is a near
   white water splash, where white is invisible.
   -------------------------------------------------------------------------- */
.signup-popup .close-signup {
    top: 14px;
    right: 16px;
    font-size: 16px;
    color: #98a1a7;
    /* above `.subscribe-content-box`, which sets `z-index: 1` on itself */
    z-index: 2;
}

.signup-popup .close-signup:hover {
    color: var(--thm-black);
}


/* The Services heading disappearing on Android was Chromium Auto Dark Theme,
   not a stylesheet problem - it inverted the heading to near-white while
   leaving the section pattern-bg image white underneath. Opted out of with
   <meta name="color-scheme" content="only light"> in the layout head, so no
   rule is needed here. */


/* --------------------------------------------------------------------------
   Phones: the four remaining large gaps, on /products and /contact.

   Every rule here is inside the phone query and every one of them overrides a
   value the template only sets at =<767px in the first place, so tablet and
   desktop are not touched by any of it.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    /* 1. Banner to promo band. This 40px was chosen to separate the blue band
          from the banner on a desktop; on a phone the two blues read as one
          block and the white strip between them is just a seam. */
    .shop-page-one {
        padding-top: 0;
    }

    /* 2. Promo band to the first product. The template opens the grey inner
          panel with 80px (style.css:5941) and closes it with 110px. The top one
          goes entirely - the band already separates the two - and the bottom
          comes down to the 24px every other section bottom uses on a phone. */
    .shop-page-one_inner {
        padding-top: 0;
        /* matched to the 0 above it: the grey panel meets the blue footer the
           same way the banner meets the promo band */
        padding-bottom: 0;
    }

    /* 3. Last product to the Search card. `responsive.css:1495` gives the
          sidebar an 80px top margin for the point where it drops below the
          grid. Taking it off leaves the last card's own 30px bottom margin as
          the whole gap - the same 30px that sits between two products. */
    .shop-page-one_inner .sidebar-content-box {
        margin-top: 0;
    }

    /* 4. Contact page, above "Send Your Message". Same pattern:
          `responsive.css:1770` adds 80px when the form drops below the info
          cards. The card's own 50px padding is its inside, not a gap, and
          stays. */
    .contact-style1_form {
        margin-top: 0;
    }
}


/* --------------------------------------------------------------------------
   Service-area map: hidden until it actually loads.

   The map never renders - the API key in scripts.blade.php is the template
   author's and Google rejects it - and `gm_authFailure` below hid the section
   when that rejection came back. On a phone the rejection never came back,
   because the script itself did not load, so the callback never ran and the
   section sat there as a 500px empty box between the contact form and the
   footer.

   Hidden by default and revealed by `initMap` in nepter.js, which can only run
   once Google's script has loaded and the map has been built. That makes the
   outcome the same on every device instead of depending on which way the
   failure happens to go, and it costs nothing on desktop, where the section was
   already being hidden a moment after load.

   This reverses itself the day a valid key is in place: the callback runs, the
   class goes on, the map appears. Nothing here needs undoing.
   -------------------------------------------------------------------------- */
.google-map-area {
    display: none;
}

.google-map-area.is-ready {
    display: block;
}


/* --------------------------------------------------------------------------
   Footer: no empty band below its content, and the section rhythm above it.

   `footer-section.css:13` sets `padding: 110px 0 93px` at every width -
   responsive.css never touches it - so the blue block opened with 110px of
   nothing above the logo and closed with 93px between the last widget and the
   copyright bar. The 93px comes off entirely, on every device.

   The top is now the same 40px of breathing room every section gets, so the
   gap reads the same either side of the colour change: the last section closes
   40px under its content (the last blog card on the homepage) and the blue
   block opens 40px above the logo.

   On a phone the last section before the footer drops to 0 - see the <=767px
   block above - so this follows the phone rhythm of 24px rather than staying
   at 40 and reintroducing the band on the one device it was worst on.

   The copyright bar keeps its own 22px above the text (`footer-section.css:212`)
   and is a darker blue, so the two still read as separate strips rather than
   running together.
   -------------------------------------------------------------------------- */
.footer {
    padding-top: 40px;
    padding-bottom: 0;
}

@media only screen and (max-width: 767px) {

    .footer {
        padding-top: 24px;
    }
}


/* --------------------------------------------------------------------------
   Homepage services: the whole card is the link.

   Each of the first three cards already links to its page twice - from the icon
   and from the heading - but the photo, the paragraph and the white space
   around them did nothing, so most of the card looked clickable and was not.

   The heading's link is stretched over the card instead of wrapping everything
   in an anchor: the markup stays as the template wrote it, and there is still
   exactly one link per destination for a screen reader to announce, with the
   heading text as its name.

   `.title-holder` has to give up its `position: relative` for that - the
   pseudo-element resolves against the nearest positioned ancestor, and we want
   that to be the card. Nothing inside it is absolutely positioned, so it has
   nothing to hold.

   z-index 2 clears `.img-holder`, which sits at 1 (services-section.css:59).
   The card itself is `position: relative` with `z-index: auto`, so it is not a
   stacking context and the two compare directly.

   The icon link ends up underneath, which costs nothing: it points at the same
   page, and every hover effect on it keys off `.single-service-style1:hover`
   rather than its own `:hover`, so they all still fire.

   The fourth card is excluded by name. It holds the Custom & Pallet Orders
   form, and an overlay across it would swallow every field. Its heading is
   plain text with no link, so the rule would not match anyway - the `:not()` is
   there so that stays true if someone links that heading later.
   -------------------------------------------------------------------------- */
.single-service-style1:not(.single-service-style1--form) .title-holder {
    position: static;
}

.single-service-style1:not(.single-service-style1--form) .title-holder h3 a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}


/* --------------------------------------------------------------------------
   Subscription plans, phones: the same gap above and below the plan card.

   Once the two columns stack, the space above the card and the space below it
   came from completely different places and did not match:

     above  24px section padding + 30px `--style2-outer` top   =  54px
     below  40px `--style2-outer` bottom + 50px dots margin
            + 10px dots + 0 form margin                        = 100px

   The 30/40 on the outer wrapper was room for the hover panel that used to flip
   in, which is gone; above 992px it is already zeroed for the same reason. Here
   the top 30px is kept, because it is half of the gap that reads correctly.

   Rebuilt to the same 54px, with the dots inside it rather than added to it -
   they sit just under the card, where they belong, and the rest is clear space
   before the form:

       0px outer bottom + 20px to the dots + 10px dots + 24px = 54px

   Phones only. Tablets from 768 to 991px stack the same way and still carry the
   old spacing; they are left alone deliberately.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    .subscription-plans-box .single-price-box--style2-outer {
        padding-bottom: 0;
    }

    /* `style.css:564` sets this with `!important`, so this has to answer in kind */
    .subscription-plans-box .owl-carousel.owl-dot-style1 .owl-dots {
        margin-top: 20px !important;
    }

    /* beats the blanket `.contact-style1_form { margin-top: 0 }` above on
       specificity, not on order */
    .contact-style1_form.contact-style1_form--subscription {
        margin-top: 24px;
    }
}



/* --------------------------------------------------------------------------
   Subscription plans, desktop: the same band above and below the cards.

   40px under the banner, 40px under the cards - the smaller of the two, as it
   read better than the wider gap did.

   The dots live inside that lower 40px rather than adding to it: they are
   absolutely positioned off the bottom of the plan column above, now 12px down,
   so they take 22px of the band and leave 18px clear before the footer.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {

    .pricing-plan-style2-area {
        padding-bottom: 40px;
    }
}


/* --------------------------------------------------------------------------
   Products and Promotions: the same gap under the promo band as above it.

   `.shop-page-one` opens with 40px, which sets the band off the banner. The
   grey panel under it then opened with 80px of its own (style.css:5941) - twice
   the gap, for the same job.

   Matched to 40px. Both pages carry the band and the panel, so both get it.

   From 768px only: phones already run this at 0, set a few changes back, and
   that rule sits earlier in this file - an unscoped rule here would come later
   and take it back.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

    .shop-page-one_inner {
        padding-top: 40px;
        /* and the same again at the foot of the panel, where the template had
           110px between the sidebar and the footer */
        padding-bottom: 40px;
    }
}


/* --------------------------------------------------------------------------
   One gap above the footer, on every page.

   The products page landed on 40px from 768px up and 0 on a phone, and the same
   measure is applied here to whatever section happens to sit last on each of
   the others:

     /                       .blog-style1-area   (the testimonials that used to
                                                  close this page were removed;
                                                  the blog band lands on the same
                                                  40px through its own 10px plus
                                                  the card's 30px margin)
     /about                  .choose-style3-area  (the certificates band
                                                  that used to close this page
                                                  was removed)
     /subscription-plans     .pricing-plan-style2-area
     /bulk-orders            .main-contact-form-area
     /contact                .main-contact-form-area   (the map below it is
                                                        hidden until it loads)
     /faq                    .faq-style1-area
     /blog                   .blog-page-two
     /blog/{slug}            .blog-details-area
     /legal/{page}           .about-style3-area

   None of these classes appears anywhere else except as the last section, so
   naming them cannot reach a section in the middle of a page.

   From 768px they were all already at 40px through the rhythm at the top of
   this file - all except `.about-style3-area`, which the template ends at 0
   because something used to overlap it. On the legal pages nothing does, and
   with the footer's own top padding now gone its text would have sat directly
   on the blue.

   0 on a phone is what the products page does: the last card or panel keeps
   whatever bottom margin it already carries, and the section adds nothing on
   top of it.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

    .about-style3-area {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {

    .pricing-plan-style2-area,
    .main-contact-form-area,
    .faq-style1-area,
    .blog-page-two,
    .blog-details-area,
    .about-style3-area {
        padding-bottom: 0;
    }
}



/* --------------------------------------------------------------------------
   Blog listing: the same gap above the footer as everywhere else.

   Every page's last section now closes on 40px from 768px up and 0 on a phone.
   `/blog` was the one that did not land there, because its cards each carry a
   30px bottom margin (`blog-section.css:37`) and the last row's margin sits
   between the grid and the section's own padding.

   So the padding gives that 30px back on desktop, and on a phone - where the
   cards are stacked one per row, so the last column is the last card - the
   margin comes off the card itself.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

    .blog-page-two {
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 767px) {

    .blog-page-two .row > [class*="col-"]:last-child .single-blog-style1 {
        margin-bottom: 0;
    }
}


/* --------------------------------------------------------------------------
   Blog cards: one size, whatever gets uploaded.

   The template drew these against its own pictures, all of them square -
   `blog-v2-1.jpg` to `blog-v2-6.jpg` are 330x330, and the home band's
   `blog-v1-1.jpg` is 330x323. All `blog-section.css:78` sets is `width: 100%`,
   so the height is whatever ratio the file happens to have. A portrait
   photograph therefore makes a taller card than a landscape one beside it.

   So the picture box is held at the template's own ratio - 1:1, taken from
   those files rather than chosen - and the picture fills it with `cover`,
   which crops rather than squashes. `overflow: hidden` and the 10px radius are
   already on `.inner` (blog-section.css:72), as is the hover zoom, and all
   three still work against a fixed box.

   The second half is the card itself. Even with matched pictures the cards ran
   to different heights, because a two-line headline makes a shorter card than
   a three-line one - which is what the three cards in the screenshot actually
   differed by. The column becomes the flex container, the card fills it, and
   Read More is pushed to the bottom, so every card in a row ends level.

   `flex-direction: column` matters: a row-direction container would size the
   card to its content width instead of the column's.

   The 30px bottom margin (`blog-section.css:37`) stays on the card and stays
   inside the flex layout, so the gap between rows is untouched - and the card
   does not hang past its column, which is what a `height: 100%` here would do.

   `.row.text-right-rtl` is the card row on both pages; the heading above it on
   the home page is a plain `.row` and is left alone.
   -------------------------------------------------------------------------- */
.single-blog-style1 .img-holder .inner {
    aspect-ratio: 1 / 1;
}

.single-blog-style1 .img-holder .inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-page-two .row.text-right-rtl > [class*="col-"],
.blog-style1-area .row.text-right-rtl > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.blog-page-two .row.text-right-rtl .single-blog-style1,
.blog-style1-area .row.text-right-rtl .single-blog-style1 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.blog-page-two .row.text-right-rtl .single-blog-style1 .text-holder,
.blog-style1-area .row.text-right-rtl .single-blog-style1 .text-holder {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.blog-page-two .row.text-right-rtl .single-blog-style1 .text-holder .btns-box,
.blog-style1-area .row.text-right-rtl .single-blog-style1 .text-holder .btns-box {
    margin-top: auto;
}


/* --------------------------------------------------------------------------
   Services: the enquiry form inside the first card.

   "Premium Bottled Water" keeps its photo, heading and paragraph as its face,
   and carries a short pallet enquiry underneath, reached by scrolling inside
   the card. "Custom & Pallet Orders" is back at the end of the row with the
   longer form.

   Two of the `--form` rules were written for a card that had no image above the
   heading, and have to be handed back on the first one:
     - `.title-holder { margin-top: 0 }` closed the gap that clears the photo;
     - the form's 110px top margin cleared the decorative band on a card whose
       heading was the first thing in it. Here there is a paragraph above it, so
       it just needs an ordinary gap.
   -------------------------------------------------------------------------- */
.single-service-style1--product .title-holder {
    margin-top: 47px;
}

.single-service-style1--product .contact-form-box1 {
    margin-top: 24px;
    /* Above the whole-card link's overlay, which sits at z-index 2. Without
       this the overlay would take every click meant for a field, and the form
       would look present but be dead. */
    position: relative;
    z-index: 3;
}

/* Both form cards are held to the height of the plain ones and scroll inside.

   Subscription Plans and Bulk & Office Orders keep exactly the height their own
   content gives them - nothing here touches them. The two cards carrying forms
   are capped to the taller of that pair, so the row reads as four cards of one
   size instead of two short ones and two running well past them.

   That height is measured in nepter.js rather than written here: it depends on
   how many lines a paragraph takes, which changes with the column width at
   every breakpoint. One measurement at runtime beats four guesses in a
   stylesheet.

   `overflow-y` is here so the cards are already scroll containers by the time
   that height arrives. */
.single-service-style1--capped {
    overflow-y: auto;
}

/* Both form cards are excluded from the whole-card link by
   `:not(.single-service-style1--form)` further up - an overlay across a card
   holding a form takes every click meant for a field. The first card is the
   exception: it was clickable before the form moved in and should stay that
   way, so it opts back in here, and its form sits above the overlay through the
   z-index above.

   `.title-holder` goes static for the same reason as the original rule: the
   overlay is a pseudo-element of the heading link and has to resolve against
   the card, not against the heading block. */
.single-service-style1--product .title-holder {
    position: static;
}

.single-service-style1--product .title-holder h3 a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}


/* The Quantity number box on the Custom & Pallet card, hidden until "Enter a
   number" is the choice. Same `is-hidden` convention as the products grid and
   the blog tag search, so there is one way of doing this across the site. */
.single-service-style1--form .contact-form-box1 form .input-box.js-qty-number.is-hidden {
    display: none;
}

/* --------------------------------------------------------------------------
   Customer account area.

   Aguapure ships `my-account.html` and nothing behind it, so the signed-in
   screens have no donor design. Rather than invent one, these rules dress
   components the template already draws - `.single-sidebar-box` for the nav,
   `.cart-table` for the order lists, `.input-field` for every form - and add
   only what has no equivalent at all: the panel, the stat tiles and the
   address cards.
   -------------------------------------------------------------------------- */

.account-area {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* The page you are on.

   The template's sidebar list styles `:hover` and nothing else, which is right
   for the category filter it was drawn for - no category is ever "the current
   one". A navigation menu has to say where you are, so the hover colour is
   borrowed for it. Not its letter-spacing: that nudges the label sideways,
   which is fine as a hover flicker and wrong on the item that stays. */
.sidebar-categories-box li.active a {
    color: var(--thm-primary);
}

/* The white card each section sits on. Matches the sidebar box's border and
   radius so the two columns read as a pair. */
.account-panel {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid #e9edf1;
    border-radius: 5px;
    padding: 30px;
    margin-bottom: 30px;
}

.account-panel .shop-page-title {
    margin-bottom: 24px;
}

.account-panel .shop-page-title h2 {
    font-size: 24px;
    line-height: 32px;
}

/* Half the usual heading gap, for the order screen.

   The template's own `.shop-page-title` carries 31px of padding under the
   heading and the panel rule above adds 24 more - 55px in total, which is
   right above a form but reads as a hole above a three-line address or a
   status line. Halved to 28px, and only where this class is asked for, so
   every other account screen keeps the template's spacing. */
.shop-page-title--tight {
    padding-bottom: 16px;
}

.account-panel .shop-page-title--tight {
    margin-bottom: 12px;
}

.account-note,
.account-empty {
    color: var(--thm-gray);
    margin-bottom: 20px;
}

.account-address {
    color: var(--thm-gray);
    line-height: 28px;
    margin-bottom: 0;
}

/* Repeat-order footer. Sits under the items table on a finished order, far
   enough clear of the totals row that it does not read as part of it. The
   note above the button, when there is one, keeps its own spacing. */
.order-reorder {
    margin-top: 30px;
}

/* The order screen's two actions, beside the reference rather than under the
   whole page.

   `.shop-page-title` is the template's `display: block` heading row; the
   modifier turns that one instance into a flex row without touching it
   anywhere else on the site. `flex-wrap` is what carries this down to a phone:
   the buttons drop to their own line under the reference. */
.shop-page-title--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.shop-page-title--actions h2 {
    margin-bottom: 0;
}

.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.order-actions form {
    margin: 0;
}

/* Equal width, set here rather than left to the labels. `.btn-one` is sized by
   its text, so "View Invoice" and "Order Again" came out a few pixels apart -
   close enough to look like a mistake rather than a difference. */
.order-actions .btn-one {
    min-width: 200px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
}

/* Two 200px pills do not sit side by side on a phone. Stacked and full width,
   which is what every other button does at this size. */
@media only screen and (max-width: 575px) {

    .order-actions {
        flex-direction: column;
        width: 100%;
    }

    .order-actions .btn-one {
        display: block;
        width: 100%;
        min-width: 0;
    }

}

/* --- the customer's invoice page ----------------------------------------- */

.invoice-parties {
    margin-bottom: 6px;
}

.invoice-parties h3 {
    font-size: 16px;
    line-height: 26px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--thm-gray);
    margin-bottom: 8px;
}

.invoice-parties > [class*="col-"] {
    margin-bottom: 20px;
}

.invoice-reference {
    padding-bottom: 6px;
}

.invoice-free {
    font-weight: 400;
    color: var(--thm-gray);
}

/* "Total includes GST of $9.09", under the totals table.

   Outside the table on purpose - the GST is already inside the total above and
   a row among the charges would not add up. Quiet, because it is a statement
   about the total rather than another figure to read, but not so quiet that it
   vanishes on paper: this line is the reason the document is a tax invoice, and
   the person keeping it is keeping it for exactly this. */
.invoice-gst {
    padding-top: 10px;
    color: var(--thm-gray);
}

.invoice-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* On paper, the invoice and nothing else.

   The site chrome - header, breadcrumb banner, account nav, footer, toasts -
   is navigation, and navigation printed on a document somebody files is a
   page of dead links. The panel loses its card styling too: a border and a
   shadow are for separating it from a page it no longer shares. */
@media print {
    .main-header,
    .breadcrumb-area,
    .footer-area,
    .shop-sidebar-wrapper,
    .invoice-actions,
    .toast-stack,
    .scroll-top,
    .mobile-menu,
    .search-popup {
        display: none !important;
    }

    .account-area {
        padding: 0 !important;
    }

    /* The nav column is gone, so the content column takes the width back
       rather than printing three quarters wide with a margin of nothing. */
    .account-area .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .account-invoice {
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    /* A background a browser is told to drop leaves white text on white paper.
       These read as plain text instead. */
    .order-status {
        background: none !important;
        color: #000 !important;
        padding-left: 0;
    }
}

/* The calendar behind "Choose a different date…".

   jQuery UI is already on every page for the template's price slider, and
   `jquery-ui.css` draws the picker - so these rules only seat it: full width
   under the select it belongs to, and clear of the field above.

   `hidden` needs stating because the template's own `.ui-datepicker-inline`
   sets `display: block`, which would otherwise win over the attribute. */
.subscribe-calendar {
    margin: -6px 0 20px;
}

.subscribe-calendar[hidden] {
    display: none;
}

.subscribe-calendar .ui-datepicker {
    width: 100%;
}

/* The 29th to the 31st. They cannot come round every month, so they are refused
   rather than accepted and quietly moved - and that has to look like a rule
   rather than like a broken calendar. */
.subscribe-calendar .ui-datepicker-unselectable span {
    opacity: 0.35;
    cursor: not-allowed;
}

.subscribe-day-note {
    color: var(--thm-gray);
    font-size: 14px;
    line-height: 24px;
    margin: -6px 0 20px;
}

/* The subscribe form's confirmation line. The template's forms have no
   checkbox of their own, so this borrows the checkout's confirm styling:
   the box on the baseline of the first line of text rather than centred
   against a paragraph that may wrap to three lines. */
.subscribe-terms {
    margin-bottom: 24px;
}

.subscribe-terms label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--thm-gray);
    font-size: 15px;
    line-height: 26px;
    cursor: pointer;
}

.subscribe-terms input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 6px;
}

/* One wording at a time beside the tick.
 *
 * The label holds both - the card version and the out-of-area version - and
 * the script swaps `is-hidden` between them as the delivery area changes. There
 * is no site-wide `.is-hidden` rule though, only scoped ones, so nothing was
 * hiding either: both sentences showed at once against a single checkbox.
 * Scoped here to match how every other `is-hidden` in this file is written,
 * rather than adding a global rule that would newly hide things elsewhere. */
.subscribe-terms .is-hidden {
    display: none;
}

/* The form on its own account page sits inside a panel that already has
   padding, so the form's own card padding would double it up. */
.account-panel--form .contact-style1_form {
    margin-top: 0;
}

.account-panel--form .contact-style1_form .top-title {
    margin-top: 0;
}

.order-reorder .account-note:last-child {
    margin-bottom: 0;
}

/* --- overview tiles ------------------------------------------------------ */

.account-stats {
    margin-bottom: -20px;
}

.account-stat {
    text-align: center;
    border: 1px solid #e9edf1;
    border-radius: 5px;
    padding: 24px 15px;
    margin-bottom: 20px;
}

.account-stat h3 {
    color: var(--thm-base);
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 4px;
}

.account-stat p {
    color: var(--thm-gray);
    margin-bottom: 8px;
    word-break: break-word;
}

.account-stat a {
    color: var(--thm-base);
    font-weight: 600;
}

/* The delivery address, under the tiles in the same panel. Bordered like them
   so it reads as one more thing about the account, but left-aligned and full
   width: an address is read line by line, not scanned like a figure.

   `.account-stats` carries a -20px bottom margin against the tiles' own 20px,
   so the row ends flush and this margin is measured from the tiles themselves. */
.account-address-card {
    border: 1px solid #e9edf1;
    border-radius: 5px;
    padding: 24px;
    margin-top: 30px;
}

.account-address-card h3 {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 10px;
}

.account-address-card p:last-child {
    margin-bottom: 0;
}

/* --- order tables -------------------------------------------------------- */

/* `.cart-table` is drawn for product rows with a thumbnail column; these are
   enquiries, so the cells need ordinary padding rather than the 30px the
   product column carries. */
.account-table th,
.account-table td {
    padding: 14px 15px;
    vertical-align: middle;
}

/* A table wider than its panel must scroll inside it, not spill out of it.

   The template gives the cart's wrapper `overflow-x: auto`, but scoped to
   `.cart-table-box`, which the account pages are not inside - so six columns in
   the dashboard's narrow column ran the Payment badge out past the edge of the
   card. Same rule, applied where these tables actually live. */
.account-panel .table-outer {
    width: 100%;
    overflow-x: auto;
}


/* "This is a summary of your order, not a tax invoice."

   Placed in the 30px of card padding that already sits between the rule under
   Total and the foot of the card, rather than below it. The negative bottom
   margin is what keeps it there: 6px above + 18px of line - 24px back = zero,
   so the card is exactly the height it was and the gap is the gap that was
   already there. Six pixels of air each side of the line, which is tight on
   purpose - the space is borrowed, not taken.

   It grows the card only if it wraps to a second line on a narrow screen, which
   is the right way round: clipping a sentence to protect a measurement would be
   the wrong trade. */
.order-bill-note {
    margin: 4px 0 -24px;
    color: var(--thm-gray);
    font-size: 13px;
    line-height: 18px;
}

/* "Paid by Visa •••• 4242 on 13 August 2026".

   Above the bill note, so the two small grey lines under the totals read as a
   pair rather than as one line and an afterthought.

   The bill note below still borrows the card's bottom padding, but two 18px
   lines do not fit in 30px however they are arranged - so on a card-paid order
   the card is about 22px taller than it was. Squeezing both into the padding
   would leave two lines jammed against each other and against the card edge,
   which is a worse answer than 22px. An order paid another way has no card line
   and is exactly the height it was. */
.order-paid-with {
    margin: 6px 0 0;
    color: var(--thm-gray);
    font-size: 13px;
    line-height: 18px;
}

/* The same line on the invoice, where it sits under the GST statement. Uses
   `.account-note` for its colour, so only the spacing is set here. */
.invoice-paid-with {
    padding-top: 2px;
    margin-bottom: 0;
}

.order-bill-note a {
    color: var(--thm-base);
    font-weight: 600;
}

.order-bill-note a:hover {
    color: var(--thm-primary);
}

.account-table .prod-column {
    padding-left: 15px;
    text-align: left;
}

.account-table a {
    color: var(--thm-base);
    font-weight: 600;
}

/* One order should be distinguishable from the next.

   `.cart-table` was drawn for the shopping cart, where every row carries a
   product photo tall enough to separate itself. These rows are four short
   numbers, so without a rule between them a page of orders reads as one block
   of text. A hairline and a little more room is all it needs - the same
   #dae5ec the template uses for the cart's own borders, so nothing new is
   introduced.

   Header first, heavier, so the column names read as a heading rather than a
   fourth row. */
.account-table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #dae5ec;
}

.account-table tbody tr {
    border-bottom: 1px solid #dae5ec;
}

.account-table tbody td {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* The reference is what a customer quotes when they ring, so it reads as an
   identifier rather than as another cell of text. */
.account-table .order-reference {
    font-family: var(--thm-font-2);
    font-weight: 700;
    color: var(--thm-base);
    white-space: nowrap;
}

/* The whole row is the link, so it has to look like one under the cursor and
   answer to the keyboard focus ring. */
.account-table--clickable tbody tr {
    cursor: pointer;
    transition: background 200ms ease;
}

.account-table--clickable tbody tr:hover,
.account-table--clickable tbody tr:focus {
    background: #f4f7fa;
    outline: none;
}

.account-table--clickable tbody tr:focus-visible {
    outline: 2px solid var(--thm-base);
    outline-offset: -2px;
}

.order-status {
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 20px;
    background: #eef2f6;
    color: var(--thm-gray);
    /* One phrase, one line: left to wrap, "Out for delivery" breaks inside the
       pill and the row grows a line taller than the ones around it. */
    white-space: nowrap;
}

/* The delivery status the customer sees, in the same four steps staff set it
   from (Order::STATUSES). Without these every badge fell back to the grey base
   above, so "Delivered" looked exactly like "Pending" - the one thing a
   customer opens this page to tell apart.

   `pending` is deliberately left on the grey base: nothing has happened yet. */
.order-status--packaging,
.order-status--new {
    background: rgba(var(--thm-primary-rgb), 0.18);
    color: var(--thm-base);
}

.order-status--out-for-delivery,
.order-status--replied {
    background: rgba(23, 162, 184, 0.14);
    color: #0f7c8c;
}

/* `viewed` is set the moment staff open an enquiry, so the customer can see it
   has been picked up before anyone has had time to answer. */
.order-status--viewed {
    background: rgba(var(--thm-primary-rgb), 0.14);
    color: var(--thm-base);
}

.order-status--delivered,
.order-status--paid,
.order-status--resolved,
.order-status--completed {
    background: rgba(16, 196, 105, 0.15);
    color: #0f9f56;
}

.order-status--unpaid,
.order-status--cancelled {
    background: rgba(214, 66, 66, 0.12);
    color: #d64242;
}

/* Subscription states. `requested` sits on the grey base with `pending` - the
   customer has asked and nothing has happened yet - and `cancelled` and
   `completed` are already covered above, since they mean the same thing here.

   `cancel-requested` gets amber of its own: it is neither running-as-normal nor
   stopped, and reading it as either is the mistake worth designing against. */
.order-status--active {
    background: rgba(16, 196, 105, 0.15);
    color: #0f9f56;
}

.order-status--cancel-requested {
    background: rgba(240, 173, 78, 0.18);
    color: #a9660a;
}

.account-note--warning {
    color: #a9660a;
}

.text-highlight {
    color: #0f9f56;
    font-weight: 600;
}

/* The cancel request. Deliberately the quietest thing on the panel: it is not
   the action the page is for, and it should not compete with the delivery
   details above it. */
.subscription-cancel {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #e9edf1;
}

.subscription-cancel .input-box {
    margin-bottom: 16px;
}

.subscription-cancel textarea {
    width: 100%;
    border: 1px solid #e9edf1;
    border-radius: 5px;
    padding: 12px 16px;
    color: var(--thm-gray);
    font-size: 15px;
}

/* The quiet button: a `.btn-one` that is not the action of the page.

   It has to repaint `:after`, not `background`. `.btn-one` is `position:
   relative; z-index: 2`, which makes it a stacking context, and its `:after`
   fill sits inside that at `z-index: -2` - behind the label, but still in front
   of the element's own background. Setting `background` therefore did nothing
   visible: the pill stayed navy and only the label turned grey, which is the
   one combination that reads as broken rather than quiet. */
.btn-one.btn-one--quiet:after {
    background-color: #eef2f6;
}

/* `.btn-one` carries a drop shadow on its label, drawn for white text on navy.
   Under grey text on light grey it is a smudge. */
.btn-one.btn-one--quiet {
    text-shadow: none;
}

.btn-one.btn-one--quiet .txt {
    color: var(--thm-gray);
}

.btn-one.btn-one--quiet:hover:after {
    background-color: #e2e8ef;
}

.order-message {
    margin: 24px 0;
}

.order-message h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.order-message p {
    color: var(--thm-gray);
}

.account-pagination {
    margin-top: 24px;
}

/* --- address cards ------------------------------------------------------- */

.account-address-card {
    position: relative;
    border: 1px solid #e9edf1;
    border-radius: 5px;
    padding: 24px;
    margin-bottom: 24px;
}

.account-address-card.is-default {
    border-color: var(--thm-primary);
}

.account-address-card_tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--thm-base);
    background: rgba(var(--thm-primary-rgb), 0.18);
    border-radius: 20px;
    padding: 2px 12px;
}

.account-address-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    padding-right: 80px;
}

.account-address-card p {
    color: var(--thm-gray);
    line-height: 26px;
}

.account-address-card_actions {
    display: flex;
    gap: 16px;
    margin-top: 14px;
}

/* Buttons that read as links: these are secondary to Save Address, and a row
   of `.btn-one` pills inside every card would shout over it. */
.account-address-card_actions button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--thm-base);
    font-weight: 600;
    cursor: pointer;
}

.account-address-card_actions .is-remove {
    color: #d64242;
}

/* --- nav card ------------------------------------------------------------ */

.account-logout {
    margin-top: 20px;
}

.account-logout .btn-one {
    width: 100%;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Toasts.

   Every form used to report itself in a block above or below its fields, which
   pushed the page around the instant it appeared: the form grew, everything
   under it moved, and on a phone the button you were reaching for slid out from
   under your thumb. Fixed to the top-right corner instead, so saying something
   costs the layout nothing at all.

   `position: fixed` needs no transformed ancestor to work against, which is why
   the stack is included outside `.page-wrapper` rather than inside it.

   z-index sits above the sticky header (999 in the template) and below the
   sign-up pop-up's overlay, so a toast is never buried and never covers a modal
   the visitor is trying to read.
   -------------------------------------------------------------------------- */

.toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* the stack must not intercept clicks where it is empty, but each toast
       inside it has to stay clickable to be dismissed */
    pointer-events: none;
    max-width: min(380px, calc(100vw - 40px));
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: #ffffff;
    border-left: 4px solid var(--thm-base);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(12, 21, 41, 0.16);
    color: #151515;
    font-family: var(--thm-font);
    font-size: 15px;
    line-height: 22px;
    /* arrives from the right, the edge it is pinned to */
    animation: nepter-toast-in 260ms ease both;
}

.toast--success {
    border-left-color: #0f9f56;
}

.toast--error {
    border-left-color: #d64242;
}

.toast_text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.toast_close {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--thm-gray);
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: color 200ms ease;
}

.toast_close:hover {
    color: #151515;
}

/* Set by the script a moment before the element is removed, so the toast
   leaves the way it arrived rather than blinking out. */
.toast.is-leaving {
    animation: nepter-toast-out 220ms ease both;
}

@keyframes nepter-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes nepter-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
}

/* A phone has no room for a 380px card pinned to one corner, and a toast that
   overlaps the header is worse than one that spans the width. Full width, just
   below the header. */
@media only screen and (max-width: 767px) {

    .toast-stack {
        top: 12px;
        left: 12px;
        right: 12px;
        align-items: stretch;
        max-width: none;
    }

    .toast {
        font-size: 14px;
    }

}

/* Anyone who has asked their system not to animate gets the toast without the
   slide - it still appears and still dismisses. */
@media (prefers-reduced-motion: reduce) {

    .toast,
    .toast.is-leaving {
        animation: none;
    }

}

/* --- messages ------------------------------------------------------------ */

.form-message {
    font-size: 15px;
    line-height: 22px;
    border-radius: 5px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.form-message.is-error {
    background: rgba(214, 66, 66, 0.08);
    color: #d64242;
}

.form-message.is-success {
    background: rgba(16, 196, 105, 0.10);
    color: #0f9f56;
}

/* The service-card forms had their own `.form-message` before this one
   existed; theirs is inline text under the button, not a banner. */
.single-service-style1--form .form-message {
    background: none;
    padding: 0;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {

    .account-area {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .account-panel {
        padding: 20px;
        margin-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   Header account control.

   Customer accounts are reachable from the phone header (`.header-mobile-actions`)
   but nowhere else, so from 768px up there was no way to sign in at all. This
   fills that, sitting left of the cart.

   Nothing here is a new design. The circle is `.shopping-cart-box a`
   (header-section.css:691) - 42px, 2px `--thm-base`, 50% radius - and the menu
   is the nav submenu (header-section.css:571 and :510): `--thm-base` fill,
   white 16px items on hairline dividers, 10px radius, the same translateY(30px)
   slide.
   -------------------------------------------------------------------------- */

.header-account-box {
    position: relative;
    display: block;
    margin-right: 15px;
}

/* Signed in this is a <button>, signed out an <a> - one carries the menu, the
   other goes to the login page. The button reset is what keeps them identical:
   without it the browser's own chrome, font and centring show through.

   A circle in both states, the same one the cart draws beside it. Each holds a
   single round thing - the person icon signed out, the customer's picture
   signed in - so there is nothing for a pill shape to make room for. */
.header-account-box_toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: 2px solid var(--thm-base);
    border-radius: 50%;
    color: var(--thm-base);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    transition: all 0.4s linear;
}

/* It opens the menu and does nothing on click, so it should not offer a
   pointing hand as though it were going somewhere. */
button.header-account-box_toggle {
    cursor: default;
}


/* The full `border` shorthand, not `border-color` - and that is the whole point
   of this rule rather than a style preference.

   style.css:74 carries `a, a:hover, a:active, a:focus { border: none }`. Signed
   out this control is an <a>, so on hover that rule sets `border-style: none`;
   `border-color` alone leaves the style to it and the ring vanishes mid-hover.
   The cart never had the problem because `.shopping-cart-box a:hover`
   (header-section.css:706) always wrote the whole shorthand. Writing it here
   too makes the two behave identically, which is the point: they sit side by
   side and are the same control twice. */
.header-account-box_toggle:hover {
    border: 2px solid var(--thm-primary);
    color: var(--thm-base);
}

.header-account-box_menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 190px;
    margin-top: 10px;
    padding: 0 20px;
    background: var(--thm-base);
    border-radius: 10px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0 5px 1px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: all 200ms ease;
    z-index: 100;
}

/* `:focus-within` as well as `:hover`. The template's own dropdowns are
   hover-only, which leaves a keyboard user tabbing onto a menu that never
   opens - fine to copy the look, not the omission. */
.header-account-box:hover .header-account-box_menu,
.header-account-box:focus-within .header-account-box_menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-account-box_menu li {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.header-account-box_menu li:last-child {
    border-bottom: 0;
}

.header-account-box_menu a,
.header-account-box_menu button {
    display: block;
    width: 100%;
    padding: 13px 0;
    background: none;
    border: 0;
    color: #ffffff;
    font-family: var(--thm-font);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 500ms ease;
}

.header-account-box_menu a:hover,
.header-account-box_menu button:hover {
    color: var(--thm-primary);
    padding-left: 10px;
}

/* Visibility. Note this deliberately does NOT follow `.shopping-cart-box`,
   which responsive.css:424 hides between 768 and 991 - doing the same here
   would leave that whole band with no way to sign in, which is the gap this
   exists to close. Below 768 `.header-mobile-actions` takes over, so this hides
   to avoid two account controls on one page. */
@media only screen and (max-width: 767px) {

    .header-account-box {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .header-account-box {
        margin-right: 10px;
    }
}

/* The template's own tight tier, and the only band where this can break.
   From 1200px up the row is `flex-wrap: nowrap` with `.header-right` set to
   `flex: 1 0 auto`, so it does not wrap when it runs out of room - it overflows
   and pushes Order Now off the end.

   Subscriptions is back in the nav, which puts the seven labels at the 491px
   they occupied at 15px before it was dropped - 83px more than without it. Two
   changes paid for that and left the row easier than it was:

     the name out of the account control   -112px  (a 90px name, its 8px gap,
                                                    and 12px of pill padding)
     Order Now to header size               -40px  (see below)

   So 152px freed against 83px spent. Signed in now costs exactly what signed
   out costs - a 42px circle - where before it cost 169px, and that was the
   number with only 10px of slack at a 1200px viewport. There is no longer a
   state of this header that is tighter than any other. */
@media only screen and (min-width: 1200px) and (max-width: 1390px) {

    .header-account-box {
        margin-right: 10px;
    }
}

/* -----------------------------------------------------------------------------
   Order Now, at header size

   `.btn-one` is the template's page button - 55px tall with 45px of padding
   each side - and it is sized for the hero and the pricing cards. In the header
   it sits beside two 42px circles and was the tallest thing in the row.

   So it is sized to those circles rather than to a smaller number picked by
   eye: 42px tall, and 26px of padding, which frees the ~40px this row wanted
   back for Subscriptions. The font drops one point; below 13px the uppercase
   letter-spacing starts to look thin next to the nav.

   Scoped to the header. `.btn-one` is on perhaps forty buttons across the site
   and none of the others are in a crowded row.

   Three class selectors because responsive.css:2007 pads this same button to
   35px between 1200 and 1390 - the band where the row is tightest, and the last
   place that should end up looser than the rest.
   -------------------------------------------------------------------------- */
.header-right_buttom .btns-box .btn-one {
    padding-left: 26px;
    padding-right: 26px;
    font-size: 13px;
    line-height: 42px;
}

/* `.round` is the blob that grows out of the top right corner on hover, clipped
   by the button's own `overflow: hidden`. It was 55px for a 55px button, so it
   comes down with it - and keeps the same offsets in proportion, or it would
   read as a much bigger corner on a smaller button. */
.header-right_buttom .btns-box .btn-one .round {
    top: -15px;
    right: -15px;
    width: 42px;
    height: 42px;
}

/* The hover is `.btn-one:hover .round`, which the rule above now outweighs -
   without this the blob would never move and the button would look dead on
   hover. Same three values the template animates to. */
.header-right_buttom .btns-box .btn-one:hover .round {
    top: 0;
    right: 0;
    width: 100%;
}


/* The sticky bar that replaces the header on scroll carries the same two
   controls. custom.js copies `.nav-outer .main-menu` into it and nothing else,
   which is why it had neither before; the markup is now a shared partial.

   `.main-menu` floats left, and a float would drop the icons onto a second
   line, so `.right-col` becomes a flex row.

   Spacing is one number, applied once. The template spaced nav items with a
   50px right margin on every `li` - including the last - and the account box
   carries its own 15px, so once the icons arrived the row read as 50px between
   links, 50px before the account, then 15px to the cart: three different gaps.
   The margins are dropped and a single `gap` does all of it, so every item in
   the bar is the same distance from its neighbour.

   30px rather than 50px because the bar now holds two more items than the
   template drew it for. At 30px the seven links plus both icons fit inside the
   `.container` down to the 992px breakpoint where the sticky header hides. */
.sticky-header .right-col {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sticky-header .main-menu .navigation > li,
.sticky-header .header-account-box {
    margin-right: 0;
}

.sticky-header .main-menu .navigation > li {
    margin-left: 30px;
}

.sticky-header .main-menu .navigation > li:first-child {
    margin-left: 0;
}

.sticky-header .header-account-box,
.sticky-header .shopping-cart-box {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Cart and checkout.

   Aguapure ships `cart.html` and `checkout.html` as static pages, so their
   classes exist in style.css and are reused as-is. What is added here is only
   what the static markup had no equivalent for: a per-row quantity form (the
   template had one Update button for the whole table, which cannot work when
   Remove needs its own request), the summary lines, and the empty state.
   -------------------------------------------------------------------------- */

/* The gap under the banner, matched to the homepage.

   The template opens these two pages a long way down: `.cart-area` at 102px
   (style.css:6698) and `.checkout-area` at 110px (style.css:7412). The homepage
   puts its products only 40px below the hero - `.shop-style1-area .sec-title`
   above - so the shop pages read as though they start a screen later than
   everything else. Same 40px here, top only; the bottom padding is the
   template's and stays. */
.cart-area,
.checkout-area {
    padding-top: 40px;
}

.cart-empty,
.checkout-area .checkout-form-box {
    background: #ffffff;
    border: 1px solid #e9edf1;
    border-radius: 5px;
    padding: 30px;
    margin-bottom: 30px;
}

.cart-empty {
    text-align: center;
    padding: 60px 30px;
}

.cart-empty h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.cart-empty p {
    color: var(--thm-gray);
    margin-bottom: 24px;
}

/* Each row posts on its own, so the quantity box and its button sit together. */
.cart-qty-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-qty-form .input-box input {
    width: 70px;
    text-align: center;
}

.cart-qty-update {
    background: none;
    border: 0;
    padding: 0;
    color: var(--thm-base);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* The template drew Remove as a bare span; it has to be a button to submit. */
.cart-table .remove {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--thm-gray);
    transition: color 300ms ease;
}

.cart-table .remove:hover {
    color: #d64242;
}

.cart-button-box {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-end;
    align-items: center;
}

/* --- one pill, two halves ------------------------------------------------

   Continue Shopping and Checkout are joined into a single control: left half
   goes back to the shop, right half goes on to pay. They stay two separate
   anchors - one button with a click handler would lose middle-click, the
   status-bar preview and keyboard access, for no gain.

   All the work is in the corners. `.btn-one` paints its fill through an
   `:after` that carries its own `border-radius: 30px` (style.css:187), so both
   the element and that pseudo-element have to be squared off on the inner
   edge or the seam shows two rounded ends butted together. The hover wipe
   (`.round`, which grows to fill) needs nothing: `.btn-one` is already
   `overflow: hidden`, so it is clipped to whatever shape is set here.
   ------------------------------------------------------------------------- */

/* Grid rather than flex, for one reason: `1fr 1fr` sizes both tracks to the
   wider of the two, so the halves are exactly equal. Under flex they were sized
   by their own text, and "Continue Shopping" is twice the length of "Checkout" -
   which made a pill with one half visibly larger than the other. */
.cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

/* `.btn-one` is inline-block and sized by its text; as a grid item it fills its
   track instead, so the label has to be told to centre in it. */
.cart-actions .btn-one {
    padding-left: 35px;
    padding-right: 35px;
    text-align: center;
}

.cart-actions_left,
.cart-actions_left:after {
    border-radius: 30px 0 0 30px;
}

.cart-actions_right,
.cart-actions_right:after {
    border-radius: 0 30px 30px 0;
}

/* The seam. On the left half, because `:after` is inset to the padding box and
   so leaves the border visible over the fill. */
.cart-actions_left {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

/* --- order summary -------------------------------------------------------

   The card is the template's, not ours. `checkout.html` draws it tinted
   (#ecf2f6), 10px-rounded and 40/30/50 padded, with the item list, the running
   totals and the closing button all inside the one box - and style.css already
   carries every rule for that. What used to live here was a white, square,
   1px-bordered card that overrode all of it and looked like it came from a
   different site than the page it sat on.

   So the overrides are gone. What is left below is only what the template has
   no equivalent for: a discount line (it charges tax where we discount), the
   code box, the confirmation tick, and the out-of-area warning. Each one
   borrows the shape of the template row it sits next to.
   ------------------------------------------------------------------------- */

/* The template's summary is the last thing in its column, so it never needed
   this; ours stacks above the footer on a phone. */
.order-summary-box {
    margin-bottom: 30px;
}

/* The code's own name, beside the word Discount. */
.order-summary-box em {
    font-style: normal;
    font-size: 13px;
    font-weight: 400;
    color: var(--thm-base);
}

/* Same `is-hidden` convention used by the products grid and the blog search,
   so there is one way of switching something off across the site. */
.order-summary-box .is-hidden {
    display: none;
}

/* --- the code box --------------------------------------------------------

   Input and button on one line: this is a short code, and the template's
   full-width `.btn-one` under a full-width field would read as the thing that
   places the order, which is the button directly below it. */

/* --- a discount the customer already holds -------------------------------

   Sits directly above the entry box, so the card reads "here is what you have"
   then "type one in". Dashed, to look like something torn off rather than
   another figure in the totals above it. */

.summary-offers {
    margin: 28px 0 20px;
}

.summary-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px dashed var(--thm-base);
    border-radius: 5px;
}

.summary-offer + .summary-offer {
    margin-top: 8px;
}

/* A button that has to look like a code, not a button - so the whole of the
   browser's own chrome comes off and a dotted underline goes on to say it can
   be tapped. */
.summary-offer_code {
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px dashed var(--thm-base);
    font-family: var(--thm-font-2);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--thm-base);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 200ms ease;
}

.summary-offer_code:hover,
.summary-offer_code:focus {
    color: var(--thm-primary);
    outline: none;
}

.summary-offer_code:focus-visible {
    outline: 2px solid var(--thm-base);
    outline-offset: 3px;
}

.summary-offer_what {
    font-size: 14px;
    color: #585858;
}

/* Conditions - the minimum spend, the expiry. Full width so they sit under the
   code rather than pushing it out of line. */
.summary-offer_note {
    flex: 0 0 100%;
    font-size: 12px;
    line-height: 18px;
    color: var(--thm-gray);
}

.summary-code {
    margin: 28px 0 24px;
}

.summary-code .field-label {
    margin-bottom: 9px;
}

.summary-code_row {
    display: flex;
    gap: 8px;
}

.summary-code_row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    background: #ffffff;
    border: 1px solid #d1d9dd;
    border-radius: 5px;
    color: #5f5e5e;
    font-family: var(--thm-font);
    font-size: 15px;
    transition: all 300ms ease;
}

.summary-code_row input:focus {
    border-color: var(--thm-base);
    outline: none;
}

.summary-code_apply {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 20px;
    background: var(--thm-base);
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-family: var(--thm-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 300ms ease;
}

.summary-code_apply:hover {
    background: var(--thm-black);
}

/* Why a code was refused, under the field it was typed into. There is no
   matching success message: an accepted code shows itself as a Discount line
   in the totals above. */
.summary-code_error {
    margin: 8px 0 0;
    color: #d64242;
    font-size: 13px;
    line-height: 20px;
}

/* Place Order fills the card.

   `.btn-one` is inline-block and sized by its label, so on a card this wide it
   sat as a short pill against a lot of empty space - reading as one option
   among several rather than the thing that completes the order. The template
   wraps it in `.checkout-button`, which is the hook for widening it without
   touching `.btn-one` anywhere else on the site. */
.order-summary-box .checkout-button .btn-one {
    display: block;
    width: 100%;
    text-align: center;
}

/* --- confirmation and notes ---------------------------------------------- */

/* `.checked-box2` is the template's own tick, borrowed from its comment form.
   It sets no outer spacing, having always been the last thing in its box. */
.summary-confirm {
    margin-bottom: 4px;
}

.checkout-note {
    color: var(--thm-gray);
    font-size: 14px;
    line-height: 22px;
    margin: 16px 0;
}

/* Out of area: the order is still placeable (spec 11.4), so this warns rather
   than blocks. Amber over the card's own tint. */
.order-summary-box.is-out-of-zone {
    background: #fffaf0;
    box-shadow: inset 0 0 0 1px #e5b567;
}

.order-summary-box .checkout-note[data-summary-row="out-of-zone"] {
    padding: 14px 16px;
    background: #ffffff;
    border-left: 3px solid #e5b567;
    border-radius: 4px;
}

/* "Spend $8.50 more and delivery is free", under the Delivery line it is about.

   Green rather than the amber above it: that one is a warning about an order
   nobody can deliver, this is an offer. The same shape, so the two read as
   notes on the summary rather than as two unrelated inventions. */
.order-summary-box .summary-nudge {
    padding: 10px 14px;
    margin: 0 0 16px;
    background: #ffffff;
    border-left: 3px solid #0f9f56;
    border-radius: 4px;
    color: var(--thm-black);
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}

/* "Total includes GST of $9.09", directly under the Total line.

   Not shaped like `.summary-nudge` above it, and that is the point: the nudge
   and the out-of-zone note are messages, with a coloured edge to say so. This
   is a footnote about the number immediately above it, so it sits flush under
   it, small and grey, with no border to make it look like a row of the
   summary. The GST is already in the Total - anything that reads as an extra
   line makes the total look short by the amount of it. */
.order-summary-box .summary-gst {
    margin: -8px 0 16px;
    color: var(--thm-gray);
    font-size: 13px;
    line-height: 20px;
}

/* The "+61" printed inside the phone box.

   The customer types nine digits and reads "+61432302037"; the database stores
   0432302037. The prefix is a span rather than a second input, so it submits
   nothing, takes no tab stop, and is not announced as an empty form control -
   and `pointer-events: none` means a click over it lands on the real field
   underneath, which is what somebody aiming at the left of the box expects.

   The awkward part is that the three forms carrying this field are three
   different template idioms with three different left paddings, and the prefix
   has to start exactly where the text would have. Rather than guess, each
   context sets `--phone-inset` to its own padding and both the span and the
   input are placed from that one number - so the two can never drift apart.

   32px is the width of "+61" at 16px in the theme font, plus the gap before the
   digits. */
.phone-field {
    position: relative;
    display: block;
    --phone-inset: 20px;
}

.phone-field_prefix {
    position: absolute;
    left: var(--phone-inset);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    /* The template's own muted grey (style.css, 15 uses), not the input's text
       colour: the "+61" is fixed and cannot be typed in, so it should not look
       like the digits the customer entered. Colour only - the span is absolutely
       positioned and pointer-events: none, so nothing here can move the box. */
    color: #98a1a7;
    /* Not selectable either, so a drag across the field takes the number and
       not a prefix the customer never typed. */
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--thm-font);
    font-size: 16px;
    /* Clicks fall through to the input. Without this the left third of the
       field is dead to the mouse. */
    pointer-events: none;
    z-index: 2;
}

/* Each context, at the specificity needed to beat its own padding rule.

   Four classes plus the element in each selector, which outranks the three-class
   rules in style.css and module-css that set `padding: 0 20px` and friends.
   Written out rather than relying on nepter.css loading last, because "it wins
   because of the order the files happen to be in" is a rule that breaks the day
   somebody concatenates them. */
/* 62px, not 52px: on the checkout the prefix carries an opaque background (see
   below), so the digits have to start clear of where that block ends rather
   than merely clear of the "+61" glyphs. */
.checkout-area .input-field .phone-field input[type="text"] {
    --phone-inset: 20px;
    padding-left: 62px;
}

.register-form-box_inner .input-field .phone-field input[type="text"] {
    --phone-inset: 25px;
    padding-left: 57px;
}

/* The subscription request form. Its left 65px is already spoken for: the
   template puts a phone icon at 20px with a divider rule at 50px, so the prefix
   starts after that rather than on top of it. */
.contact-form form .input-box .phone-field input[type="text"] {
    --phone-inset: 65px;
    padding-left: 97px;
}

/* The custom property has to be set on the element the span reads it from, not
   only on the input. `--phone-inset` on the input is inherited by nothing the
   span can see - they are siblings. */
.checkout-area .input-field .phone-field {
    --phone-inset: 20px;
}

/* The "+61" keeps the field's resting colour when the field is focused.

   The checkout is the only one of the three that changes an input's background
   on focus - `.checkout-area .input-field input:focus` turns it white. The
   prefix is a transparent span sitting over the input, so it went white with
   everything else, and the whole box lit up as though all of it were typeable.
   Only the part the customer can actually type in should.

   So the span gets its own patch of #f4f7fa - the same grey the field rests at -
   and is stretched from just inside the left border to cover it. The 4px radius
   is the field's 5px less its 1px border, so the corner follows the box rather
   than cutting a square out of it.

   The two other contexts need nothing: the register and account forms are
   transparent on a tinted card and the subscription form is #ecf2f6, and
   neither changes on focus, so there is nothing to mask. */
.checkout-area .input-field .phone-field_prefix {
    left: 1px;
    top: 1px;
    bottom: 1px;
    /* A pinned width, not padding either side of the text.

       Sized by its padding it ended wherever "+61" happened to render, which is
       a different number in every font and at every zoom - and it was landing
       past where the input's own padding starts, so the grey block clipped the
       leading 4. Fixing the width makes the two measurements agree by
       construction: the grey ends at 55px and the digits start at 62px,
       whatever the font does inside it. */
    width: 54px;
    padding-left: 19px;
    background: #f4f7fa;
    border-radius: 4px 0 0 4px;
}

.register-form-box_inner .input-field .phone-field {
    --phone-inset: 25px;
}

.contact-form form .input-box .phone-field {
    --phone-inset: 65px;
}

/* The field types the template never styled.

   It styles these boxes by input type and lists only what its own static pages
   used: `text` on the sign-in card (style.css:7899), `text` and `email` on the
   register card (style.css:7962). Its password boxes were `type="text"` and its
   sign-in box was a username, so a real `password` field anywhere - and the
   `email` field on sign in - matched no rule and drew with no size, no border
   and no fill: an invisible box on a white card.

   Declarations are that register rule verbatim; only the types are new. */
.login-form-box_inner .input-field input[type="email"],
.login-form-box_inner .input-field input[type="password"],
.register-form-box_inner .input-field input[type="password"] {
    position: relative;
    display: block;
    width: 100%;
    height: 55px;
    background: transparent;
    border: 1px solid #d1d9dd;
    color: #5f5e5e;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 30px;
    transition: all 700ms ease 0s;
    font-family: var(--thm-font);
}

/* Show/hide on a password box.

   Same shape as `.phone-field` above, which overlays "+61" on this card: a
   relative wrapper, one control positioned inside, and the input's padding on
   that side opened up to clear it. The inset is the field's own 25px padding,
   so the icon stops exactly where typed text stops rather than floating
   somewhere between the last character and the border. 50px is that inset
   twice - one for the icon, one for the gap to the edge.

   Both types are named because the button swaps the input between them, and
   the register card styles by type: without `[type="text"]` here the padding
   would be dropped the moment the password was revealed and the text would
   run under the icon. */
.password-field {
    position: relative;
    display: block;
    --pw-inset: 25px;
}

.login-form-box_inner .input-field .password-field input[type="password"],
.login-form-box_inner .input-field .password-field input[type="text"],
.register-form-box_inner .input-field .password-field input[type="password"],
.register-form-box_inner .input-field .password-field input[type="text"] {
    padding-right: calc(var(--pw-inset) * 2);
}

.password-field_toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--pw-inset) * 2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--pw-inset) 0 0;
    border: 0;
    background: transparent;
    /* The template's own muted grey, as the "+61" uses - this is furniture, not
       something the customer typed. */
    color: #98a1a7;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.password-field_toggle:hover,
.password-field_toggle:focus-visible {
    color: var(--thm-base);
}

.checkout-area .req {
    color: #d64242;
}

/* Both columns end level.

   A Bootstrap row already stretches its columns to equal height, but the cards
   inside them are sized by their own content - so the Delivery Address card
   stopped wherever its last field did and the Order Summary carried on past it,
   leaving two ragged feet. Making each column a flex column and letting its
   last card grow closes the gap: whichever side is shorter takes up the slack.

   Only from 992px, which is where the two columns exist at all. Below that they
   stack, and a card stretched to fill a column that is now the full page would
   be a screen of empty white. */
@media only screen and (min-width: 992px) {

    .checkout-columns > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    /* the last card in each column absorbs the difference, and loses the
       bottom margin so the two feet meet exactly rather than 30px apart */
    .checkout-columns > [class*="col-"] > .checkout-form-box:last-child,
    .checkout-columns > [class*="col-"] > .order-summary-box:last-child {
        flex: 1 1 auto;
        margin-bottom: 0;
    }

}

/* The fields themselves.

   The template only ever styles `.input-field input` inside its own login and
   register boxes (style.css:7962), which the checkout is not - so every input
   here fell back to the browser default and disappeared into the white card it
   sits on. There was nothing to aim at but the caret.

   Shape is the template's, copied from that register-form rule: 55px tall, 1px
   #d1d9dd, 25px of side padding. The one departure is the fill. That rule uses
   `background: transparent`, which works on the login page because its card is
   tinted; the checkout card is #ffffff, so transparent means invisible. A pale
   grey reads as a field on white and still looks like the same form.

   Radius is 5px rather than the register form's 30px, to match the square
   corners of `.checkout-form-box` and the order summary beside it. */
/* The field and its label.

   `.input-field` and `.field-label` are the template's class names, but it only
   ever writes rules for them nested inside `.login-form-box_inner` and
   `.register-form-box_inner` (style.css:7887 and 7950) - neither of which the
   checkout is. So on this page both were entirely unstyled: no gap between one
   field and the next, and a label sitting flush on the box above it. The whole
   card read as one run-on block.

   Copied from the register form's own rules, which is where this markup came
   from, so the spacing matches the rest of the site rather than being invented
   here. */
.checkout-area .input-field {
    position: relative;
    display: block;
    margin-bottom: 20px;
}

.checkout-area .field-label {
    position: relative;
    display: block;
    color: #5f5e5e;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 9px;
}

.checkout-area .input-field input[type="text"],
.checkout-area .input-field input[type="email"],
.checkout-area .input-field input[type="tel"],
.checkout-area .input-field input[type="number"],
.checkout-area .input-field select,
.checkout-area .input-field textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 55px;
    padding: 0 20px;
    background: #f4f7fa;
    border: 1px solid #d1d9dd;
    border-radius: 5px;
    color: #5f5e5e;
    font-family: var(--thm-font);
    font-size: 16px;
    transition: all 300ms ease;
}

.checkout-area .input-field textarea {
    height: auto;
    padding: 14px 20px;
}

/* The selects are not selects.

   custom.js runs `$('select:not(.ignore)').niceSelect()` (custom.js:675), which
   hides every real select and draws a `div.nice-select` in its place. So the
   rule above styles something the customer never sees, and what they do see
   comes from the template's global `.nice-select` (style.css:3730) - which sets
   `padding-left: 65px`, because on the contact form it is making room for an
   icon that this page does not have. That is the wide empty gap before "Select
   your area", and it is why the two selects did not line up with the text
   fields beside them.

   Matched to the inputs above instead. `!important` on the border only because
   the template's own rule is `!important`. */
.checkout-area .nice-select {
    float: none;
    width: 100%;
    height: 55px;
    line-height: 53px;
    padding-left: 20px;
    padding-right: 40px;
    background: #f4f7fa;
    border: 1px solid #d1d9dd !important;
    border-radius: 5px;
    color: #5f5e5e;
    font-size: 16px;
}

.checkout-area .nice-select.open,
.checkout-area .nice-select:focus {
    background: #ffffff;
    border-color: var(--thm-base) !important;
}

/* The template draws this chevron in white, for a chevron sitting on its own
   dark round button. On a pale field it was invisible. */
.checkout-area .nice-select:after {
    right: 20px;
    border-bottom-color: #5f5e5e;
    border-right-color: #5f5e5e;
}

/* A long saved address has to end in an ellipsis, not under the chevron.

   niceSelect draws the chosen text in a `span.current` and sets
   `white-space: nowrap` on the box, with nothing to stop the overflow - so
   "Address - 14 Test Street, Gosford NSW 2250" simply ran on through the arrow
   and out the other side. Clipping the span rather than `.nice-select` itself
   is deliberate: the dropdown `ul.list` is a child of that box, and
   `overflow: hidden` on the parent would cut the open menu off. */
.checkout-area .nice-select .current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The dropdown inherits the template's 30px radius otherwise, which reads as a
   different control from the box it drops out of. */
.checkout-area .nice-select .list {
    width: 100%;
    border-radius: 5px;
}

/* Focus has to be visible for the same reason the fill does - and a colour
   rather than the browser's outline, so it matches the buttons. */
.checkout-area .input-field input:focus,
.checkout-area .input-field select:focus,
.checkout-area .input-field textarea:focus {
    background: #ffffff;
    border-color: var(--thm-base);
    outline: none;
}

.checkout-area .input-field input::placeholder,
.checkout-area .input-field textarea::placeholder {
    color: #9aa7b0;
}

.checkout-area textarea {
    width: 100%;
}

/* --- product card: the photo is always the same size ----------------------

   The template ships every shop photo at 308x323 and styles the image
   `width: 100%` with a free height, so the card was exactly as tall as whatever
   file was dropped in. That held while the only photos were the template's own;
   the moment Nepter uploads a 720x1560 bottle shot, that one card is three times
   the height of its neighbours and the grid row breaks.

   `aspect-ratio` pins the frame to the template's own 308:323, and `contain`
   fits the photo inside it. Not `cover`: cropping a tall bottle to a square
   would cut the top and bottom off the product, which is the one thing the
   photo is there to show. The letterboxing sits on the card's own white, so a
   correctly proportioned photo - every template one - renders exactly as it did
   before. */
.single-shop-item .img-holder img,
.single-shop-item-style3 .img-holder img,
.single-shop-item--style2 .img-holder img {
    aspect-ratio: 308 / 323;
    object-fit: contain;
    background: #ffffff;
}

/* --- product card buttons ------------------------------------------------ */

.single-shop-item .btn-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* "Out of Stock", where the Add to Cart button would be.

   Not a disabled button: a button that cannot be pressed invites pressing it,
   and then says nothing when it does not work. This is a label, and it reads
   like one - the pill shape and 55px line height of `.btn-one` would have it
   read as something to click.

   `.btn-box` is `line-height: 0` in the template, which every child inherits;
   the button gets away with it because `.btn-one` sets its own. */
.stock-note {
    display: inline-block;
    font-family: var(--thm-font-2);
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 8px 20px;
    border-radius: 20px;
}

.stock-note--out {
    background: #f4f0ee;
    color: #a9660a;
}

@media only screen and (max-width: 767px) {

    .cart-empty,
    .checkout-area .checkout-form-box,
    .order-summary-box {
        padding: 20px;
        margin-bottom: 20px;
    }

    /* ----------------------------------------------------------------------
       The cart page's own phone layout.

       The breadcrumb banner goes: it is a full-height hero repeating the words
       "Shopping Cart" directly under a header that already says where you are,
       and on a 390px screen it pushed the actual cart below the fold. Only this
       page's copy - hence the `--cart` modifier rather than hiding
       `.breadcrumb-area` outright.
       ---------------------------------------------------------------------- */
    .breadcrumb-area--cart {
        display: none;
    }

    /* No phone-specific gap any more: `.cart-area` is 40px at every width now,
       matched to the homepage, and that is the value this rule used to set on
       its own. */

    /* The same split pill as the desktop, run full width.

       It does not fit at the template's sizing. `.btn-one` is 14px uppercase
       with 45px of padding each side, and half of a 360px screen is about
       165px - "CONTINUE SHOPPING" alone is around 150px at that size. So the
       type and the padding come down here.

       `nowrap` matters more than it looks: `.btn-one` sets `line-height: 55px`,
       so a label allowed to wrap would produce a 110px-tall button rather than
       a taller line of text. Better to guarantee one line and size to it. */
    .cart-actions {
        width: 100%;
    }

    .cart-actions .btn-one {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px;
        white-space: nowrap;
    }

    .cart-button-box {
        justify-content: center;
    }

    /* ----------------------------------------------------------------------
       Tables become cards on a phone.

       The template draws the cart at `min-width: 1024px` inside a
       `overflow-x: auto` wrapper (style.css:6715-6726), so on a 390px screen
       the customer had to swipe sideways to see the prices - on the one page
       whose whole job is showing them the money. The account tables have the
       same six columns and no overflow wrapper at all, so they pushed the
       whole page sideways instead.

       Rather than shrink six columns into 65px each, each row becomes a card:
       photo and name across the top, then the figures as label-and-value
       lines. The heading comes from `data-label` on the cell, which is why the
       header row can be hidden without losing what anything means.

       Opt-in through `.cart-table--stack`, so the two-column key/value table
       on the enquiry detail page - which already fits - is left alone. Nothing
       here exists above 767px.
       ---------------------------------------------------------------------- */

    /* the wrapper's job was to scroll; there is nothing left to scroll */
    .cart-table-box .table-outer {
        overflow-x: visible;
        border: 0;
        border-radius: 0;
    }

    .cart-table-box .cart-info {
        padding-bottom: 16px;
    }

    /* `.cart-table.cart-table--stack`, not `.cart-table--stack` on its own.
       The template's width lives on `.cart-table-box .cart-table`, which scores
       (0,2,0); a single class scores (0,1,0) and loses, so the table stayed
       1024px wide, the cards with it, and every figure sat off the right edge
       of the screen while only the labels showed. Two classes plus the box
       takes it to (0,3,0), which wins outright rather than by load order. */
    .cart-table-box .cart-table.cart-table--stack,
    .cart-table-box .cart-table.cart-table--stack tbody,
    .cart-table.cart-table--stack,
    .cart-table.cart-table--stack tbody {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* the labels live on the cells now */
    .cart-table-box .cart-table.cart-table--stack thead,
    .cart-table.cart-table--stack thead {
        display: none;
    }

    .cart-table-box .cart-table--stack tbody tr,
    .cart-table--stack tbody tr {
        position: relative;
        display: block;
        border: 1px solid #dae5ec;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .cart-table--stack tbody tr:last-child {
        margin-bottom: 0;
    }

    /* label left, value right, on one line each */
    .cart-table-box .cart-table--stack tbody tr td,
    .account-table.cart-table--stack tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        min-width: 0;
        padding: 7px 0;
        border: 0;
        text-align: right;
    }

    .cart-table--stack tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #151515;
        font-family: var(--thm-font-2);
        font-size: 13px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
    }

    /* The product cell is the card's heading: full width, no label, and a rule
       under it separating the name from the figures. */
    .cart-table-box .cart-table--stack tbody tr td.prod-column,
    .account-table.cart-table--stack tbody tr td.prod-column {
        display: block;
        padding: 0 0 12px;
        margin-bottom: 6px;
        border-bottom: 1px solid #eef2f6;
        text-align: left;
    }

    /* the thumbnail and title are `display: table-cell` in the template */
    .cart-table-box .cart-table--stack tbody tr .prod-column .column-box {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 0;
    }

    .cart-table-box .cart-table--stack tbody tr .prod-column .column-box .prod-thumb,
    .cart-table-box .cart-table--stack tbody tr .prod-column .column-box .title {
        display: block;
        padding-left: 0;
    }

    /* A flex item will not shrink below its content unless told it may, so
       without this a long product name pushes the card wider than the screen
       instead of wrapping onto a second line - which is how "2 Pack (24
       Bottles)" ended up cut off at the edge. */
    .cart-table-box .cart-table--stack tbody tr .prod-column .column-box .title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cart-table-box .cart-table--stack tbody tr .prod-column .column-box .prod-thumb {
        flex: 0 0 64px;
        width: 64px;
    }

    .cart-table-box .cart-table--stack tbody tr .prod-column .column-box .prod-thumb img {
        width: 100%;
        border: 1px solid #dae5ec;
        border-radius: 10px;
    }

    .cart-table-box .cart-table--stack tbody tr .prod-column .column-box .title h3 {
        font-size: 16px;
        line-height: 22px;
        /* the remove button sits in that corner */
        padding-right: 28px;
        /* wrap rather than overflow, even for a name with no spaces in it */
        overflow-wrap: anywhere;
    }

    /* Remove, in the corner of the card rather than as a labelled row of its
       own - it is an action, not a figure. */
    .cart-table-box .cart-table--stack tbody tr td.remove-column {
        position: absolute;
        top: 12px;
        right: 12px;
        display: block;
        width: auto;
        padding: 0;
    }

    /* the quantity box and its Update button, right-aligned with the figures */
    .cart-table--stack .cart-qty-form {
        justify-content: flex-end;
    }

    /* Subtotal / Delivery / Total under an item list: one line each, not a
       card each. These carry the label in a `th`, so there is no data-label. */
    .cart-table-box .cart-table--stack tbody tr.summary-row,
    .account-table.cart-table--stack tbody tr.summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        border-top: 1px solid #dae5ec;
        border-radius: 0;
        padding: 12px 4px 0;
        margin: 0;
    }

    .cart-table--stack tbody tr.summary-row + tr.summary-row {
        padding-top: 10px;
    }

    .cart-table-box .cart-table--stack tbody tr.summary-row th,
    .account-table.cart-table--stack tbody tr.summary-row th,
    .cart-table-box .cart-table--stack tbody tr.summary-row td,
    .account-table.cart-table--stack tbody tr.summary-row td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .cart-table--stack tbody tr.summary-row th {
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Email verification screen.

   Built on the template's `.login-form-box`, so it matches the sign-in page it
   follows. Only the code input and the resend control need anything of their
   own.
   -------------------------------------------------------------------------- */

.verify-intro {
    color: var(--thm-gray);
    line-height: 26px;
    margin-bottom: 24px;
}

/* Four digits, spaced and centred so they are easy to check against the email
   before submitting. */
.verify-code {
    text-align: center;
    font-size: 28px;
    letter-spacing: 14px;
    font-weight: 700;
    padding-left: 14px;   /* offsets the trailing letter-space, so it looks centred */
}

/* The code and the Verify button, side by side and level.

   Two things had to be fixed for them to sit on one line:

   `box-sizing`. This project is content-box, and the template's input carries
   `width: 100%` with 25px of padding each side and a 1px border - so the field
   alone was 100% + 52px, which is wider than the row it was in. The button was
   pushed past the edge of the card. Border-box here and only here: the input's
   100% now means 100%, and nothing else on the site changes.

   `align-items: center`. Stretch made the button take the field's full outer
   height, and `.btn-one` centres its label on its own 55px line-height rather
   than on the box it has been stretched into - so the word Verify sat low.
   Centring the two boxes on each other is what actually lines them up.

   The input takes the slack and the button takes only what it needs, so the
   field shrinks to fit the button rather than the button being pushed out. */
.verify-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.verify-row .verify-code {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;   /* or a flex item refuses to shrink below its content */
    margin: 0;
}

/* Narrower than the template's 45px each side, which is sized for a button
   standing alone at the foot of a form. Beside a field it only has to fit the
   word. */
.verify-row .btn-one {
    flex: 0 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* On a narrow phone the two do not fit: 4 spaced digits plus a button is wider
   than the screen, and squeezing them makes the code unreadable, which is the
   one thing this field exists to be. */
@media (max-width: 420px) {
    .verify-row {
        display: block;
    }

    .verify-row .btn-one {
        width: 100%;
        margin-top: 12px;
    }
}

/* The label, with the resend wait pushed to the other end of the same line.

   It was on its own line under the button, where it read as a fourth thing to
   deal with rather than as a note about the field it belongs to. */
.verify-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.verify-wait {
    color: var(--thm-gray);
    font-size: 13px;
    white-space: nowrap;
}

/* The three blocks under the field sat 24px and 20px apart, which on a card
   this short left the eye travelling between four islands. Closed up so they
   read as one group. */
.verify-resend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    margin-top: 14px;
}

/* A link that cannot be followed should not invite the pointer. */
.verify-resend_link:disabled {
    color: var(--thm-gray);
    text-decoration: none;
    cursor: default;
}

.verify-resend p {
    color: var(--thm-gray);
    margin: 0;
}

/* A submit button that reads as a link: resending is a POST, so it cannot be
   an anchor, but it is a secondary action and should not look like a button. */
.verify-resend_link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--thm-base);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.verify-note {
    color: var(--thm-gray);
    font-size: 14px;
    line-height: 22px;
    margin-top: 8px;
    margin-bottom: 0;
}

.verify-note form {
    display: inline;
}

/* --------------------------------------------------------------------------
   Product ratings.

   Two controls, one idea. On the catalogue the stars are a score being read;
   on the order page they are a score being given. Both are drawn with the
   template's own `.review-box` colours (style.css:1202) - `--thm-primary` at
   16px - so nothing here is a new look, only a new place to put it.

   `.rate-box` was not available: the template already uses that name for the
   price on a product card (style.css:1956).
   -------------------------------------------------------------------------- */

/* The average, under the product name. Centred with the name above it, and
   sitting between the name and the Add to Cart button, so a card without
   ratings closes that gap rather than leaving a hole where they would be. */
.product-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -6px 0 14px;
}

.product-rating .review-box ul li i {
    font-size: 14px;
}

.product-rating_count {
    color: var(--thm-gray);
    font-size: 13px;
    line-height: 1;
}

/* Giving one, on the order page. Five real submit buttons, reset to look like
   the row of icons above - the browser's own button chrome is the only reason
   they would not already. */
.item-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
}

.item-rating_label {
    color: var(--thm-gray);
    font-size: 13px;
    line-height: 1;
}

.item-rating_stars {
    display: inline-flex;
    gap: 3px;
}

.item-rating_star {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    color: var(--thm-primary);
    font-size: 15px;
    cursor: pointer;
    transition: color 200ms linear;
}

/* Hover and keyboard focus both light it up: the stars are buttons, so tabbing
   to one has to show which one is about to be pressed. `.is-preview` is added
   by nepter.js to every star up to the one under the pointer - without it only
   the star actually hovered would change, which reads as picking one star
   rather than as scoring out of five. */
.item-rating_star:hover,
.item-rating_star:focus-visible,
.item-rating_star.is-preview {
    color: var(--thm-base);
}

/* In flight. The stars are disabled for the moment the request takes so a
   second click cannot post over the first, and they keep their colour through
   it - greying them out for 200ms reads as the control breaking rather than as
   it working. Only the cursor says it is not accepting anything right now. */
.item-rating_star:disabled {
    cursor: default;
    opacity: 1;
}

/* On a phone the order table stacks, and the name cell is already the widest
   thing on the row. Dropping the label keeps the stars on the same line as the
   item rather than pushing the row taller for two words. */
@media only screen and (max-width: 575px) {

    .item-rating_label {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Password strength meter.

   Sits under the password field on the register form and the profile screen.
   Three states, and the colours are the ones the site already uses to mean
   these things: the out-of-zone amber for "not there yet", the success green
   for "this will be accepted".
   -------------------------------------------------------------------------- */
/* The bar is drawn inside the field, not under it.

   Anchored to the field's bottom edge (`.pw-meter` starts there, so `bottom:
   100%` is that edge) and lifted 9px into it - the same 9px the theme puts
   between a label and its field. Inset by the field's own 25px side padding, so
   it starts where the typed text starts and stays clear of the pill's curve.

   No margins of its own: `.input-field` already carries the 17px to the next
   field, and a second margin here would double it the moment the bar appeared. */
.pw-meter {
    position: relative;
    margin: 0;
}

.pw-meter_track {
    position: absolute;
    bottom: 100%;
    left: 25px;
    right: 25px;
    margin-bottom: 9px;
    height: 4px;
    background: #e9edf2;
    border-radius: 2px;
    overflow: hidden;
}

/* Width is set by the script; the transition is what makes it read as a meter
   filling rather than as a value jumping. */
.pw-meter_fill {
    width: 0;
    height: 100%;
    background: #d64545;
    border-radius: 2px;
    transition: width 200ms linear, background-color 200ms linear;
}

.pw-meter.is-good .pw-meter_fill {
    background: #e0a800;
}

.pw-meter.is-strong .pw-meter_fill {
    background: #2f9e63;
}

.pw-meter_label {
    margin: 9px 0 0;
    color: var(--thm-gray);
    font-size: 13px;
    line-height: 18px;
}

/* Only the failing state is coloured. Once it is accepted the sentence is
   reassurance rather than an instruction, and it does not need to shout. */
.pw-meter.is-weak .pw-meter_label {
    color: #d64545;
}

/* --------------------------------------------------------------------------
   The card form.

   Stripe draws the fields themselves inside an iframe, so almost nothing here
   is about the inputs - it is the frame around them. What Stripe renders picks
   up its own defaults; the only thing worth matching is the space it sits in.
   -------------------------------------------------------------------------- */
.payment-box_title h4 {
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 4px;
}

.payment-box_title p {
    color: var(--thm-gray);
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 20px;
}

/* Stripe's iframe reports its own height and grows as methods are added, so
   this only reserves somewhere sensible for it to appear. */
#payment-element {
    min-height: 40px;
}

/* Declines and validation, under the fields where the customer is looking. */
.payment-box_error {
    margin: 14px 0 0;
    color: #d64545;
    font-size: 14px;
    line-height: 22px;
}

/* The card fields inside the Order Summary.

   The summary is a tinted card on a narrow column, and Stripe's iframe arrives
   with a white background of its own - without a little room around it, it butts
   straight into the confirm tick above and the note below. */
.order-summary-box #payment-card {
    margin: 18px 0 16px;
}

.order-summary-box .payment-box_error {
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   The card box.

   Built on `.confirm-popup`, which is itself the template's `search-popup`
   layer - so almost everything is inherited and only the differences are here.
   A card form needs more width than a yes/no question, and its buttons are the
   full width of the box rather than a pair sitting side by side.
   -------------------------------------------------------------------------- */
.payment-popup_box {
    max-width: 460px;
    text-align: left;
}

/* The question dialog centres its heading and text; a form should not be read
   from the middle. */
.payment-popup_box h3,
.payment-popup_box .confirm-popup_text {
    text-align: left;
}

.payment-popup_box .confirm-popup_text {
    margin-bottom: 22px;
}

/* Stripe's iframe reports its own height and grows as it adds methods or shows
   a validation message, so this only reserves somewhere for it to appear. */
.payment-popup_box #payment-element {
    min-height: 42px;
    margin-bottom: 4px;
}

.payment-popup_box .confirm-popup_actions {
    margin-top: 24px;
}

/* The page behind must not scroll while the box is open - on a phone the box
   otherwise slides away under a thumb aiming for the card field. */
body.payment-open {
    overflow: hidden;
}

@media only screen and (max-width: 575px) {

    .payment-popup_box {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   A field the form is unhappy about.

   Marked rather than described: a toast can say "fill in the required fields",
   but on a checkout with eleven of them that is barely better than silence.
   The label and the box itself turn red, so the eye lands on the one that
   needs answering.

   Applies to both form idioms the site uses - `.input-field` on the checkout
   and account screens, `.input-box` on the template's own contact forms.
   -------------------------------------------------------------------------- */
.input-field.has-error .field-label,
.input-box.has-error label {
    color: #d64545;
}

.input-field.has-error input,
.input-field.has-error select,
.input-field.has-error textarea,
.input-box.has-error input,
.input-box.has-error select,
.input-box.has-error textarea {
    border-color: #d64545;
}

/* niceSelect replaces a select with its own markup, so the border has to be
   put on the thing actually drawn rather than on the hidden original. */
.input-field.has-error .nice-select,
.input-box.has-error .nice-select {
    border-color: #d64545;
}

/* The confirm tick, when it has not been ticked. Its own wrapper, because it is
   a `.checked-box2` rather than the `.input-field` every other field uses. */
.checked-box2.has-error label {
    color: #d64545;
}

.checked-box2.has-error label span {
    border-color: #d64545;
}

/* A submit button waiting on the form.

   The checkout and subscribe buttons are shut until every required field is
   answered, so they need to look shut. Faded and un-clickable rather than
   hidden: a button that vanishes leaves nothing to aim at and no clue that
   pressing it is the next step once the form is done. */
.btn-one:disabled,
.btn-one[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The template animates a filling circle on hover. On a button that cannot be
   pressed, that reads as an invitation. */
.btn-one:disabled:hover .round,
.btn-one[disabled]:hover .round {
    display: none;
}

/* -----------------------------------------------------------------------------
   Legal pages

   The wording comes from the admin panel as Markdown, so this block gets
   headings, lists and paragraphs that no template page produced before -
   `.text` only ever had to style a paragraph. Spacing only: the colours, sizes
   and family all come from the template, so a policy reads like the rest of the
   site rather than like a document dropped into it.
   -------------------------------------------------------------------------- */
.legal-copy h1,
.legal-copy h2,
.legal-copy h3 {
    color: var(--thm-black);
    margin: 34px 0 14px;
    line-height: 1.3;
}

.legal-copy h1 { font-size: 30px; }
.legal-copy h2 { font-size: 24px; }
.legal-copy h3 { font-size: 19px; }

/* h4 as well, because the editor's heading menu offers it. `style.css:65` gives
   h4 the site's colour, weight and family but no size, so without this a fourth
   level renders at the browser default - the same size as the paragraph under
   it. Between the 19px h3 and the body text, the same way the blog body does
   it (`.blog-details-content h4` above). */
.legal-copy h4 {
    color: var(--thm-black);
    font-size: 17px;
    margin: 34px 0 14px;
    line-height: 1.3;
}

/* The first heading sits directly under the page title, which already has its
   own space above it. */
.legal-copy > :first-child {
    margin-top: 0;
}

.legal-copy p,
.legal-copy ul,
.legal-copy ol {
    margin-bottom: 16px;
}

/* The indent was here already; the markers were not, and without them the
   editor's bullet and numbered-list buttons produce a list that reads as plain
   paragraphs. `li` is what carries `list-style: none` in the global reset at
   style.css:140 - `ol` itself was never reset - so `inherit` on the item takes
   the marker from whichever list it is in. */
.legal-copy ul,
.legal-copy ol {
    padding-left: 22px;
}

.legal-copy ul { list-style: disc; }
.legal-copy ol { list-style: decimal; }

.legal-copy li {
    list-style: inherit;
    margin-bottom: 8px;
}

.legal-copy a {
    color: var(--thm-base);
    text-decoration: underline;
}

/* The date a policy last changed is the first thing anybody looks for, and the
   last thing they should read. */
.legal-copy_updated {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid #e8e8e8;
    font-size: 15px;
    color: var(--thm-gray);
}

/* -----------------------------------------------------------------------------
   Where the refund has got to

   Cancel uses the template's own `.btn-one`, the same as Order Again and View
   Invoice beside it. It had a quiet outlined variant to mark it out as the
   destructive one, which left it the only button on the row with grey text on
   no background - different for the sake of it, and the odd one out. The
   confirmation dialog is what guards the action; the button does not need to.
   -------------------------------------------------------------------------- */

/* The refund's own line, under the status. Bordered on one side rather than
   boxed: it is a remark about the order above it, not a panel of its own. */
.order-refund-note {
    margin: -6px 0 22px;
    padding: 12px 16px;
    border-left: 3px solid #dcdcdc;
    background-color: #fafafa;
    color: var(--thm-gray);
    font-size: 15px;
    line-height: 26px;
}

.order-refund-note--waiting { border-left-color: #e0a800; }
.order-refund-note--done    { border-left-color: #1e9e5a; }
.order-refund-note--declined{ border-left-color: #d64550; }

/* -----------------------------------------------------------------------------
   My Subscriptions: one card at a time

   The deck holds every subscription and shows one. Nothing here hides anything
   until the script adds `is-ready`, so with JavaScript off the page is what it
   always was - every card stacked, all of it reachable.
   -------------------------------------------------------------------------- */
.subscription-deck {
    position: relative;
}

.subscription-deck.is-ready .js-deck-card {
    display: none;
}

.subscription-deck.is-ready .js-deck-card.is-current {
    display: block;
}

/* Counter and arrows, above the card. There was a second pair on the card's
   left and right edges as well; it was removed as clutter, and this is now the
   only way through the deck. */
.subscription-deck_bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
}

.subscription-deck.is-ready .subscription-deck_bar {
    display: flex;
}

.subscription-deck_count {
    color: var(--thm-gray);
    font-size: 15px;
    min-width: 74px;
    text-align: center;
}

.subscription-deck_step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    background-color: #fff;
    color: var(--thm-black);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 300ms ease;
}

.subscription-deck_step:hover {
    border-color: var(--thm-base);
    background-color: var(--thm-base);
    color: #fff;
}


/* -----------------------------------------------------------------------------
   Profile picture, beside the email field

   Sits inside the template's `.input-field`, so it lines up with the inputs
   either side of it without any of them being touched. The file input itself is
   hidden and driven by its label: a browser's own grey "Choose File" control is
   the one thing on this card that would not look like the rest of the site.
   -------------------------------------------------------------------------- */
.avatar-field {
    display: flex;
    align-items: center;
    gap: 18px;
}

.avatar-field_preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--thm-base);
    color: #fff;
}

.avatar-field_preview img {
    width: 100%;
    height: 100%;
    /* Fills the circle whatever shape was uploaded, rather than squashing a
       portrait into a square. */
    object-fit: cover;
}

.avatar-field_initial {
    font-size: 21px;
    line-height: 1;
    font-weight: 600;
}

.avatar-field_controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
}

/* Hidden, not removed: the label drives it, and it still has to be in the form
   to be submitted. */
.avatar-field_input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.avatar-field_choose {
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    background-color: #fff;
    color: var(--thm-black);
    font-size: 14px;
    cursor: pointer;
    transition: all 300ms ease;
}

.avatar-field_choose:hover {
    border-color: var(--thm-base);
    background-color: var(--thm-base);
    color: #fff;
}

/* Keyboard users get the ring the hidden input cannot show for itself. The
   input sits before the label in the markup so `+` can reach it. */
.avatar-field_input:focus-visible + .avatar-field_choose {
    outline: 2px solid var(--thm-base);
    outline-offset: 2px;
}

.avatar-field_remove {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--thm-gray);
    font-size: 14px;
    cursor: pointer;
}

/* The template hides checkboxes globally in some blocks; this one has to show. */
.avatar-field_remove input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0;
}

.avatar-field_error {
    margin: 10px 0 0;
    color: #d64550;
    font-size: 14px;
}


/* -----------------------------------------------------------------------------
   The customer's picture in the header

   Stands where the person icon did, in the account button and in the phone
   header. Sized to sit inside the 42px pill without changing its height, so the
   header row is exactly as tall as it was.
   -------------------------------------------------------------------------- */
.nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--thm-base);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
}

.nav-avatar img {
    width: 100%;
    height: 100%;
    /* Fills the circle whatever shape was uploaded, rather than distorting it. */
    object-fit: cover;
}

/* The pill inverts on hover - white text on the brand colour - so a brand
   coloured circle inside it would disappear. The initial's disc flips with it;
   a photograph is left alone, since it is not the theme's to recolour. */
.header-account-box_toggle:hover .nav-avatar,
.header-account-box_toggle:focus-visible .nav-avatar {
    background-color: #fff;
    color: var(--thm-base);
}

/* The phone header's button is a plain circle with no pill around it, so the
   picture can fill more of it. */
.header-mobile-actions_btn .nav-avatar {
    width: 30px;
    height: 30px;
}

/* -----------------------------------------------------------------------------
   The confirmation dialog on something that cannot be undone

   Ordinarily the confirm button is the loud one and Cancel is quiet, which is
   right for "Order Again" - nothing is lost by pressing it. It is backwards for
   cancelling an order: the eye lands on the destructive choice and the way out
   is the faint one.

   Under `--danger` the two swap. Scoped to that modifier, which the script adds
   from `data-confirm-tone`, so only the dialogs that ask something irreversible
   are affected.
   -------------------------------------------------------------------------- */

/* Side by side, always.

   The template's buttons carry 45px of padding each side and nothing here
   sets `box-sizing: border-box`, so a min-width is content width and the real
   button is 90px wider than it. Two of them did not fit the 400px inside this
   box and wrapped, putting Cancel under Cancel Order.

   So the padding comes in and the minimum comes down. `nowrap` is the belt to
   that braces - a label nobody has written yet should shrink the pair rather
   than stack them. */
.confirm-popup_actions {
    flex-wrap: nowrap;
}

/* Cancel and Cancel Order both land on the minimum, so they match. A longer
   confirm - "Request Cancellation" - grows past it rather than being
   squeezed, and still shares the row. */
.confirm-popup_actions .btn-one {
    min-width: 130px;
    padding-left: 20px;
    padding-right: 20px;
}

/* The confirm takes the quiet treatment: same rules as `.btn-one--quiet`, which
   the markup puts on the other button. */
.confirm-popup--danger .js-confirm-yes:after {
    background-color: #eef2f6;
}

.confirm-popup--danger .js-confirm-yes {
    text-shadow: none;
}

.confirm-popup--danger .js-confirm-yes .txt {
    color: var(--thm-gray);
}

.confirm-popup--danger .js-confirm-yes:hover:after {
    background-color: #e2e8ef;
}

/* ...and the dismiss becomes the filled one, undoing the `--quiet` the markup
   gives it. `--danger` is the more specific selector, so these win. */
.confirm-popup--danger .js-confirm-no.btn-one--quiet:after {
    background-color: var(--thm-base);
}

.confirm-popup--danger .js-confirm-no.btn-one--quiet .txt {
    color: #fff;
}

.confirm-popup--danger .js-confirm-no.btn-one--quiet:hover:after {
    background-color: var(--thm-black);
}


/* --------------------------------------------------------------------------
   TikTok icon.

   Font Awesome 4.5 is what this template ships and it predates TikTok, so
   there is no `fa-tiktok` glyph to use. The mark goes in as inline SVG in
   partials/social-links.blade.php instead of upgrading Font Awesome, which
   would change the class syntax of every icon on the site.

   1em and `currentColor` mean this needs no per-context rule: it takes the
   font-size, colour and :hover of whichever social list it sits in - white at
   20px in the mobile drawer, #909090 at 16px in the blog author box.

   -0.125em is Font Awesome's own baseline offset, so the SVG sits on the same
   line as the `fa` icons beside it rather than a pixel high.
   -------------------------------------------------------------------------- */
.social-icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}


/* --------------------------------------------------------------------------
   Blog tags: pills that are labels, not links.

   Both tag lists were anchors pointing at `#` - the article's Tags row and the
   sidebar Tag Cloud. There is no tag archive and no route for one, so they are
   <span> now. The template styles both by TAG (`blog-section.css:550` and
   `style.css:5390`), so the markup change alone would have dropped the pill
   entirely and left bare text.

   Restated here, declaration for declaration. The `:hover` pair is deliberately
   NOT carried over: a pill that turns blue under the cursor is a pill that asks
   to be clicked, and these do nothing.
   -------------------------------------------------------------------------- */
.tag-box .tag-list li span {
    position: relative;
    display: inline-block;
    padding: 4px 15px 8px;
    color: #98a1a7;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #dae5ec;
    border-radius: 30px;
}

.single-sidebar-box .popular-tag li span {
    position: relative;
    display: block;
    padding: 7px 15px 6px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 27px;
    color: #98a1a7;
    font-size: 15px;
    line-height: 25px;
    font-weight: 500;
    font-family: var(--thm-font-2);
}