/*! Goldtop - "Change size or colour?" inside the slide cart. Every width.
    Paired with assets/gt-slidecart-size.js; read that file's header first.

    THE LINK IS DELIBERATELY QUIET. It sits on the line's existing variant row,
    beside "S - 7.5" - Black", in the same muted ink and the same small caps as
    that statement. It is an offer, not a call to action - the only button in
    the drawer that should shout is CHECKOUT. Underlined, because in a row of
    plain text nothing else says "this is tappable".

    IT COSTS 25px, AGAINST THE 37px THE DROPDOWN COST - measured on the gloves
    line at 375px: 167px with no control at all, 204px with the dropdown, 192px
    with this. The first attempt put it inside the line's own variant paragraph,
    on the same row as "S - 7.5" - Black". That worked until the variant name
    got longer: the app gives .variants-p `white-space: nowrap; overflow:
    hidden; text-overflow: ellipsis`, so a long name does not wrap, it CLIPS -
    and the link disappeared behind "Waxed Brown...". Beating that needs
    !important on three properties of an element the app owns and re-renders on
    every cart change. Not worth the fragility for 19px, so the link takes its
    own line.

    IT IS A SPAN, NOT A BUTTON. The app forces display:flex onto its buttons
    with !important, which is block-level, so a real <button> jumped to its own
    line however it was styled - measured, the paragraph went 21px to 47px and
    the row grew 19px. Hence role="button" and tabindex on a span, the same
    pattern the PDP card swatches already use, with the keyboard handling the
    span does not get for free.

    EVERY RULE ON THE LINK IS PREFIXED WITH #slidecarthq. The app styles its own
    controls through an id-scoped selector, specificity (1,0,1), which beats a
    bare class at (0,1,0) on every property it declares - learned the hard way
    on 26 Sep, when the first size control shipped 23px tall with no border
    because only `appearance` had survived. #slidecarthq plus the class is
    (1,1,0) and wins cleanly. The sheet itself is appended to <body>, outside
    the app's subtree, so its rules need no such help - with one exception,
    noted on .gt-sc-val.

    ------------------------------------------------------------------
    27 Sep, SECOND PASS: THE CONTROLS ARE THE PDP'S, COPIED OFF THE LIVE PAGE.

    The first pass invented a treatment - 42px chips filled dark when selected,
    36px swatches, .42 opacity for anything unbuyable, a corner-to-corner
    strike. It read well on its own and it did not match the product page, and
    Joe's instruction was that it should: "the interactions and colouring /
    transparency settings etc should match what the normal PDP for a product
    has, where there is a strikethrough on out of stock variants".

    So every value below was read off the running PDP at 375px - computed
    styles for geometry, then the authored declarations out of
    gt-pdp-v2.css / p5 / p7 / p8 / p9 for intent - rather than chosen. The PDP
    controls are .gt-chip and .gt-swatchchip inside .gt-bar2__panel. What they
    turn out to be:

      ROW        grid, max(20%, 56px) 1fr - the label sits in a column to the
                 LEFT of the controls, not above them. At 375px that column
                 lands at 68.6px and leaves 274.4px for the rail.
      LABEL      10.5px / 600, .14em, uppercase, #7A756C.
      SIZE RAIL  grid, repeat(auto-fill, minmax(64px, 1fr)), 4px gap. Four
                 columns at 375px, 65.6px each.
      CHIP       min-height 40px, padding 5px 6px, inline-flex COLUMN with a
                 1px gap, 1px solid rgba(0,0,0,.06), white, #26241F, 10px,
                 line-height 1.05, break-word. Not a pill, not centred by
                 accident - the column is there because the PDP stacks a price
                 delta under the value.
      CHIP ON    background AND border #0F0F0F, text white.
      CHIP GONE  text #7A766C, ring #E8E8E1, white ground, and the strike is a
                 linear-gradient BACKGROUND confined to a 24x24 box centred in
                 the chip - which is why it never runs out past the corner the
                 way the hand-rolled inset:0 version did.
      COLOUR RAIL  flex, wrap, 8px gap.
      SWATCH     26x26, 1px solid rgba(38,36,31,.12), background-clip
                 padding-box, cover, square.
      SWATCH ON  2px solid #26241F plus an inset 1.5px white hairline.

    NO OPACITY ANYWHERE. The PDP marks unavailability with colour, ring and
    strike and leaves opacity at 1 throughout. Copying that also disposes of
    the bug the first pass had, where a selected value that was also sold out
    carried both classes and came out grey.

    ------------------------------------------------------------------
    THE ONE PLACE THIS DOES NOT COPY THE PDP, AND WHY.

    A sold-out colour swatch on the live PDP has NO marking at all. That is a
    bug in the PDP rather than a decision, and the evidence is in the PDP's own
    files:

      gt-pdp-v2-p5.css declares  html.gt-v2 .gt-swatchchip.is-off:after
      with a white 92% diagonal across the swatch - the swatch equivalent of
      the chip's strike.

      gt-pdp-v2-x.js then runs markGone(), which walks every .gt-chip AND
      .gt-swatchchip and RENAMES is-off to is-gone.

      gt-pdp-v2-p8.css was updated to follow the rename for .gt-chip. Nothing
      was ever added for .gt-swatchchip, so that ::after now matches nothing
      and sold-out colours have been rendering unmarked.

    Verified on the Predator at 375px: at size M, four of the six colours carry
    is-gone and all six look identical. So this file implements the treatment
    the PDP intended - p5's declaration, verbatim, keyed to is-gone - and the
    PDP needs the same one-line addition to agree with it.

    ------------------------------------------------------------------
    WHICH VALUES GET MARKED, copied from the PDP's own asymmetry.

    Confirmed by driving the live bar through four states and reading the
    classes back, not by reading the code:

      THE SIZE RAIL IS JUDGED AGAINST THE WHOLE PRODUCT. On the Predator only
      L is marked, in every state, because L is the one size sold out in all
      six colours. M is sold out in Black and is NOT marked while Black is
      selected.

      EVERY OTHER RAIL IS JUDGED AGAINST THE CURRENT SELECTION. The colour
      swatches re-mark on every size change: four gone at M, three at XXL, two
      at S, each matching the storefront exactly.

    That asymmetry is what makes the rail useful rather than pedantic - size is
    the axis the shopper has already decided, so it stays still, and colour is
    the one they are shopping. The sheet reproduces it: an option whose name
    contains "size" is judged product-wide, everything else against the
    selection. The note under the rails and the disabled button carry the rest.

    ------------------------------------------------------------------
    28 Sep, DESKTOP. Joe: "roll out on web the change style/colour? question
    link and also the button / swatches for the you may also like products -
    both on the slide cart on web".

    So this file is no longer one mobile-only block. It is now three parts, and
    the split is the whole point:

      MOBILE ONLY   the cart line itself - its image, and since 28 Sep the
                    height of the text column beside it. Every figure in both
                    was measured against a 375px drawer - the 30% clamp, the
                    84..112px band, the 110px cliff where the title wraps, the
                    46px the text column stood proud of the image - and none of
                    that arithmetic holds in a 500px drawer. Desktop cart lines
                    were never complained about and are deliberately left
                    exactly as the app renders them.

      ALL WIDTHS    the "Change size or colour?" link, and the whole sheet.
                    These are what Joe asked to roll out.

      DESKTOP ONLY  where the sheet sits. At the bottom of the file.

    THE SHEET TAKES THE CART'S COLUMN, NOT THE SCREEN'S WIDTH. Measured with
    the drawer open: it is 500px wide, position fixed, right: 0, at every
    viewport above the breakpoint. A bottom sheet spanning 1440px to change one
    glove's size would read as a page-level modal rather than as part of the
    cart it belongs to. So above 768px the panel is pinned to the right and
    takes the drawer's width.

    500px IS A FALLBACK, NOT AN ASSUMPTION. It is the app's current setting and
    a merchant can change it, so the JavaScript measures the open drawer and
    writes --gt-sheet-w; this file only supplies the default for the case where
    there is no drawer to measure.

    The scrim still covers the whole viewport, which is what dims the cart
    lines above the sheet - see the .62 note below.

    PURE ASCII, working rule 18.
*/@media screen and (max-width:768px){#slidecarthq .item-container{align-items:flex-start}#slidecarthq .item-image-anchor{flex:0 0 clamp(84px,30%,112px)!important;width:clamp(84px,30%,112px)!important;height:auto!important;aspect-ratio:auto!important;align-self:center}#slidecarthq .item-image-anchor img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}#slidecarthq .item .main-bottom{flex-direction:row!important;align-items:center!important}#slidecarthq .item .main-top-left{gap:6px!important}#slidecarthq .item .main{gap:8px!important}}#slidecarthq .gt-sc-change{display:inline-block;align-self:flex-start;margin:-10px 0 0;padding:6px 0;border:0;background:transparent;color:#7a756c;font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1;text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}#slidecarthq .gt-sc-change:active{color:#26241f}.gt-sc-sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;--gt-ink: #26241F;--gt-btn: #0F0F0F;--gt-muted: #7A756C;--gt-line: rgba(0, 0, 0, .06);--gt-gone: #7A766C;--gt-gone-ring: #E8E8E1;--gt-brass: #CEA66A;--gt-s1: 4px;--gt-s2: 8px;--gt-s3: 12px;--gt-s7: 40px}.gt-sc-sheet[hidden]{display:none}.gt-sc-sheet:not(.is-open){pointer-events:none}.gt-sc-sheet.is-open{pointer-events:auto}.gt-sc-sheet__scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:#1111119e;opacity:0;transition:opacity .25s ease}.gt-sc-sheet.is-open .gt-sc-sheet__scrim{opacity:1}.gt-sc-sheet__panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;background:#fff;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:85vh;transform:translateY(100%);transition:transform .25s ease}.gt-sc-sheet.is-open .gt-sc-sheet__panel{transform:translateY(0)}.gt-sc-sheet__close{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:6px;border:0;background:transparent;color:var(--gt-ink);cursor:pointer;-webkit-appearance:none;appearance:none}.gt-sc-sheet__close svg{display:block;width:100%;height:100%}.gt-sc-sheet__head{flex:0 0 auto;display:flex;align-items:center;gap:var(--gt-s3);margin:0 40px 12px 0}.gt-sc-sheet__thumb{flex:0 0 84px;width:84px;background:#f2f0ef;overflow:hidden}.gt-sc-sheet__img{display:block;width:100%;height:auto}.gt-sc-sheet__title{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--gt-ink)}.gt-sc-sheet__sum{display:block;margin:4px 0 0;font-size:12px;letter-spacing:.06em;line-height:1.4;color:var(--gt-ink)}.gt-sc-sheet__opts{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:var(--gt-s3);padding-top:var(--gt-s3);border-top:1px solid var(--gt-line);scrollbar-width:none;-ms-overflow-style:none}.gt-sc-sheet__opts::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.gt-sc-sheet__row{display:grid;grid-template-columns:max(20%,56px) 1fr;align-items:start;min-width:0}.gt-sc-sheet__row>*{min-width:0}.gt-sc-sheet__label{align-self:center;display:block;padding-right:var(--gt-s2);font-size:10.5px;font-weight:600;letter-spacing:.14em;line-height:1.25;text-transform:uppercase;color:var(--gt-muted);overflow-wrap:break-word}.gt-sc-sheet__vals{align-self:center}.gt-sc-sheet__vals--chip{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--gt-s1)}.gt-sc-sheet__vals--swatch{display:flex;flex-wrap:wrap;gap:var(--gt-s2)}.gt-sc-val{position:relative;box-sizing:border-box;margin:0;padding:0;border-radius:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}.gt-sc-val--chip{display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;min-width:0;min-height:var(--gt-s7);padding:5px 6px;background:#fff;border:1px solid var(--gt-line);color:var(--gt-ink);font-size:10px;font-weight:400;letter-spacing:.25px;line-height:1.05;overflow-wrap:break-word;transition:border-color .12s,background-color .12s,color .12s}.gt-sc-val--chip.is-on{background:var(--gt-btn);border-color:var(--gt-btn);color:#fff}.gt-sc-sheet .gt-sc-val--chip small{display:block;margin:0;padding:0;font-size:8px;font-weight:600;line-height:1.05;letter-spacing:.18px;color:var(--gt-brass)}.gt-sc-sheet .gt-sc-val--chip.is-gone small{color:var(--gt-gone)}.gt-sc-sheet__sum small{display:inline;margin:0;padding:0;font-size:inherit;font-weight:600;letter-spacing:inherit;white-space:nowrap;color:var(--gt-brass)}.gt-sc-val--chip.is-gone{background-color:#fff;background-repeat:no-repeat;background-position:center center;background-size:24px 24px;background-image:linear-gradient(to bottom right,transparent calc(50% - .5px),var(--gt-gone) calc(50% - .5px),var(--gt-gone) calc(50% + .5px),transparent calc(50% + .5px));border-style:solid;border-color:var(--gt-gone-ring);color:var(--gt-gone)}.gt-sc-val--chip.is-gone.is-on{border-color:var(--gt-btn);box-shadow:0 0 0 1px var(--gt-btn)}.gt-sc-val--swatch{display:inline-block!important;flex:0 0 26px;width:26px;height:26px;background-color:#f2f0ef;background-clip:padding-box;background-position:center;background-size:cover;border:1px solid rgba(38,36,31,.12);box-shadow:none}.gt-sc-val--swatch.is-on{border:2px solid var(--gt-ink);box-shadow:inset 0 0 0 1.5px #fff}.gt-sc-val--swatch.is-gone:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(255,255,255,.92) calc(50% - .5px),rgba(255,255,255,.92) calc(50% + .5px),transparent calc(50% + .5px))}.gt-sc-val--swatch:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px}.gt-sc-sheet__note{flex:0 0 auto;margin:12px 0 10px;min-height:1.35em;font-size:12px;line-height:1.35;color:var(--gt-muted)}.gt-sc-sheet__go{flex:0 0 auto;display:block;width:100%;margin-top:2px;padding:0 16px;height:48px;border:0;border-radius:0;background:var(--gt-btn);color:#fff;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none}.gt-sc-sheet__go[disabled]{background:#e8e8e6;color:var(--gt-muted);cursor:default}html.gt-sc-sheet-open,html.gt-sc-sheet-open body{overflow:hidden}@media screen and (min-width:769px){.gt-sc-sheet__panel{left:auto;right:0;width:min(var(--gt-sheet-w, 500px),100vw)}}
/*# sourceMappingURL=/cdn/shop/t/62/assets/gt-slidecart-size.css.map */
