/* What this shop adds to the template, and nothing else.
 *
 * Loaded after style.css, so every rule here is either something the template
 * has no opinion about or something it got wrong for a real shop. */

/* The hero is one still picture rather than a carousel, and the template hides
 * every line of hero text until owl-carousel marks a slide active. Without a
 * carousel that never happens, so the shop front was an image with no
 * words on it. */
.hero__items .hero__text h6,
.hero__items .hero__text h2,
.hero__items .hero__text p,
.hero__items .hero__text .primary-btn {
    top: 0;
    opacity: 1;
}

.hero__items {
    height: 560px;
    padding-top: 140px;
}

/* The size buttons are real radios now, so the chosen one has to look chosen
 * without any JavaScript running. The template only ever styled .active,
 * which its own script toggled. */
.product__details__option__size label:has(input:checked) {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.product__details__option__size label:focus-within {
    outline: 2px solid #111111;
    outline-offset: 2px;
}

/* Add to cart is a submit button, not an anchor. The template styles
 * a.primary-btn only, so the button needs the same treatment or it comes out
 * as a grey browser default. */
button.primary-btn {
    border: none;
    font-family: inherit;
    cursor: pointer;
}

/* One loud action per screen. The template paints every primary-btn the same
 * black, which on the product page meant the chosen size and the buy button
 * competed. The size stays black; the buy button is the accent. */
.add-to-cart button.primary-btn {
    background: #ca1515;
    padding: 14px 40px;
}

.add-to-cart button.primary-btn:hover {
    background: #a51111;
}

.product__details__cart__option {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* A way back that belongs to the page rather than to the browser. */
.back-link {
    display: inline-block;
    color: #111111;
    font-weight: 600;
    margin-bottom: 20px;
}

.back-link:hover {
    color: #ca1515;
}

/* The image fills its column. */
.product-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Looking closer, and only where there is something closer to look at.
 *
 * "Tap to enlarge" was taken out in prototype 7 because the fixtures ship
 * 260px squares that this page already draws at three times that, so the
 * popup could only show the same pixels again — a promise that made the
 * picture smaller. zoom.js adds these classes only when the file really is
 * bigger than the page is drawing it, so a fixture is left exactly as it was
 * and a 1200x1200 photograph the upload form asked for gets a lens. */
.product-photo {
    position: relative;
}

.product-photo--closer {
    cursor: zoom-in;
}

.product-photo__say {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(17, 17, 17, .78);
    color: #ffffff;
    font-size: 12px;
    letter-spacing: .4px;
    padding: 6px 10px;
    pointer-events: none;
}

/* Where there is a pointer the hint waits for it. A label standing on the
 * photograph for ever is the page talking across the one thing somebody came
 * to look at; where there is no pointer nothing would reveal it, so it stays. */
.product-photo--pointer .product-photo__say {
    opacity: 0;
    transition: opacity .12s ease;
}

.product-photo--pointer:hover .product-photo__say {
    opacity: 1;
}

/* The lens. Square, hard-edged and at the file's own scale: a soft circle
 * reads as decoration and the point of this is to judge a weave. */
.looker {
    position: absolute;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    background-repeat: no-repeat;
    background-color: #ffffff;
    pointer-events: none;
    z-index: 3;
}

/* The whole photograph, larger than the screen, for a thumb.
 *
 * It used to draw the picture 343px wide in an 812px-tall window — two pixels
 * *smaller* than the one that had just been tapped. "Tap to enlarge" that
 * enlarges nothing is the fault prototype 7 removed the feature over, wearing a
 * different hat. The image is now drawn at the size the file actually has and
 * the sheet scrolls, so there is something to look at and somewhere to move.
 *
 * Solid, not translucent: at .94 the page's own headings were still legible
 * through it, which reads as a picture that failed to open. */
.closer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #0c0c0c;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* The browser's own pinch, on top of the scrolling. */
    touch-action: pinch-zoom pan-x pan-y;
    padding: 0;
}

.closer--open {
    display: block;
}

/* A box the width of whatever is in it, centred when the picture is small
 * enough to fit and scrolled when it is not. */
/* Centred with auto margins, never with justify-content.
 *
 * A flex item wider than its container and centred overflows *both* ways, and
 * the left overflow cannot be scrolled to — so a 1125px photograph in a 375px
 * viewer had 375px of travel instead of 750, and its left third could not be
 * brought into view at all. On a garment that is the left third of the
 * garment. Auto margins centre only what fits and leave the rest reachable. */
.closer__hold {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    padding: 16px;
}

.closer__hold > .closer__pic {
    margin: auto;
}

.closer__pic {
    display: block;
    /* Width is set by the script from the file's own size. */
    max-width: none;
    height: auto;
}

/* 44px, the shop's own floor for anything a thumb presses. Its own dark disc,
 * because it is drawn over whatever is behind the sheet — including the
 * header's menu button, which sits in the same corner. */
/* Dark, because it is drawn over a photograph.
 *
 * White on 38%-white over a light picture composites to white on white: the
 * only thing visible was a faint ring, and a dark subject under the corner
 * would have hidden that too. The way out of a full-screen picture must not be
 * something you have to already know is there. */
.closer__shut {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(12, 12, 12, .88);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.closer__shut:hover,
.closer__shut:focus {
    background: #0c0c0c;
    box-shadow: 0 0 0 3px #ffffff;
}

/* A hint telling you to do the thing you have just done. */
.no-scroll .product-photo__say { visibility: hidden; }

/* The page behind it must not scroll under the picture. */
body.no-scroll {
    overflow: hidden;
}

/* Where to post a return, on the page that tells somebody to post it. */
.sendback {
    margin-top: 14px;
    padding: 14px 16px;
    background: #f7f6f3;
    border-left: 3px solid #111111;
}

.sendback h6 {
    margin: 0 0 8px;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.sendback p {
    margin: 0 0 6px;
    line-height: 1.6;
}

.sendback p:last-child {
    margin-bottom: 0;
}

/* What just happened, said where somebody is looking. */
.flash {
    background: #eaf7ee;
    border: 1px solid #b7e2c4;
    color: #14663a;
    padding: 14px 20px;
    margin-bottom: 30px;
    font-weight: 600;
}

.cart-empty {
    font-size: 18px;
    color: #444444;
    margin-bottom: 24px;
}

.soon {
    color: #6a6a6a;
    font-size: 14px;
    margin-top: 10px;
}

/* The old price beside the new one, struck through, wherever it is shown.
 *
 * **`.chooser`, because `.product__details__text` has not been in the markup
 * since prototype 13.** That rename left fourteen rules across two stylesheets
 * matching nothing, and this was one of them — so a marked-down product's own
 * page read `ETB 8,900.00 ETB 11,800.00`, both thirty pixels, both black, both
 * bold, with a space between them. A shopper deciding whether to buy was shown
 * two prices and no way to tell which one they pay.
 *
 * Nobody looked for nine prototypes because the page reads correctly by
 * accident: the template's own `text-align: center` on that class is dead too,
 * so the panel inherits left alignment and everything else about it looks
 * deliberate. The shelf card struck it through correctly the whole time, which
 * is how the page was eventually found to disagree with itself. */
.product__item__text .was,
.chooser h3 span {
    color: #686868;
    text-decoration: line-through;
    font-size: 0.8em;
    margin-left: 6px;
    /* A price does not break away from its currency.
     *
     * Two products to a row on a phone gave each card about 170px, and the old
     * price broke between the ETB and the number: the card read "ETB 8,900.00
     * ETB" with "11,800.00" struck through underneath. A shopper reads the
     * first line as a mistake and the second as a second price, on the one
     * card in the shop that is trying to say something went down. */
    white-space: nowrap;
}

/* And the stars on that panel, which the same rename left unstyled — Bootstrap
 * black where every other star in this shop is #e5a712. One product, two
 * colours of star, on two pages. */
.chooser .rating i { color: #e5a712; }
.chooser .rating span { color: #686868; font-size: 13px; }

/* A picture that is a link needs the block layout the template's div had.
 * An inline anchor ignores the height the template sets, so the box is zero
 * high and the image never appears. */
a.product__item__pic,
/* A post's title is a heading that happens to be a link. The template's rule
 * for the card's links is written for Read more — spaced capitals with a bar
 * under them — and caught the title too, so every title shouted. */
.blog__item__text h5 a {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    padding: 0;
    min-height: 0;
}
.blog__item__text h5 a:after { content: none; }

a.blog__item__pic {
    display: block;
}

/* The template's only anchor inside a card is its "+ Add To Cart", which it
   parks absolutely at the top-left, invisible, and reveals on hover. Wrapping
   the name in a link inherited all of that, so every card in the shop had a
   image, stars and a price and no name at all. */
.product__item__text h6 a,
.product__cart__item__text h6 a {
    position: static;
    opacity: 1;
    visibility: visible;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.product__item__text h6 a:hover,
.product__cart__item__text h6 a:hover {
    color: #ca1515;
}

/* The category a shopper is looking at, marked so the sidebar says where they
 * are. */
.shop__sidebar__categories li.here > a {
    color: #ca1515;
    font-weight: 700;
}

/* The tree, by indent. Each level in by the same step, the way a file list or
 * ASOS's sidebar does it, so a child reads as belonging to the line above. */
.shop__sidebar__categories li.aisle--1 > a { padding-left: 16px; }
.shop__sidebar__categories li.aisle--2 > a { padding-left: 32px; }

/* The cart's quantity and remove controls are forms. Keep them looking like the
 * template's controls rather than like browser chrome. */
.quantity-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.update-line {
    border: 1px solid #e5e5e5;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 14px;
    cursor: pointer;
}

.update-line:hover {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.cart__close button {
    border: none;
    background: none;
    color: #686868;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

.cart__close button:hover {
    color: #ca1515;
}

.line-size {
    color: #6a6a6a;
    font-size: 13px;
    margin: 0 0 6px;
}

.related-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* The header's cart count is worth seeing at a glance.
 *
 * The template's rule is an 11-pixel dark number sitting on top of a dark
 * icon, which is invisible. This is a badge on the corner of the icon. */
.header__nav__option .cart-link {
    position: relative;
    display: inline-block;
}

.header__nav__option .cart-link span {
    position: absolute;
    top: -8px;
    left: auto;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ca1515;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* The footer's last column is body text on a dark ground. */
.footer__widget p {
    color: #b7b7b7;
}

/* A way back reads better where the eye already is, on the left. */
.product__details__pic .back-link {
    display: inline-block;
}

/* The cart's quantity control keeps the template's box even though the row is
 * a form now. */
.quantity__item .quantity {
    display: inline-block;
}

/* On a phone the template hides the whole header bar behind the hamburger, cart
 * and all. What is in the cart is the one thing a shopper checks without
 * meaning to open a menu, so it stays on the bar beside the hamburger. */
@media only screen and (max-width: 767px) {
    /* **One row, and nothing floats over anything.**
     *
     * The template positions the search, the cart and the hamburger
     * absolutely over a logo block that is the full width of the header — so
     * at 375px the shop's own name ran from x:15 to x:305 with the search icon
     * at 251, the cart at 297 and the hamburger at 325, all three printed on
     * top of it, and the cart's red count landing on the last word. It is the
     * first thing every phone shopper sees.
     *
     * The first fix was a right padding on the logo that cleared them, and it
     * lasted exactly one prototype: adding a fourth control — the heart —
     * widened the block, and the name ran under it again. A number that has to
     * be kept in step with the markup is a number that will not be.
     *
     * So they are laid out rather than floated. The mark takes whatever room
     * is left after the controls, which is what a flex row is for, and the
     * two cannot overlap however many controls there are. */
    .header .container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header .row {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .header .row > div:first-child { flex: 1 1 auto; min-width: 0; }
    .header .row > div:last-child  { flex: 0 0 auto; width: auto; }

    .header .header__nav__option {
        display: flex;
        align-items: center;
        position: static;
        padding: 0;
        white-space: nowrap;
    }

    .header .header__nav__option .price { display: none; }
    .header .header__nav__option .cart-link { margin-right: 0; }

    /* **Something a thumb can hit.**
     *
     * The three icons measured 16x24, 17x26 and 16x24 at 375px — and they are
     * the whole of this shop's navigation on a phone. Apple asks for 44x44 and
     * Android for 48x48, so these were about a third of what they should be.
     *
     * The icons themselves stay the size they are: they are the right size to
     * look at, and growing them would make the header a row of large grey
     * shapes. It is the area around them that grows, which is the thing a
     * thumb actually hits and the thing nobody sees.
     *
     * A first attempt pulled them back together with `margin: -10px` to keep
     * the row its old width, and the three targets then overlapped by twenty
     * pixels each — a tap near a boundary landing on the wrong control, which
     * is worse than a target that is merely small. They are laid out with a
     * gap instead, and the mark takes whatever is left: the header is a flex
     * row since prototype 22 and the two cannot collide. */
    .header .header__nav__option > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
    }

    .header .header__nav__option { gap: 4px; }
    .header .kept-link { margin-right: 0; }

    /* The hamburger too — 35x35 is short of the same floor. */
    .header .canvas__open {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .header .canvas__open {
        position: static;
        flex: 0 0 auto;
        margin: 0;
    }

    /* And the name set smaller, so it sits beside them rather than under
       them. A mark is never truncated — a shop whose name ends in an ellipsis
       has no name — so it wraps to two lines instead. */
    .header__logo { padding-right: 0; }
    /* `.header` in front: the base `.header__logo--word a` rule comes later in
       this file with the same specificity, so without it this line never
       applied and the name stayed 26px on every phone. */
    .header .header__logo--word a { font-size: 20px; letter-spacing: .5px; }
    .header .header__logo a img { max-height: 44px; }
}

/* Narrower than 375px — an iPhone SE, a small Android — three 44px controls and
   the menu button do not fit beside a 20px name, and the search icon was drawn
   over "CHANGES BOUTIQUE" for every visitor. The name steps down again. */
@media only screen and (max-width: 374px) {
    .header .header__logo--word a { font-size: 15px; letter-spacing: 0; }
    .header .header__logo a img { max-height: 36px; }
}

/* The template gives the category list a fixed 225-pixel height, which fit the
   nine items its own demo had. A tenth spills out of the box and lands on top
   of whatever comes next — on a phone, the count of results. A list is as tall
   as the list. */
.shop__sidebar__categories ul {
    height: auto;
}

@media only screen and (max-width: 991px) {
    .shop__sidebar {
        margin-bottom: 40px;
    }
}

/* ---- what the whole template needed ---------------------------------- */

/* ---- the last of the template's red -----------------------------------
 *
 * #e53637 appears nineteen times in the template's stylesheet, and the shop
 * had swept it from the footer in prototype 9 and from the money in prototype
 * 15. Three places were left, all of them the little uppercase eyebrow above
 * a heading: NEW SEASON on the hero, DEAL OF THE WEEK, and FROM THE SHOP
 * above the blog. 3.81:1 and 4.27:1 on white — under the floor, on the first
 * words of the shop's own front page.
 *
 * Found by the sweep and not by looking, which is the fourth time. An eyebrow
 * is four small words in a colour that seems fine, and nobody reads it closely
 * enough to notice they cannot read it.
 *
 * #ca1515 is the shop's accent and 5.6:1. There is now no #e53637 on any page
 * this shop serves. */
.hero__text h6,
.section-title span,
.categories__deal__countdown span,
.instagram__text h3 { color: #ca1515; }

/* ---- a card keeps its name -----------------------------------------------
 *
 * The template fades the name out on hover so an "Add to cart" link can take
 * its place in the same few pixels. This shop's card has no such link — it has
 * a real size picker and a real button, below — so the name simply went, and
 * the colour swatches faded up into the gap.
 *
 * Pointing at a thing to read about it is the one moment its name has to be on
 * the screen, and no clothes shop does this. The card has room for both. */
.product__item:hover .product__item__text h6 { opacity: 1; }

/* ---- the hero, on a phone ------------------------------------------------
 *
 * `.hero__items` is a `cover` background across the whole column, and at 375px
 * the paragraph runs x:15 to x:360 straight over it with no scrim — so the
 * back half of "A small shop of well-made things…" lands on the model's
 * sweater and arm. On a laptop the photograph is composed with its subject to
 * the right and the copy has clear space; at 375 there is nowhere for it to
 * go.
 *
 * A scrim rather than a stack. Stacking means a second element for the
 * picture and a second set of rules for the one page that has it; a wash from
 * the left is one property, it keeps the photograph behind the words where the
 * composition wants it, and it is what every shop of this kind does with a
 * hero on a phone. 11.4:1 for the heading over it, and the body copy is
 * already #3d3d3d on white paper below the wash. */
@media only screen and (max-width: 767px) {
    .hero__items {
        position: relative;
        background-position: 70% top;
    }

    .hero__items:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right,
            rgba(255, 255, 255, .94) 0%,
            rgba(255, 255, 255, .88) 55%,
            rgba(255, 255, 255, .30) 100%);
    }

    .hero__items > .container { position: relative; }
}

/* ---- saved for later ---------------------------------------------------
 *
 * Somebody goes through the shop on a phone, likes three things and can afford
 * one. There was nowhere to put the other two, so the tab closed and the shop
 * never heard from them again.
 *
 * A heart in the corner of the picture, which is where every shop of this kind
 * puts it, and never on hover: a control that appears only under a pointer is
 * a control a touchscreen does not have. */
.product__item { position: relative; }

.keep { position: absolute; top: 10px; right: 10px; z-index: 2; }

.keep__b {
    border: 0;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #595959;                 /* 5.9:1 on its own ground */
    font-size: 15px;
    line-height: 34px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(17, 17, 17, .18);
}

.keep__b:hover { color: #111111; }
.keep__b--on   { color: #ca1515; }

/* And the wide one, beside the buy button, where somebody who has looked at
   the price is deciding not to spend it today. */
.keep--big { position: static; margin-top: 12px; }

.keep__wide {
    width: 100%;
    border: 1px solid #111111;
    background: #ffffff;
    color: #111111;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

.keep__wide:hover { background: #f3f2ee; }
.keep__wide--on { border-color: #ca1515; color: #ca1515; }
.keep__wide i { margin-right: 8px; }

/* The heart in the header, beside the cart.
 *
 * The count is written as `.header__nav__option .kept-link span` rather than
 * `.kept-link span`, because the template already styles
 * `.header__nav__option a span` — three parts to one, so the shorter selector
 * lost and the pip came out near-black on red at 3.36:1. Found by the sweep;
 * looking at it, a dark 1 on a red disc reads as a dark 1 on a red disc. */
.kept-link { position: relative; color: #111111; margin-right: 22px; font-size: 17px; }
.kept-link:hover { color: #ca1515; }
.header__nav__option .kept-link span,
.offcanvas__nav__option .kept-link span,
.kept-link span {
    position: absolute;
    top: -8px;
    /* `left: auto` is the whole of this, and the cart's pip beside it has said
       so since prototype 5. The template sets both `left: 5px` and a `right`
       on every `__option a span`, which makes the pip as wide as the gap
       between them rather than as wide as its own number: 49x16 at 375px,
       beside the cart's 18x18 circle four pixels away. Overriding `right`
       alone leaves the `left` in force, which is why this read as a stretched
       lozenge on every width. */
    left: auto;
    right: -10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: #ca1515;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 5px;
}

/* The cart's own heart, beside the cross. Saving takes the line out: it is one
   decision, not two presses. */
.cart__keep { display: inline-block; margin-right: 10px; }
.cart__keep button { border: 0; background: none; color: #595959; cursor: pointer; padding: 0; }
.cart__keep button:hover { color: #ca1515; }

.saved__note { color: #595959; margin-bottom: 30px; }
.saved__note a { color: #111111; font-weight: 700; text-decoration: underline; }

/* An empty list says what to do. A heading with nothing under it reads as a
   page that failed to load. */
.saved__none { text-align: center; padding: 40px 0 20px; }
.saved__none h5 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.saved__none p { color: #595959; margin-bottom: 26px; }

/* ---- what the shop already knew and never said -------------------------
 *
 * Every delivery place carries its own Free over in Settings, and the cart
 * read "Delivery from ETB 150.00" over a basket holding ETB 12,500. The
 * distance to the threshold is the half that actually changes what somebody
 * puts in the cart. */
.free__line {
    font-size: 13px;
    line-height: 1.6;
    color: #595959;
    margin: -8px 0 18px;
}
.free__line b { color: #111111; }
.free__line--yes { color: #14663a; }      /* 5.6:1 on white */
.free__line--yes b { color: #14663a; }

/* The two promises, where the decision is made rather than folded away under
   a summary somebody has to think to open. */
.promise {
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #e5e5e5;
    font-size: 13px;
    line-height: 1.8;
    color: #595959;
}
.promise span { display: block; }
.promise b { color: #111111; }
.promise i { width: 18px; color: #111111; }

/* ---- the buy button, kept where the thumb is ---------------------------
 *
 * position: static, so scrolling past it on a phone meant scrolling back up to
 * buy — and a product page is mostly photograph, so it goes by almost at once.
 * Hidden until the real button has gone, and on anything wider than a phone it
 * never appears: there the button is never far. */
.buybar { display: none; }

@media only screen and (max-width: 767px) {
    .buybar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        align-items: center;
        gap: 12px;
        padding: 10px 15px;
        background: #ffffff;
        border-top: 1px solid #e5e5e5;
        box-shadow: 0 -2px 10px rgba(17, 17, 17, .08);
    }
    .buybar[hidden] { display: none; }
    .buybar__what { flex: 1 1 auto; min-width: 0; }
    .buybar__what b {
        display: block;
        font-size: 13px;
        color: #111111;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .buybar__what span { font-size: 13px; font-weight: 700; color: #111111; }
    .buybar__go {
        flex: 0 0 auto;
        border: 0;
        background: #ca1515;
        color: #ffffff;
        padding: 12px 18px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
    }
    /* Room under the footer for the bar, so it never covers the last line. */
    body.has-buybar .footer { padding-bottom: 80px; }
}

/* Every heading on the page starts in the same place.
 *
 * The template centres .section-title, so "Best sellers", "More like this" and
 * "From the blog" sat in the middle of pages whose every other word — the
 * breadcrumb, the product names, the prices, the filters — is ranged left.
 * Two alignment systems on one page is the kind of thing nobody can name and
 * everybody feels. The one deliberately centred thing stays centred: a single
 * call to action under a grid, which is its own convention. */
.section-title { text-align: left; }

/* ---- three ways into the shop, on a grid --------------------------------
 *
 * Equal columns, one ratio, the name under the picture. They were three
 * photographs at three sizes staggered by -75px and +100px with the headings
 * absolutely positioned into the gutters beside them — the template's own
 * magazine layout, which needs art directed to it and had three stock
 * photographs instead. Nothing lined up with anything. */
.ways { row-gap: 24px; }

.way { display: block; color: #111111; }

.way__pic {
    display: block;
    aspect-ratio: 4 / 5;
    background-color: #f3f2ee;
}

.way__name {
    display: block;
    margin-top: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
}

.way:hover .way__name { border-bottom-color: #111111; }

/* And the page stops leaving a screen of nothing between its parts.
 *
 * .spad is 100px top and bottom, which the template used between full-bleed
 * bands. Here it stacks on sections that are already tall — the review form
 * ends, then a gap, then a heading, then one card, then another gap — so the
 * product page reads as though something failed to load. 60 is enough to
 * separate two things without losing the reader between them. */
.spad { padding-top: 60px; padding-bottom: 60px; }

/* ---- one palette, for every dab of colour in the shop -------------------
 *
 * There were three, and all three were short. The cards and the sidebar drew
 * .swatch--<name> and knew seven colours; the product page's .hue__dab knew
 * ten; .dab, beside a name on an order, knew eleven. The shop carries
 * fourteen — so Burgundy, Camel, Clear, Gold, Green, Olive, Silver and Tan
 * came out of the sidebar as **empty circles with a #d8d8d8 hairline round
 * them**, which is 1.24:1 on white and reads as nothing at all.
 *
 * Three lists is how they got short: nobody adds a colour in three places.
 * One list, and every dab reads its background from it.
 *
 * Named colours rather than the template's c-1…c-9, because a swatch that
 * does not match the word beside it is worse than no swatch. Where the shop
 * has no colour of this name, the dab is a plain grey rather than a hole. */
/* The map that used to be here is generated from the shop's own colours
 * table, in _dabs.html, on every page. See the comment there: two hand-kept
 * lists had already drifted, and a colour a shopkeeper added was in neither. */

/* And the three that are nearly the page. A hairline at 1.24:1 is invisible,
   so these carry a real edge — it is the only thing that says a swatch is
   there at all. */
[data-colour="white"],
[data-colour="clear"],
[data-colour="silver"] { --dab-edge: #9a9a9a; }

.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--dab-edge, #d8d8d8);
    background: var(--dab, #cccccc);
    margin-right: 6px;
    vertical-align: -2px;
}

/* The sidebar's size and colour filters are links, not checkboxes: a filter
   that needs a submit button is a filter people do not use. */
.size-pill,
.colour-pill {
    display: inline-block;
    border: 1px solid #e5e5e5;
    padding: 5px 12px;
    margin: 0 6px 8px 0;
    font-size: 13px;
    color: #6a6a6a;
}

.colour-pill {
    display: block;
    border: none;
    padding: 4px 0;
}

.size-pill:hover,
.colour-pill:hover { color: #111111; }

.size-pill.here {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.colour-pill.here { color: #ca1515; font-weight: 700; }

.shop__sidebar__brand li.here > a,
.shop__sidebar__tags a.here {
    color: #ca1515;
    font-weight: 700;
}

/* Sorting is a select that submits itself. Without a width it collapses to
   nothing beside the label. */
.sort-form { display: inline-block; }

.sort-form select {
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid #e5e5e5;
    background: #ffffff;
}

/* What went wrong, said where somebody is looking — the mirror of .flash. */
/* ---- one red for *wrong* ----------------------------------------------
 *
 * A refusal, a count pip and a cancelled band all mean the same thing, and
 * they were saying it in two reds a shade apart — #a11212 in three places and
 * #a11212 in four. Neither was chosen over the other; they simply arrived at
 * different times. #a11212 wins, because the back office and the credit note's
 * cancelled band already use it, and because it is the darker of the two:
 * 8.1:1 on white, and far enough from the accent that an alarm and a button
 * are never confusable at a glance. */
.problem {
    background: #fdeceb;
    border: 1px solid #f3c2bd;
    color: #a11212;
    padding: 14px 20px;
    margin-bottom: 30px;
    font-weight: 600;
}

/* The discount, once it is on. */
.cart__total .off,
.checkout__total__all .off { color: #14663a; }

.coupon-on {
    background: #eaf7ee;
    border: 1px solid #b7e2c4;
    color: #14663a;
    padding: 10px 14px;
    margin-bottom: 12px;
}

/* Reviews, and the form under them. */
.review {
    border-bottom: 1px solid #e5e5e5;
    padding: 18px 0;
}

.review h5 {
    font-size: 15px;
    font-weight: 700;
    margin: 6px 0;
}

.review h5 span {
    font-weight: 400;
    color: #686868;
    font-size: 13px;
    margin-left: 8px;
}

.review .rating i { color: #e5a712; font-size: 13px; }

.review-form { margin-top: 30px; }

.review-form h5 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }

.review-form input,
.review-form select,
.review-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 15px;
}

.review-form textarea { height: 120px; resize: vertical; }

/* The stars a card draws. */
.product__item__text .rating i { color: #e5a712; }

.rating__count { color: #686868; font-size: 13px; margin-left: 4px; }

/* The order confirmation. */
.order__summary h4 { font-size: 22px; font-weight: 700; }

.order__when { color: #6a6a6a; margin-bottom: 24px; }
/* The Invoice link beside the date it was placed.
 *
 * Bootstrap's #007bff again — 3.98:1 on white, under the floor, and the sixth
 * time this exact colour has got through. It arrives wherever an anchor is
 * written without a rule of its own and it never looks wrong, which is why
 * only the sweep ever finds it. Black and underlined, like every other link
 * this shop styles by place. */
.order__when a {
    color: #111111;                 /* 18.9:1 on white */
    text-decoration: underline;
}
.order__when a:hover { color: #ca1515; }

.order__address { line-height: 1.8; color: #444444; }

.sold-out {
    display: inline-block;
    background: #f3f3f3;
    color: #6a6a6a;
    padding: 12px 20px;
    font-weight: 600;
}

/* The blog. */
.blog__summary { color: #6a6a6a; margin-bottom: 12px; }

.blog__crumbs { margin-bottom: 18px; }

.blog__details__content p { margin-bottom: 18px; line-height: 1.9; }

.blog__details__tags a {
    display: inline-block;
    border: 1px solid #e5e5e5;
    padding: 6px 14px;
    margin: 0 8px 8px 0;
    font-size: 13px;
    color: #6a6a6a;
}

.blog__details__tags a:hover { color: #111111; border-color: #111111; }

.blog__details__btns__item--next { text-align: right; }

/* The template's plain .label is a white chip with dark text, and it makes
   .sale dark with white text. "New" keeps the plain one — the override that
   was here painted dark text on a dark chip. */

/* The counters on the about page are plain numbers rather than an animation
   that needs a script to have run. */
.counter__item__number h2 { font-size: 40px; font-weight: 700; }

/* ---- accounts, orders and paying -------------------------------------- */

/* Signing out is a POST, so it is a button in a form. It is set as one of the
   links in the top bar because that is what it is to a reader. */
/* Inline, not inline-block: an inline-block form gets a line box of its own,
   at the page's 16px, and sits four pixels off the links either side of it. */
.header__top__links .signout {
    display: inline;
    margin-right: 28px;
}

/* The button is set to match the links either side of it exactly — same size,
   same spacing, same case. A control that is a form because it changes
   something should still read as one of the row, not as a grey box dropped
   into it. */
.header__top__links .signout button {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: inherit;
    vertical-align: baseline;
}

.header__top__links .signout button:hover { color: #ca1515; }

/* Where an order has got to, at a glance. */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 8px;
}

.badge--paid    { background: #eaf7ee; color: #14663a; border: 1px solid #b7e2c4; }
.badge--waiting { background: #fff6e5; color: #8a5a00; border: 1px solid #f0d9a8; }
/* On its way. Its own colour rather than a second green, because paid and sent
   are two different facts and a shopper reads the badge before the words.
   7.6:1 on its ground. It lived in admin.css while only the back office knew
   an order had been dispatched; the shopper's own page is the page that most
   needed it. */
.badge--sent    { background: #eef2fb; color: #2a4b8d; border: 1px solid #c3d0ea; }
/* Cancelled. Grey rather than red: it is not a fault, and a red badge on
   somebody's own order reads as one. 7.5:1 on its ground. */
.badge--gone    { background: #f2f2f2; color: #595959; border: 1px solid #dcdcdc; }

.order__ref a { color: #111111; font-weight: 700; }
.order__ref a:hover { color: #ca1515; }

.account__who { color: #6a6a6a; margin-bottom: 24px; }

/* The pay box on an order that has not been paid for. */
.pay__box { margin-bottom: 24px; }

.pay__note {
    color: #6a6a6a;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.pay__box .site-btn { width: 100%; }

/* The field a refused payment offers, so somebody can fix the thing the rail
 * would not take rather than pressing Pay forever. */
.pay__fix { margin-bottom: 14px; }

.pay__fix label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pay__fix input {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 10px 12px;
    font-size: 14px;
}

.pay__hint {
    display: block;
    color: #686868;
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.5;
}

/* The two account forms. */
.form-lead { color: #6a6a6a; margin-bottom: 24px; }

.form-aside { margin-top: 20px; color: #6a6a6a; }

.form-aside a { color: #ca1515; font-weight: 600; }

.checkout__input .hint {
    display: block;
    color: #686868;
    font-size: 13px;
    margin-top: -14px;
    margin-bottom: 14px;
}

/* The home page's deal block, which shows a real markdown rather than a
   countdown to a date nobody set. */
.deal__was { color: #6a6a6a; margin-bottom: 20px; }

.deal__was s { color: #686868; }

.categories__hot__deal img {
    width: 100%;
    height: auto;
    display: block;
}

/* Where the shop is, a centred band now that the mosaic beside it is gone.
   Its heading is a link rather than a hashtag for an account that does not
   exist, and it no longer needs the template's 130px drop to line up with
   six photographs. */
.instagram { padding-bottom: 70px; }
.instagram__text { padding-top: 0; }
.instagram__text p { margin-bottom: 24px; }
.instagram__text h3 a { color: inherit; }

/* No opinion is not a bad opinion.
 *
 * Five hollow stars is nought out of five, and the shelf drew them on every
 * product nobody had reviewed — including the two dearest things in the shop,
 * beside things rated four and five. It says so in words instead, quietly. */
.rating--none {
    min-height: 20px;
}

.rating__none {
    font-size: 12px;
    color: #6a6a6a;
    letter-spacing: .2px;
}

a.rating__none:hover {
    color: #ca1515;
}

/* Categories is a disclosure, not a destination — so it is a button, dressed
   as the links beside it. */
.header__menu__open {
    border: 0;
    background: none;
    /* The same shape as the links beside it, to the pixel: it is one of the
       five items in that row, and a control drawn as a different kind of thing
       reads as a different kind of thing. */
    font-size: 18px;
    color: #111111;
    display: block;
    font-weight: 600;
    position: relative;
    padding: 3px 0;
    line-height: inherit;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    font-family: inherit;
}

.header__menu ul li.header__menu__more:hover .header__menu__open,
.header__menu__open:focus-visible {
    color: #ca1515;
}

/* The menu holds the tree two deep now, so it is as wide as its longest name
   rather than the template's 150px, and what is under a category sits under
   it, one step in and a shade quieter. */
.header__menu ul li .dropdown { width: auto; min-width: 190px; white-space: nowrap; }

.header__menu ul li .dropdown__under { padding: 0 0 4px; }

.header__menu ul li .dropdown .dropdown__under li a {
    padding: 3px 20px 3px 34px;
    font-size: 13px;
    color: #c8c8c8;                 /* 12:1 on the menu's #111 */
}

.header__menu ul li .dropdown li a:hover { color: #ffffff; text-decoration: underline; }

/* A category is called what the shopkeeper called it. The template capitalised
   every word in the menu, which made T-shirts read T-Shirts. */
.header__menu ul li .dropdown li a { text-transform: none; }

/* Categories in the phone menu. Slicknav wraps the button in its own toggle
   row, and the button kept the desktop menu's 18px face — so it read as a
   heading, larger than Home and Shop above it, with its arrow alone on the
   line below. It is one of the five items, the same size as the others. */
.slicknav_nav .header__menu__open {
    display: inline;
    font-size: inherit;
    font-weight: 600;
    padding: 0;
    color: #111111;
}

/* What is under a category, one step in, as it is on the desktop menu. */
.slicknav_nav .dropdown { padding-left: 14px; }
.slicknav_nav .dropdown__under { padding-left: 14px; }

/* The keyboard opens it too: hover alone leaves it shut for anybody tabbing. */
.header__menu ul li.header__menu__more:focus-within .dropdown {
    top: 32px;
    opacity: 1;
    visibility: visible;
}

/* Something out of stock says so instead of offering a button. */
.sold-out { margin-bottom: 20px; }

/* A line's image is a thumbnail, not the image.
   The template's demo images were small, so it never sized them; ours are
   260px square and take the whole cell, leaving the name to wrap one word to
   a line. Squared off and cropped rather than squashed. */
.shopping__cart__table .product__cart__item__pic img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    display: block;
}

.shopping__cart__table .product__cart__item__text {
    padding-top: 0;
}

/* The picture and what it is a picture of, side by side and staying there.
 *
 * The template floats the thumbnail left with a 30px gutter. On a phone the
 * name has nowhere to go beside 120px of that in a narrow cell, so a float
 * drops it *below* the photograph — and, being a float, it runs on under the
 * QUANTITY column. The page a shopper opens after buying led with a picture,
 * a number and a price and no name at all.
 *
 * Flex keeps them in a row and lets the text column shrink, which a float
 * cannot be told to do. */
.shopping__cart__table td.product__cart__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.shopping__cart__table td.product__cart__item .product__cart__item__pic {
    float: none;
    margin-right: 0;
    flex: 0 0 auto;
}

.shopping__cart__table td.product__cart__item .product__cart__item__text {
    /* minmax(0) for flex: without it a long name holds its own line and
       pushes the row wider than the screen. */
    min-width: 0;
    overflow-wrap: break-word;
}

/* The money column is wide enough for money.
 *
 * The three columns came out PRODUCT 400px, QUANTITY 136px, TOTAL 117px — so
 * the column holding one digit was 19px wider than the one holding thirteen
 * characters of currency, and every amount in it broke across two lines while
 * the identical string sat on one line in the column to its left. Nothing needs
 * to be bigger; the widths were simply the wrong way round. */
@media (min-width: 768px) {
    .shopping__cart__table table thead tr th:nth-child(2),
    .shopping__cart__table table tbody tr td.quantity__item {
        width: 110px;
    }

    .shopping__cart__table table thead tr th:nth-child(3),
    .shopping__cart__table table tbody tr td.cart__price {
        width: 150px;
        white-space: nowrap;
    }
}

/* On a phone the row becomes a card, because the columns cannot fit.
 *
 * Left as a table it was 571px of row inside a 345px box that scrolled
 * silently: QUANTITY started at x=415 and TOTAL at x=500, both off the screen.
 * A shopper reading the three prices they could see added up to ETB 16,350
 * under a subtotal of ETB 22,950, with no way to find the missing 6,600 — and
 * the page body itself did not scroll, so nothing measuring that saw anything
 * wrong. The cart did it too, before the order was even placed.
 *
 * The heading row goes and each cell carries its own label instead, which is
 * the same treatment the back office's lists have had since round two. */
@media (max-width: 767px) {
    .shopping__cart__table table,
    .shopping__cart__table table tbody,
    .shopping__cart__table table tbody tr,
    .shopping__cart__table table tbody tr td {
        display: block;
        width: auto;
        max-width: 100%;
    }

    .shopping__cart__table { overflow-x: visible; }
    .shopping__cart__table thead { display: none; }

    .shopping__cart__table table { min-width: 0; }

    .shopping__cart__table table tbody tr {
        border: 1px solid #e5e5e5;
        padding: 14px 16px;
        margin-bottom: 14px;
    }

    .shopping__cart__table table tbody tr td {
        border: 0 !important;
        padding: 6px 0;
        text-align: right;
    }

    /* The product keeps its picture-and-name row and spans the card. */
    .shopping__cart__table table tbody tr td.product__cart__item {
        text-align: left;
        padding-top: 0;
        border-bottom: 1px solid #f0efec !important;
        padding-bottom: 12px;
        margin-bottom: 4px;
        gap: 12px;
    }

    .shopping__cart__table .product__cart__item__pic img {
        width: 64px;
        height: 64px;
    }

    /* Everything else is a label and a value, so a total can be checked.
     *
     * A row rather than a float: floated, the label held its own width and
     * "ETB 5,900.00" broke across two lines beside it. */
    .shopping__cart__table table tbody tr td[data-label] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        /* The template sizes these columns for a desk; a card has one column
           and it is the card's. Without this the line total sat in 140px of a
           345px row and broke as "ETB / 5,900.00". */
        width: 100% !important;
        max-width: 100% !important;
    }

    .shopping__cart__table table tbody tr td[data-label]::before {
        content: attr(data-label);
        flex: 0 1 auto;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #6a6a6a;
        font-weight: 600;
        white-space: nowrap;
    }

    .shopping__cart__table table tbody tr td.quantity__item .quantity,
    .shopping__cart__table table tbody tr td.quantity__item .quantity-form {
        display: inline-block;
    }
    .shopping__cart__table table tbody tr td.cart__price { font-weight: 700; }
    /* Save for later and Remove, side by side at the foot of the card rather
       than stacked in a corner. */
    .shopping__cart__table table tbody tr td.cart__close {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        width: 100% !important;
        padding-top: 10px;
        border-top: 1px solid #f0efec !important;
        margin-top: 4px;
    }
}

/* The size a line is in, between the name and the price. */
.shopping__cart__table .line-size {
    color: #6a6a6a;
    font-size: 14px;
    margin-bottom: 6px;
}

/* The page a payment made on the phone comes back to.
   One thing to press, and it is the biggest thing on the screen — somebody
   standing in a browser after paying wants out of it. */
.backtoapp__ref {
    margin: 24px 0 20px;
}

.backtoapp__button {
    display: inline-block;
    min-width: 240px;
    margin-bottom: 20px;
}

/* ---- what the acceptance test found ------------------------------------ */

/* Form text you can actually read.
   The template styles its inputs at #b7b7b7, which is a placeholder colour
   applied to the value as well — so what somebody typed was near-invisible on
   white. The placeholder stays light; the words they typed do not. */
.checkout__input input,
.checkout__input textarea,
.contact__form input,
.contact__form textarea,
.product__details__tab__desc input,
.product__details__tab__desc textarea,
.shop__sidebar__search input,
.search-model-form input {
    color: #111111;
}

.checkout__input input::placeholder,
.checkout__input textarea::placeholder,
.contact__form input::placeholder,
.contact__form textarea::placeholder {
    color: #767676;
}

/* How many are left, said at the stepper rather than at the checkout. */
.stock-cap {
    display: none;
    margin-left: 12px;
    color: #ca1515;
    font-size: 13px;
}

/* Where the order is going. Spaced off the totals above it — the two boxes
   ran together, which read as one block with a stray heading in it. */
.order__going {
    margin-top: 28px;
    margin-bottom: 28px;
}

.order__going h6 {
    color: #111111;
    font-weight: 700;
    margin-bottom: 10px;
}

/* The pay box on an order.
   Its own box, not the discount box's. That one positions its button
   absolutely inside a text input, so a Pay button borrowing the class was
   laid on top of a form with no input and could not be seen at all. */
.pay__box {
    background: #f3f2ee;
    padding: 24px;
    margin-bottom: 24px;
}

.pay__box h6 {
    color: #111111;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Money the shop has, said in the shop's own settled green rather than in the
   grey of a thing still being waited on. */
.pay__box--paid {
    background: #eaf7ee;
    border-left: 3px solid #14663a;
}

.pay__box--paid h6 {
    color: #14663a;
}

/* The link to their own invoice, readable on the green it sits on.
 *
 * It inherited the shop's accent, which is 3.61:1 against #eaf7ee — under the
 * floor, on the one link in the shop that leads to a document about somebody's
 * money. Nobody had seen it because this panel only appears on an order paid
 * online, and until the rail was walked no picture of that existed. The box's
 * own dark green is 6.4:1 and is already the colour of the word above it. */
.pay__box--paid a {
    color: #14663a;
    text-decoration: underline;
}

.pay__button {
    width: 100%;
    padding: 16px 30px;
}

/* Shown only once an order is paid for, when it is the one thing left to do. */
.keep-shopping {
    display: inline-block;
    padding: 16px 40px;
}

/* ---- the checkout a returning shopper sees ----------------------------- */

/* Who is buying, shown rather than offered for editing. */
.checkout__you {
    background: #f3f2ee;
    padding: 20px;
    margin-bottom: 20px;
}

.checkout__you p { margin: 0; }

.checkout__you__name {
    font-size: 17px;
    font-weight: 700;
    color: #111111;
    margin-top: 4px !important;
}

.checkout__you__email { color: #6a6a6a; }

.checkout__you__note {
    margin-top: 8px !important;
    font-size: 13px;
    color: #686868;
}

.checkout__you__note a { color: #ca1515; }

/* Addresses this shopper has used before. */
.kept-addresses { margin-bottom: 24px; }

.kept-addresses__lead {
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
}

.kept-address {
    display: block;
    border: 1px solid #e5e5e5;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: 400;
}

.kept-address--on { border-color: #111111; }

.kept-address input { margin-right: 10px; }

.kept-address__who {
    font-weight: 700;
    color: #111111;
}

.kept-address__where,
.kept-address__phone {
    display: block;
    margin-left: 26px;
    color: #6a6a6a;
    font-size: 14px;
}

/* The offer of an account, to somebody buying as a guest. */
.checkout__keep {
    background: #f3f2ee;
    padding: 20px;
    margin-bottom: 24px;
}

.checkout__keep > label {
    font-weight: 700;
    color: #111111;
    cursor: pointer;
}

.checkout__keep > label input { margin-right: 10px; }

.checkout__keep__password { margin-top: 14px; }

.checkout__keep__note {
    margin-top: 10px;
    font-size: 14px;
    color: #6a6a6a;
}

.checkout__keep__note a { color: #ca1515; font-weight: 600; }

/* The address form, hidden while a kept address is chosen.
   Hidden rather than removed: with JavaScript off there is no way to choose,
   so the form is always there and the server honours what was posted. */
.address-form--hidden {
    display: none;
}

/* A product taken out of the shop while it sat in somebody's cart.
 *
 * The line stays. Something disappearing from a cart without a word is how a
 * shopper stops trusting the whole thing — so it is shown, set back, and said
 * out loud. It costs nothing, counts for nothing, and the checkout refuses
 * while it is there. */
.line-gone td { background: #f7f6f3; }
.line-gone .product__cart__item__pic img { opacity: .45; }
.line-gone h6 a { color: #595959; }

.line-gone__say {
    color: #a11212;
    font-size: 13px;
    font-weight: 700;
    margin: 4px 0 0;
    line-height: 1.4;
}

/* The checkout button when there is nothing to check out.
 *
 * Shown and off rather than removed: a button that vanishes reads as a page
 * that has broken, and a button that is plainly unavailable next to the reason
 * reads as a step still to do. */
.primary-btn--off {
    background: #d9d9d9;
    color: #595959;
    cursor: not-allowed;
}
.primary-btn--off:hover { background: #d9d9d9; color: #595959; }

.cart__warn {
    color: #a11212;
    font-size: 13px;
    line-height: 1.5;
    margin: 12px 0 0;
}
.cart__warn b { font-weight: 700; }

/* ---- picking a colour, then a size --------------------------------------- */
/*
 * Colour first. The images change with the colour and not with the size,
 * so choosing a colour is choosing what you are looking at — which is why
 * every shop puts the swatches above the size row rather than beside it.
 *
 * Drawn in prototype 6.5. Prototype 7 makes the gallery follow the swatch and
 * greys the sizes this colour has none of.
 */
/* inline-flex, not flex: the product text is centred, and a block-level row
   would sit hard against the left while the size row below it stayed centred. */
.picker { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.picker__k { font-size: 15px; color: #111111; font-weight: 700; margin-right: 4px; }

.hue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e5e5;
    padding: 6px 13px 6px 9px;
    margin: 0;
    font-size: 14px;
    color: #595959;
    cursor: pointer;
    background: #ffffff;
}
.hue:hover { border-color: #111111; color: #111111; }
.hue--on { border-color: #111111; color: #111111; font-weight: 700; }
.hue input { position: absolute; opacity: 0; width: 0; height: 0; }

/* The dab of colour itself. A border on every one, so white and cream are
   still a shape rather than a hole in the page. */
.hue__dab {
    width: 15px;
    height: 15px;
    border: 1px solid var(--dab-edge, rgba(0, 0, 0, .22));
    background: var(--dab, #cccccc);
    flex: 0 0 15px;
}

/* What is left in the colour that is picked.
 *
 * Sold out and never made are different things and both are said, because a
 * shopper who cannot tell them apart learns nothing from either. */
.size-say { font-size: 13px; color: #595959; line-height: 1.6; margin: 12px 0 0; }
.size-say b { color: #111111; font-weight: 700; }
.size-say .low { color: #a11212; font-weight: 700; }

/* A size the shop has none of, and a size it does not make in this colour. */
.product__details__option__size label.dim {
    opacity: .45;
    text-decoration: line-through;
    cursor: not-allowed;
}
.product__details__option__size label.gone { display: none; }

/* The facts under the Add to cart button — Category, Brand, Tags.
 *
 * The template styles the label and leaves the link to Bootstrap, whose
 * #007bff is 3.98:1 on white and below the 4.5:1 floor. This is the third time
 * this exact colour has got through in this shop: it arrives wherever an
 * anchor is written without a rule of its own, and it never looks wrong. Found
 * by audit.js, not by looking.
 */
.product__details__last__option ul li a {
    color: #ca1515;
    border-bottom: 1px solid transparent;
}
.product__details__last__option ul li a:hover {
    color: #111111;
    border-bottom-color: #111111;
}

/* The facts under Add to cart: SKU, category, brand, what is left.
 *
 * They were a centred list of "label: value" pairs, so the labels and the
 * values started wherever the words before them happened to end and no two
 * lines lined up. A two-column grid: labels in one column, values in the
 * other, both left aligned. The whole block is centred as a block, which is
 * what the rest of this column does.
 */
.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    margin: 26px auto 0;
    padding: 20px 0 0;
    border-top: 1px solid #e5e5e5;
    max-width: 340px;
    text-align: left;
}
.facts dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #595959;
    margin: 0;
    line-height: 1.7;
}
.facts dd {
    margin: 0;
    font-size: 14px;
    color: #111111;
    line-height: 1.7;
}
.facts dd a { color: #ca1515; }
.facts dd a:hover { color: #111111; border-bottom: 1px solid #111111; }

/* The dab of colour beside a name. A border on every one, so white and cream
   are a shape rather than a hole in the page. */
.dab {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--dab-edge, rgba(0, 0, 0, .22));
    background: var(--dab, #cccccc);
    flex: 0 0 14px;
}

/* A colour beside its name, wherever a bought thing is written down. */
.dabline { display: inline-flex; align-items: center; gap: 6px; }
.dabline .dab { width: 11px; height: 11px; flex: 0 0 11px; }

/* What a cart or an order line says it is: the colour, then the size. */
.line-was {
    font-size: 13px;
    color: #595959;
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
/* #b0b0b0 is 2.17:1 and audit.js will not have it, separator or not. */
.line-was__sep { color: #767676; }

/* ---- the product panel gets one left edge -------------------------------- */
/*
 * The template centres this column, and everything with a form control in it —
 * the colour row, the size row, the quantity stepper, the facts — is a block
 * that left-aligns inside a centred parent. The result was four different
 * starting positions down one panel, with the quantity box against the far
 * left and the facts floating right of centre.
 *
 * Centred prose and left-aligned controls cannot be reconciled, so the panel
 * is left-aligned and centred as a whole. One edge, which is what every shop
 * this one takes its shapes from does.
 */
/* Nothing here. The six rules that were here were written against
 * `.product__details__text`, which prototype 13 renamed to `.chooser`, so none
 * of them has ever applied — and the panel is left-aligned anyway, because the
 * template's competing `text-align: center` is dead for the same reason.
 *
 * Deleted rather than re-pointed. They are a decision nobody has ever seen
 * take effect: a 480px cap and auto margins on a column that has neither
 * today, on a page nobody has complained about. Re-pointing them would be
 * changing the page on the strength of a nine-prototype-old intention. What
 * the panel actually needed — the strikethrough and the stars — is up with
 * the rule that draws it. */

/* The label sits above its controls, not beside them.
 *
 * Beside them needs a label column, and a label column gives the panel a
 * second left edge: the title, the price and the facts start at one place and
 * the swatches and the button start 72px further in. One edge is the whole
 * point, so the labels become captions. */
.product__details__option { display: block; margin-bottom: 20px; }
.product__details__option > span,
.product__details__option__size > span,
.picker__k {
    display: block;
    margin: 0 0 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #595959;
}
.product__details__option__size { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product__details__option__size > span { flex: 0 0 100%; }
.product__details__option__size label { margin: 0; }
.picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.picker__k { flex: 0 0 100%; }

.size-say { margin-left: 0; }

.product__details__cart__option {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 0;
}
.product__details__cart__option .quantity { margin: 0; }
.product__details__cart__option .primary-btn { margin: 0; }

.facts { max-width: none; margin-left: 0; margin-right: 0; }

/* What a product comes in when there is nothing to choose.
 *
 * A row of swatches with one swatch on it is not a choice and was removed —
 * but removing it left a shopper unable to see what colour they were buying.
 * The fact is stated instead of offered. */
.comes-in {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #595959;
    margin: 0 0 20px;
}

/* ---- what a size means -------------------------------------------------- */

.guide-open { margin: 12px 0 0; font-size: 13px; }
.guide-open a {
    color: #ca1515;
    font-weight: 700;
    border-bottom: 1px solid #ca1515;
}
.guide-open a:hover { color: #111111; border-bottom-color: #111111; }
.guide-open i { margin-right: 5px; }

.guide {
    margin: 28px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #e5e5e5;
}
.guide h6 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #595959;
    margin: 0 0 12px;
}
.guide__how {
    font-size: 13px;
    line-height: 1.6;
    color: #595959;
    margin: 0 0 6px;
}

/* Five columns of numbers on a phone is wider than a phone. It scrolls inside
   itself so the page never does. */
.guide__wrap { overflow-x: auto; margin-top: 14px; }

.chart { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart th {
    text-align: left;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #595959;
    font-weight: 700;
    padding: 0 14px 8px 0;
    border-bottom: 1px solid #e5e5e5;
    white-space: nowrap;
}
.chart td {
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #111111;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.chart .chart__size { font-weight: 700; }
.chart caption {
    caption-side: bottom;
    text-align: left;
    padding-top: 12px;
    font-size: 12px;
    color: #595959;
}

/* Taking a coupon off again.
 *
 * The theme's `.cart__discount form button` is absolutely positioned inside
 * the code box — right: 0, height: 100% — because the only form it ever had
 * was Apply, whose button sits in the input. The Take it off form has no
 * input, so the form had no height, and its button measured 165 by 0 pixels:
 * on the page, findable, and impossible to press. Nobody could remove a
 * discount they had typed.
 */
.cart__discount form.coupon-off { position: static; }

/* And quiet. It inherited the theme's solid black, so a cart with a code on it
 * drew two full black buttons — Proceed to checkout, and Take it off directly
 * under it, the same size and the same weight. Removing a discount is a small,
 * reversible thing; it should not be the second loudest press on the page, and
 * it should not be something a shopper can hit while aiming at the checkout.
 * Every other shop makes this a plain link. */
.cart__discount form.coupon-off button {
    position: static;
    height: auto;
    min-height: 44px;
    padding: 4px 0;
    letter-spacing: 0;
    background: none;
    border: 0;
    color: #686868;
    font-size: 13px;
    text-transform: none;
    text-decoration: underline;
}

.cart__discount form.coupon-off button:hover,
.cart__discount form.coupon-off button:focus {
    background: none;
    color: #111111;
}

/* ---- the shop's name, where the template's mark used to be --------------
 *
 * "Male fashion." was the bought template's own artwork and sat in the header
 * and the footer of every page from prototype 1. The name is a setting now, so
 * it is set in type: an image cannot follow a name somebody changes from the
 * back office, and a mark somebody has actually drawn needs a file store to
 * keep it in. */
.header__logo--word a,
.footer__logo--word a {
    font-family: "Cabin", sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.1;
    display: inline-block;
}

/* How this shop can be paid, in words under the mark.
 *
 * 8.6:1 on the footer's #111111, which is where the greys elsewhere in this
 * shop would be unreadable. */
.footer__pay {
    color: #b7b7b7;
    font-size: 13px;
    line-height: 1.8;
    margin: 14px 0 0;
}
.footer__pay b { color: #ffffff; font-weight: 700; }

/* 15.3:1 on white, and 13.4:1 on the footer's #111111 ground. The mark is the
 * one word on the page that must never be the faint one. */
.header__logo--word a { color: #111111; }
.footer__logo--word a { color: #ffffff; }

/* And the mark itself, where a shop has uploaded one.
 *
 * Capped by height rather than by width: a logo is whatever shape somebody
 * drew it, and a wide one squeezed to a fixed width comes out as a smear.
 * The header row is 100px tall, so 56 leaves it room to sit in. */
.header__logo a img { max-height: 56px; width: auto; }
.footer__logo a img { max-height: 56px; width: auto; margin-bottom: 10px; }

/* ---- the accent, on the footer's dark ground --------------------------
 *
 * The template's own #e53637 is 4.42:1 on the footer's #111111 — under the
 * 4.5:1 floor, and only just. Lightening it clears the floor; darkening it
 * makes it worse, which is the mistake the first attempt made by assuming the
 * ground was white.
 *
 * Everywhere the accent is a mark rather than words — a rule, a dot, an icon —
 * it stays exactly as the template has it, because that is a 3:1 job.
 *
 * Found by audit.js, not by looking. Nobody notices a red link they can almost
 * read; they just do not read it. */
.footer__copyright__text p a,
.footer__copyright__text p i {
    color: #ef5b5c;   /* 5.7:1 on #111111 */
}

/* The shop's own address, wherever it is written as a link.
 *
 * An unstyled <a> falls to Bootstrap's #007bff, which is 3.98:1 on white and
 * under the floor. It arrived with the settings page: the address used to be
 * plain text, so nothing had ever styled it.
 *
 * Two rules, not one, because the two places it appears have opposite grounds.
 * The first attempt set both to #111111 and made the footer's copy black on a
 * near-black ground — invisible, and caught by the sweep rather than by
 * looking, which is the entire argument for running it. */
.contact__text ul li p a {
    color: #111111;                 /* 18.9:1 on white */
    text-decoration: underline;
}
.contact__text ul li p a:hover { color: #c62828; }

.footer__newslatter a {
    color: #ffffff;                 /* 17.9:1 on the footer's #111111 */
    text-decoration: underline;
}
.footer__newslatter a:hover { color: #ef5b5c; }

/* How this order is being paid for, chosen at the checkout.
 *
 * A radio and its sentence, because the sentence is the point: "cash on
 * delivery" means nothing without "have the exact amount if you can", and a
 * shopper who has to guess picks the one they already know. */
.paying { margin: 22px 0 18px; }

.paying h6 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 12px;
}

.paying__one {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #e5e5e5;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    font-weight: 400;
}

.paying__one:last-child { margin-bottom: 0; }
.paying__one:hover { border-color: #b7b7b7; }
.paying__one input { margin-top: 3px; flex: 0 0 auto; }

.paying__one span { font-size: 13px; color: #595959; line-height: 1.5; }
.paying__one b { display: block; font-size: 14px; color: #111111; font-weight: 700; }
.paying__one em { display: block; font-style: normal; color: #a11212; margin-top: 4px; }

/* ---- the accent, as words on white ------------------------------------
 *
 * The template's #e53637 is 3.81:1 on white. Prototype 9 swept it where it sat
 * on the footer's dark ground and missed it here, because it is only ever a
 * few characters: the asterisk beside a required field, and the total on the
 * order and checkout summaries.
 *
 * Which is exactly why it survived. Faint text does not announce itself, and
 * two words are two words nobody reads — one of them being what the shopper is
 * about to be charged.
 *
 * #ca1515 is the shop's own darker red, already used for a link hover, at
 * 5.6:1. The accent as a mark — a rule, a dot, a filled button — is untouched:
 * that is a 3:1 job and it clears it.
 *
 * **And then the money stopped being red at all.** Fixing the contrast left
 * the total wearing the shop's own accent, which is the ground of ADD TO CART
 * — so the most confident number on the page was in the colour that means
 * *press me*, and the rule this shop keeps is one loud action per screen. A
 * total is a fact, not an alarm, and ink at 18.9:1 is the most confident thing
 * this shop owns.
 *
 * The asterisk stays red. It is a marker rather than a number, and it is
 * saying the field is required, which is the sort of thing red is for. */
.cart__total ul li span,
.checkout__total__all li span { color: #111111; }
.checkout__input p span { color: #ca1515; }

/* What delivery costs, said in the cart and again at the checkout. */
.delivery__note {
    font-size: 13px;
    color: #595959;
    line-height: 1.6;
    margin: -8px 0 18px;
}

.delivery__note b { color: #111111; }
.cart__total .delivery, .checkout__total__all .delivery { color: #111111; }
.free { color: #14663a; }

/* Where it is going: what the shop made of the pin, and the one choice that is
 * genuinely a choice — have it brought, or come and get it. The list of areas
 * that __one styles is the <noscript> fallback, for a browser with no map. */
.getting { margin: 22px 0 18px; }
.getting h6 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 12px;
}

.getting__one {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #e5e5e5;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    font-weight: 400;
}

.getting__one:last-of-type { margin-bottom: 0; }
.getting__one:hover { border-color: #b7b7b7; }
.getting__one input { margin-top: 3px; flex: 0 0 auto; }
.getting__one span { font-size: 13px; color: #595959; line-height: 1.5; }
.getting__one b { display: block; font-size: 14px; color: #111111; font-weight: 700; }
.getting__one em { display: block; margin-top: 4px; font-style: normal; }
.getting__one em.cost { color: #111111; font-weight: 700; }
.getting__one em.free { color: #14663a; font-weight: 700; }
.getting .hint { font-size: 12px; color: #686868; margin: 10px 0 0; line-height: 1.5; }

/* The pin: a button, what it found, and why it is worth pressing. */
.pin { margin: 0 0 24px; }

.pin__ask {
    border: 1px solid #e5e5e5;
    background: #ffffff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.pin__ask:hover { border-color: #111111; }
.pin__ask[disabled] { opacity: .5; cursor: default; }
.pin__said--got { color: #14663a; font-weight: 600; }

/* The note about a missing map reads as quietly as the instruction it
 * qualifies. Left unstyled it inherited body size and came out larger than the
 * sentence above it — an exception shouting over the rule. */
.pin__plain {
    font-size: 12px;
    color: #686868;
    margin: 8px 0 0;
    line-height: 1.5;
}

.pin__why {
    font-size: 12px;
    color: #686868;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* The map on the checkout. Where the parcel goes, said as a point, because a
 * point is the only thing that can be priced and the only thing a courier can
 * follow when an address is a building and a floor. */
.pin__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.pin__map {
    height: 280px;
    border: 1px solid #e5e5e5;
    background: #f3f2ee;
    margin: 12px 0 10px;
}

.pin__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pin__said { font-size: 13px; color: #595959; }

/* What the shop made of the pin, said back in its own words. */
.getting__said {
    font-size: 14px;
    color: #111111;
    line-height: 1.6;
    margin: 0 0 12px;
}

.getting__said--waiting { color: #8a5a00; }
.getting__said--bad { color: #a11212; }
.getting__said em { display: block; font-style: normal; color: #14663a; font-weight: 700; }

.getting__collect {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #e5e5e5;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
}

.getting__collect:hover { border-color: #b7b7b7; }

/* What the map calls the road the pin landed on, offered under the address.
 * A button rather than a fill: it is a real answer and it is still not
 * somebody's address. */
.near {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #595959;
    margin: 8px 0 0;
}

.near button {
    border: 1px solid #e5e5e5;
    background: #ffffff;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #111111;
    cursor: pointer;
}

.near button:hover { border-color: #111111; }

/* The address on an account that nobody has proved yet.
 *
 * A line rather than a wall. It blocks nothing: somebody locked out of what
 * they have already bought because a letter has not arrived is a customer the
 * shop invented a way to lose. */
.unconfirmed {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid #f0d9a8;
    background: #fff6e5;
    padding: 14px 18px;
    margin: 0 0 24px;
}

.unconfirmed p { margin: 0; font-size: 14px; line-height: 1.6; color: #111111; flex: 1 1 260px; }
.unconfirmed form { margin: 0; }

.unconfirmed button {
    border: 1px solid #111111;
    background: #ffffff;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    cursor: pointer;
    white-space: nowrap;
}

.unconfirmed button:hover { background: #111111; color: #ffffff; }

/* The hint under a password box on the reset form. */
.checkout__input .hint { display: block; font-size: 12px; color: #686868; margin-top: 6px; }

/* ---- sending something back --------------------------------------------
 *
 * One row per line of the order: a picture, what it is, and how many are
 * coming back. Everything else on the return form is the checkout's own
 * markup, because it is the same kind of form and should not look like a
 * different shop.
 */
.return__step {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #595959;
    font-weight: 700;
    margin: 26px 0 8px;
}

.retline {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
}

.retline img { width: 60px; height: 60px; object-fit: cover; flex: 0 0 60px; }
.retline__what { flex: 1 1 auto; font-size: 14px; }
.retline__what b { display: block; }
.retline__what .quiet { color: #595959; font-size: 13px; }
.retline__how { flex: 0 0 110px; }

.retline__how label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #595959;
    margin: 0 0 4px;
}

/* The template turns every select on the shopfront into a nice-select div, so
 * the width has to be set on that rather than on the select underneath — which
 * is display:none by the time anybody sees the page. */
.retline__how .nice-select,
.retline__how select {
    width: 100%;
    height: 40px;
    line-height: 38px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    padding: 0 30px 0 10px;
    font-size: 14px;
    background: #ffffff;
}

/* The reason, and the box under it. Both are the width of the form: a select
 * that shrinks to its longest option and a textarea at the browser's default
 * 20 columns read as two controls that landed there by accident. */
.checkout__input .nice-select {
    width: 100%;
    height: 46px;
    line-height: 44px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    padding: 0 30px 0 20px;
    font-size: 15px;
}

/* The template paints every span in a field label red, because the only one it
 * ever had was the required asterisk. "(optional)" is the opposite of that. */
.checkout__input p span.quiet { color: #595959; }

.checkout__input textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 12px 20px;
    font-size: 15px;
    resize: vertical;
    min-height: 96px;
}

/* The trail of steps, on the shopfront as well as the back office: a shopper
 * looking at their own return reads the same four lines an admin does. */
.trail { list-style: none; padding: 0; margin: 0; }

.trail li {
    position: relative;
    padding: 0 0 16px 22px;
    border-left: 1px solid #e5e5e5;
    font-size: 14px;
}

.trail li:last-child { border-left-color: transparent; padding-bottom: 0; }

.trail li:before {
    content: "";
    position: absolute;
    left: -5px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e5e5e5;
}

.trail li.done:before { background: #14663a; }
.trail li.now:before { background: #ca1515; }
.trail time { display: block; color: #595959; font-size: 12px; }

/* The box on the order page that says where a return has got to. */
.return__box { border: 1px solid #e5e5e5; padding: 22px; margin-bottom: 22px; }
.return__box h6 {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #595959;
    font-weight: 700;
    margin: 0 0 12px;
}

.return__box p { font-size: 14px; margin: 0 0 6px; }
.return__box .quiet { color: #595959; }

/* A second action on a page that already has a loud one. The order page's Pay
 * button is the shop's own accent; Return items must not compete with it. */
.site-btn--quiet {
    background: #ffffff;
    color: #111111;
    border: 1px solid #111111;
}

.site-btn--quiet:hover { background: #111111; color: #ffffff; }

/* ---- the product page: gallery left, choices right ----------------------
 *
 * The gallery was full width across the top with the choices underneath, so
 * pressing a swatch moved the photograph being chosen between off the screen.
 * Side by side, with the choices sticky, is what every shop selling clothes in
 * colours does — and it matters here for the reason the colours exist: the
 * photographs are the thing that changes.
 */
.gallery { display: flex; gap: 16px; align-items: flex-start; }

.gallery__thumbs { flex: 0 0 88px; }

/* The list inside it is the template's own nav, so the column is set on that
 * rather than on the wrapper — which is what left every thumbnail nought
 * pixels wide. */
.gallery__thumbs .nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
}

.gallery__thumbs .nav-item { margin: 0; width: 100%; }
.gallery__thumbs .nav-link { padding: 0; border: 1px solid #e5e5e5; display: block; }
.gallery__thumbs .nav-link.active { border-color: #111111; }
.gallery__thumbs .product__thumb__pic { width: 100%; height: 88px; background-size: cover; }
.gallery__big { flex: 1 1 auto; min-width: 0; }

/* Sticky, so pressing a swatch never moves the picture. The offset clears the
 * header; the column scrolls with the page once it is taller than the screen. */
.chooser { position: sticky; top: 100px; }

/* The details, folded away one at a time.
 *
 * <details> and <summary>, which open with no script at all, are focusable and
 * are announced correctly. The size guide was a table below the fold with a
 * link that jumped past the product to reach it.
 */
.fold { border-top: 1px solid #e5e5e5; }
.fold:last-of-type { border-bottom: 1px solid #e5e5e5; }

.fold > summary {
    cursor: pointer;
    padding: 16px 0;
    font-weight: 700;
    font-size: 14px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:after { content: "+"; font-weight: 400; font-size: 20px; color: #595959; }
.fold[open] > summary:after { content: "\2013"; }
.fold__in { padding: 0 0 18px; font-size: 14px; line-height: 1.7; }
.fold__in p { margin: 0 0 8px; }
.fold__how { color: #595959; }
.fold .facts { margin: 0; }

/* Reviews, under the two columns and headed rather than hidden behind a tab.
 * A tab called "Description" that repeats the description above it, beside one
 * called "Additional information" that repeats the material, is three places
 * for two facts. */
.reviews { margin-top: 60px; border-top: 1px solid #e5e5e5; padding-top: 40px; }
.reviews__title { font-size: 20px; font-weight: 700; margin: 0 0 26px; }

@media only screen and (max-width: 991px) {
    /* One column on a phone, so nothing is sticky and the picture is above the
     * choices — which is the order it is read in.
     *
     * **align-items is the whole of why this was broken.** The row above sets
     * flex-start so the two columns sit at the top of a tall page; turned on
     * its side by column-reverse, flex-start shrinks every row to its content
     * — and the thumbnails are flex: 1 1 0 with no basis, so their content is
     * nothing. The strip measured 14px wide with 2px thumbnails: two grey
     * hairlines under the big photograph that read as a rendering fault, on
     * every phone and every tablet, so nobody could see a second photograph of
     * anything.
     *
     * A real basis on each rather than 1 1 0, because a shopper should be able
     * to hit one with a thumb whether there are two of them or nine — so the
     * strip scrolls sideways instead of dividing itself into slivers. */
    .chooser { position: static; margin-top: 26px; }
    .gallery { flex-direction: column-reverse; align-items: stretch; }
    .gallery__thumbs { flex: 0 0 auto; width: 100%; }
    .gallery__thumbs .nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .gallery__thumbs .nav-item { flex: 0 0 72px; width: 72px; }
    .gallery__thumbs .product__thumb__pic { height: 72px; }
}

/* ---- adding from the shelf ----------------------------------------------
 *
 * Shopping meant opening every product page: five T-shirts was five pages,
 * five back buttons and five scrolls. Every shop of this kind puts the sizes
 * on the card. The size is a real radio group with `required` on it, so the
 * browser refuses an add with no size picked and nothing here needs a script.
 */
.quick-add { margin-top: 12px; }

.quick-add__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.quick-add__size {
    position: relative;
    border: 1px solid #e5e5e5;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: #111111;
    cursor: pointer;
    margin: 0;
}

.quick-add__size input { position: absolute; opacity: 0; width: 0; height: 0; }
.quick-add__size:has(input:checked) { background: #111111; color: #ffffff; border-color: #111111; }
.quick-add__size:focus-within { outline: 2px solid #111111; outline-offset: 2px; }

/* Sold out, struck through rather than hidden: what a shop is out of is worth
 * knowing, and a size that quietly disappears reads as one never made. */
.quick-add__size--gone {
    color: #6a6a6a;
    text-decoration: line-through;
    cursor: not-allowed;
    background: #f7f6f3;
}

.quick-add__one { font-size: 12px; color: #6a6a6a; margin: 0 0 10px; }

.quick-add__go {
    width: 100%;
    border: 1px solid #111111;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 8px;
    cursor: pointer;
}

.quick-add__go:hover { background: #111111; color: #ffffff; }

/* The template reveals its own "+ Add To Cart" on hover and parks it over the
 * picture. This card has a real one underneath, so that is gone. */
.product__item__text .add-cart { display: none; }

/* The line the shelf says after an add, with the one thing somebody might want
 * next beside it. Going to the cart is a choice here rather than the only
 * road, which is the whole point of adding from the shelf. */
.flash__go {
    margin-left: 12px;
    color: #14663a;
    font-weight: 700;
    border-bottom: 1px solid #14663a;
}

/* A country code beside the number, not inside it.
 *
 * The code is a short select and the number takes the rest of the row, which
 * is how every checkout that asks for a phone number lays it out. */
.dial { display: flex; gap: 8px; align-items: flex-start; }

/* The template turns the select into a nice-select div, so the width and the
 * height are set on that — and matched to the box beside it, which is 50px.
 * They were 46 and 50, which reads as two controls that landed there by
 * accident. */
.dial .nice-select, .dial select {
    flex: 0 0 150px;
    height: 50px;
    line-height: 48px;
    border-radius: 0;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
}

.dial input { flex: 1 1 auto; min-width: 0; }

/* ---- the addresses on the account page ----------------------------------
 *
 * The checkout remembered what was typed and offered it again, and that was
 * all: somebody who moved house accumulated addresses they could not rename,
 * reorder or take away.
 */
.account__title { font-size: 20px; font-weight: 700; margin: 50px 0 6px; }
.account__lead { font-size: 13px; color: #595959; margin: 0 0 18px; }
.kept { display: grid; gap: 14px; }

.kept__one {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e5e5e5;
    padding: 18px 20px;
}

.kept__one--usual { border-color: #111111; }
.kept__what { flex: 1 1 260px; font-size: 14px; }
.kept__what b { display: block; }
.kept__where { display: block; color: #595959; font-size: 13px; }

.kept__flag {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #111111;
    color: #ffffff;
    padding: 2px 7px;
    vertical-align: 2px;
}

.kept__do { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kept__do form { margin: 0; }
.kept__name { display: flex; gap: 6px; }

.kept__name input {
    width: 130px;
    height: 36px;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    font-size: 13px;
}

.kept__name button {
    height: 36px;
    border: 1px solid #111111;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
    cursor: pointer;
}

.kept__name button:hover { background: #111111; color: #ffffff; }

.kept__link {
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
}

.kept__link:hover { border-bottom-color: #111111; }
.kept__link--go { color: #ca1515; border-bottom-color: rgba(202, 21, 21, .35); }
.kept__link--go:hover { border-bottom-color: #ca1515; }

/* The shelf's filters, on a phone.
 *
 * At 375px the first garment's top was 2,455px down a 7,818px page: a shopper
 * who taps Shop scrolled past a search box and six stacked filter groups —
 * Categories, Branding, Filter price, Size, Colours, Tags — before a single
 * garment appeared. The sidebar is a column at desktop widths and simply
 * stacked above the grid below them, which is the template's own layout and
 * nobody had measured what it does to the page a phone shopper lives on.
 *
 * Behind a Filter button, which is what every shop of this kind does. No
 * script: a checkbox and its label, so the filters open on a handset whose
 * JavaScript failed — the shelf is not a page that may quietly lose its
 * refinements.
 *
 * The search box is deliberately outside it. Search is not a refinement, and
 * a phone shopper looking for "scarf" should not have to open a filter panel
 * to find the box. */
.shelf-filter__box { position: absolute; opacity: 0; width: 0; height: 0; }
.shelf-filter { display: none; }

@media only screen and (max-width: 991px) {
    .shelf-filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* 48, not 44: this is a full-width bar rather than an icon in a row,
         * and it is the only control between a shopper and the whole of the
         * shelf's refinements. */
        min-height: 48px;
        margin: 0 0 20px;
        padding: 0 16px;
        border: 1px solid #e5e5e5;
        background: #ffffff;
        color: #111111;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .shelf-filter__word i { margin-right: 10px; color: #595959; }
    /* What the button is hiding. A collapsed panel with no count is a shelf
     * that is short for no reason a shopper can see. */
    .shelf-filter__many {
        min-width: 20px;
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: #ca1515;
        color: #ffffff;
        font-size: 11px;
        text-align: center;
    }
    .shelf-filter__box:focus-visible + .shelf-filter { outline: 2px solid #111111; outline-offset: 2px; }
    .shop__sidebar__accordion { display: none; }
    .shelf-filter__box:checked + .shelf-filter { border-bottom-color: #111111; }
    .shelf-filter__box:checked ~ .shop__sidebar__accordion { display: block; }
    /* The heart on a card. Prototypes 21 and 23 took the header's controls to
       44x44 and never reached this one, which is the control a phone shopper
       presses most often on the shelf: 34x34, measured on every page that
       draws a card. Left at 34 on a desktop, where a mouse is precise and a
       44px disc on every card is a page of discs. */
    .keep__b { width: 44px; height: 44px; line-height: 44px; font-size: 17px; }
    .keep { top: 6px; right: 6px; }

    .shop__sidebar { margin-bottom: 0; }
    .shop__sidebar__search { margin-bottom: 20px; }

    /* Inside the drawer, the six group headings are the control. They were
     * 24px tall, which is half a thumb, and the drawer opened 4,549px deep
     * with every group expanded — so opening the filters buried the products
     * they are for. Collapsed by shop.js, and tappable here. */
    .shop__sidebar__accordion .card-heading a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        margin: 0;
        padding: 0;
    }
    /* The mark on the right of each heading, in the shop's own characters.
     *
     * Doubled with `.card-heading.active` because the template styles that
     * combination too, with a FontAwesome glyph, and its three-class selector
     * beats a two-class one however late this file loads. `position: static`
     * and `font-family: inherit` undo the rest of what it sets. */
    .shop__sidebar__accordion .card-heading a:after,
    .shop__sidebar__accordion .card-heading.active a:after {
        content: "\2212";           /* minus: this group is open */
        position: static;
        margin-left: 12px;
        color: #595959;
        font-family: inherit;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
    }
    .shop__sidebar__accordion .card-heading a.collapsed:after,
    .shop__sidebar__accordion .card-heading.active a.collapsed:after {
        content: "\002B";           /* plus: there is more under here */
    }

    /* And the lists inside them stand at their own height, with no custom
     * scrollbar.
     *
     * `!important` because these fight inline styles, which is the only thing
     * that earns it. The template gives three of these lists a fixed 225px and
     * hands them to jquery.nicescroll — which measures the element to size its
     * rail, and on a phone measured it while the drawer was still closed. It
     * wrote `width: 1px`, so every category wrapped one letter to a line and
     * the list stood **2,975px** tall with nine items in it: the whole of the
     * "drawer opens 4,549px deep" the acceptance walk found.
     *
     * A 225px window with its own scrollbar inside a drawer that is already
     * scrolling is the wrong shape on a phone in any case. Nine categories is
     * a list; it does not need a viewport of its own. */
    .shop__sidebar__categories ul,
    .shop__sidebar__price ul,
    .shop__sidebar__brand ul {
        height: auto !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        touch-action: auto !important;
        cursor: auto !important;
    }
    .shop__sidebar .nicescroll-rails { display: none !important; }
}

/* The deal block's white panel and price sticker, sized for birr.
 *
 * The template's panel is a fixed 600px starting 485px left of its column, so
 * it reaches only 115px into the column — enough for "Marked" in the demo and
 * not for "this week", which ran out onto the grey. It now ends past the
 * column's own right edge, however wide the heading is.
 *
 * The sticker was a 100px circle for "$67.24". "ETB 5,200.00" spilled out of
 * both sides. It grows with its price now: a circle while the price is short,
 * a pill when it is not. */
.categories__text:before {
    width: auto;
    right: -30px;
}

.hot__deal__sticker {
    width: auto;
    height: auto;
    min-width: 100px;
    min-height: 100px;
    padding: 20px 22px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hot__deal__sticker h5 {
    white-space: nowrap;
    font-size: 18px;
    margin: 0;
}

/* ---- your orders, on a phone -------------------------------------------- */

/* Four headings with nothing between them.
 *
 * At 375 the template squeezes this table until ORDER WHEN ITEMS TOTAL read as
 * one word — `ORDERWHENITEMSTOTAL` — and the date wrapped so that "19 Sep 2026,
 * 23:15" and the item count 3 sat on one line and read as one value. The
 * columns keep a width a person can read, and the table scrolls inside its own
 * box rather than crushing itself.
 */
/* One order, one card, every value with its name beside it.
 *
 * Scrolling the table sideways inside its own box was the earlier answer, and
 * it left a shopper with values and no headings: the item count sat as a bare
 * "3" on its own line, right-aligned under a date, with nothing to say what it
 * counted. A table nobody can read the headings of is not a table.
 *
 * The same shape the back office uses for its own lists below 768px, so the
 * two halves of the shop read the same way on a phone. */
@media only screen and (max-width: 767px) {
    .shopping__cart__table:has(.orders-table) { overflow-x: visible; }

    .orders-table,
    .orders-table tbody,
    .orders-table tr,
    .orders-table td {
        display: block;
        width: auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    .orders-table thead { display: none; }

    .orders-table tr {
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .orders-table td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 4px 0;
        border: 0;
    }

    .orders-table td[data-label]::before {
        content: attr(data-label);
        color: #686868;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex: 0 0 auto;
    }

    /* The badge has no name to put beside it: it is the answer on its own. */
    .orders-table td[data-label=""]::before { content: none; }
    .orders-table td[data-label=""] { justify-content: flex-start; padding-top: 8px; }
}

/* A control that is refusing, and the reason beside it.
 *
 * For the ones the browser cannot point at: a required <select> hidden behind
 * the template's own dropdown. Its bubble never appears, so the page says it. */
.nice-select.needs-an-answer {
    border-color: #ca1515;
    box-shadow: 0 0 0 2px rgba(202, 21, 21, .12);
}

/* Specific enough to win. `.checkout__input p` styles the field's own label
 * and outranked a single class, so the reason's complaint came out in ordinary
 * body black beside a quantity's in red — and half of a two-part refusal read
 * as a helper hint. Two faults on one screen must look like two of the same
 * thing. */
.needs-an-answer__say,
.checkout__input .needs-an-answer__say,
.retline .needs-an-answer__say {
    margin: 7px 0 0;
    color: #ca1515;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

/* And the same for the control. The template's dropdown is a div, so the
 * border has to be put on the widget rather than on the select behind it. */
.checkout__input .nice-select.needs-an-answer,
.checkout__input select.needs-an-answer {
    border-color: #ca1515;
    box-shadow: 0 0 0 2px rgba(202, 21, 21, .12);
}

/* One line at the top saying what happened, written by the page when it is the
 * page doing the refusing. Without it the form came back looking unchanged and
 * the first thing anybody saw was a page that had done nothing. */
.needs-an-answer__banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fdecec;
    border: 1px solid #f3bdbd;
    color: #8f1111;
    padding: 12px 16px;
    margin: 0 0 18px;
    font-weight: 600;
}

/* The quantity boxes, when the form came back because none was chosen. The
   banner at the top said what was wrong and nothing on the page showed where:
   a shopper read it as being asked again for the reason they had just given. */
.retline__how--asked .nice-select,
.retline__how--asked select {
    border-color: #ca1515;
    box-shadow: 0 0 0 2px rgba(202, 21, 21, .12);
}

/* The line total in the checkout summary, with room of its own. */
.checkout__line__total { margin-left: 10px; }

/* The box the banner is about.
 *
 * "That phone number does not look right" at the top of a checkout is a
 * sentence about one of fifteen boxes, and the shopper had to work out which. */
.box--wrong,
.checkout__input input.box--wrong {
    border-color: #ca1515 !important;
    box-shadow: 0 0 0 2px rgba(202, 21, 21, .12);
}

/* Sign out in the phone drawer, set like the links beside it.
 *
 * It arrived as the browser's own 30px grey button sitting among letter-spaced
 * capitals, which reads as something left unfinished rather than as a way out
 * of the account. Same rule as the strip above, which a phone never draws. */
.offcanvas__links .signout { display: inline-block; }

.offcanvas__links .signout button {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: #111111;
    font-family: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: inherit;
    /* 44px of it, because this one is pressed with a thumb. */
    min-height: 44px;
}

.offcanvas__links .signout button:hover { color: #ca1515; }


/* Two products to a row on a phone, which is what every shop of this kind
 * does and what this one did not.
 *
 * The shelf was 5,913px tall for nine products at 375 — seven screens of
 * scrolling to see nine things, one under the other. Nobody browses a shop
 * that way any more.
 *
 * Not on the very narrowest screens. At 320px two columns come to about 145px
 * each, and the size chips and the Add to cart button pushed the page seven
 * pixels wider than the phone — a sideways scroll on the front page, and one
 * that only showed up signed in as staff, where the header is already fuller.
 * Below 360px the cards go back to one to a row. */
@media (max-width: 359.98px) {
    .shelfcol {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* And the cards in a row end level.
 *
 * Two to a row made this visible: a product whose name runs to two lines
 * pushed its price, its sizes and its Add to cart button down, so the two
 * cards beside each other had their buttons at different heights and the row
 * read as though something had gone wrong with it. One to a row, nothing was
 * ever beside anything, and it never showed.
 *
 * The picture and the words keep their own heights; the button is pushed to
 * the bottom of whichever card is taller. */
/* The column is left alone. Making it a flex container of its own fought
 * Bootstrap's own widths and pushed the front page 40px past a 375px phone —
 * a sideways scroll, and again only signed in as staff. A Bootstrap row is
 * already a flex row whose children stretch, so the card only has to fill the
 * height it is given. */
.shelfcol > .product__item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shelfcol > .product__item > .product__item__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.shelfcol > .product__item .quick-add,
.shelfcol > .product__item .sold-out {
    margin-top: auto;
}

/* A thumb is 44px, and the shop is used with one.
 *
 * The walk measured every control on every screen at 375 and found the most
 * pressed one in the whole shop — Add to cart, on every card — at 40px tall,
 * on fifty-one states. Below it: the cart's own plus and minus at 40, its
 * quantity box at 26, the checkout's "I will collect it" tick at 13x13, the
 * account's Save at 36 and Make it the usual at 21, the search box at 42, the
 * page numbers at 30, and every little round "?" at 28.
 *
 * 44px is the floor Apple and the WCAG both give, and every fashion app a
 * shopper has used respects it. Missing it by four pixels is not a rounding
 * error on a phone: it is the difference between a press that works and one
 * that lands on the card behind the button.
 *
 * Only real controls. A link inside a sentence — a breadcrumb, a word in a
 * paragraph — is read rather than aimed at, and padding those to 44px would
 * push sentences apart to no purpose.
 */
@media only screen and (max-width: 767px) {
    .quick-add__go,
    .quantity-form button,
    /* The stepper the shop actually draws: a script puts the arrows either
     * side of this box, and both they and the box are pressed with a thumb. */
    .pro-qty-2 input,
    .pro-qty-2 .qtybtn,
    .pro-qty input,
    .pro-qty .qtybtn,
    .getting__collect,
    .kept__name input,
    .shop__sidebar__search input,
    .shop__sidebar__search button,
    .kept__name button,
    .kept__link,
    .product__pagination a,
    .blog__item__text a,
    .pin__ask {
        min-height: 44px;
    }

    .product__pagination a {
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* A number somebody types into is aimed at as well as read. */
    .quantity-form input,
    .quantity__item input {
        min-height: 44px;
        min-width: 56px;
    }

    /* A tick box stays the size it looks, and the words beside it become the
     * target — which is what a person aims at anyway. "I will collect it from
     * the shop instead" was a 13x13 box on the checkout: the one control that
     * takes delivery off the order. */
    .getting__collect,
    label:has(> input[type="checkbox"]) {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
    }

    /* Every form in the account, where the smallest were Save at 36px and
     * Send it again at 38. */
    .kept form button,
    .account form button,
    .account__box form button,
    .orders-table td a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* And the one that was exactly on the floor: a primary button measured at
     * 44.0 and sometimes 43.98, which rounds to a press that misses. A pixel
     * of room costs nothing. */
    .primary-btn { min-height: 46px; }

    /* The round "?" keeps its drawn size and grows a margin of press around
     * it, so the page does not gain twenty-eight 44px circles. */
    .why__b {
        position: relative;
    }

    .why__b::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* The shopper's own "back to the order" link, which is a control rather than
 * a word in a sentence. The documents themselves carry their own stylesheet
 * and their own copy of this floor — see _sheet.html. */
@media only screen and (max-width: 767px) {
    .back-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* And the cart's own line controls, which is where somebody changes their
 * mind about how many — the last press before the money. */
@media only screen and (max-width: 767px) {
    .shopping__cart__table button,
    .shopping__cart__table input:not([type="hidden"]):not([type="checkbox"]) {
        min-height: 44px;
    }
}

/* And the same on the shopfront: the cart's stepper arrows were 40px across. */
@media only screen and (max-width: 767px) {
    .shopping__cart__table button,
    .pro-qty-2 .qtybtn,
    .pro-qty .qtybtn { min-width: 44px; }

    /* And the box that holds them, which was left at the width it is on a
     * desk while everything inside it was grown for a thumb.
     *
     * 80px, with an input forced to 56 and two arrows to 44: the line boxes
     * no longer fitted, so the arrows wrapped and the cart drew a stepper as
     * three separate things one under another — a left arrow on one line, the
     * number on the next, and the right arrow on a third beside the words HOW
     * MANY. Every part of it passed the 44px floor. The control did not exist.
     *
     * A flex row that is as wide as its contents, with a rule round it so the
     * three parts read as one press rather than three. The full selector
     * because the template's own stylesheet pins the width from six levels
     * down. */
    .shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty-2 {
        display: inline-flex;
        align-items: center;
        width: auto;
        border: 1px solid #e5e5e5;
    }

    /* A span is inline, and min-width and min-height do nothing to one. The
     * arrows were being measured at 44px by a sweep that reads the rule and
     * drawn at ten by the browser. */
    .pro-qty-2 .qtybtn,
    .pro-qty .qtybtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty-2 input {
        width: 56px;
    }

    /* Confirming an address, resending a letter — the account's own presses. */
    .confirm__again button,
    .account form button,
    form[action="/account/confirm/again"] button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* A policy page: type, and nothing else.
 *
 * Measured rather than full-width — a line of sixty-odd characters is what
 * anybody can read a page of, and a privacy policy set across 1440px is a
 * policy nobody finishes. */
.policy { max-width: 62ch; }
.policy p { margin-bottom: 16px; line-height: 1.8; color: #3d3d3d; }
.policy p:last-child { margin-bottom: 0; }

/* When it last changed. Quiet, and under the words rather than over them:
 * it is the first thing a regulator looks for and the last thing a shopper
 * needs. */
.policy__when {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
    color: #6a6a6a;
    font-size: 13px;
}