/*! Goldtop - the quick add plus on the product card rails. Every width.
    Paired with assets/gt-rec-add.js; read that file's header first.

    ==================================================================
    WHAT THIS FILE DOES.

    One control, five surfaces: Pairs well with, You may also like, Recently
    viewed, the collection grids and All Products. A 44x44 transparent button
    pinned to the bottom right corner of the product image, holding a near
    black square with a white plus. Tapping it adds a single variant product
    straight to the cart and opens the shared options sheet for anything with a
    choice in it.

    THE GEOMETRY IS COPIED, NOT DERIVED. Every number in the base control is
    the slide cart's upsell plus, measured from the live drawer on 22 Oct and
    recorded in claude/slidecart-upsell-restyle-and-rail-22oct.md: a 44x44
    transparent button at right 0 bottom 0 of the shot, holding a 28x28 #111
    square with a 12px plus stroked 1.6 in #FAFAFA. The hover and active values
    #26241F and #000000 are the same two the SEE ALL button uses. Re-deriving
    them would have produced a second, nearly identical control, which is the
    opposite of the point.

    ==================================================================
    THIS FILE USED TO STYLE A WORD, AND USED TO STOP AT 768px.

    It styled an outline button reading ADD, inside a @media (max-width: 768px)
    block, with a second block at min-width 769px hiding whatever the script had
    left behind when the viewport crossed over. BOTH ARE GONE, 25 Oct. The width
    gate has been removed from gt-rec-add.js in the same change, so there is
    nothing left to hide: with no gate there are no orphans to strand. Do not
    reintroduce either half without the other.

    It also used to carry a whole sheet - a scrim, a panel, a slide-up and a
    full-width copy of the slide cart's <select>. All of that has gone, because
    the sheet has gone: gt-rec-add.js calls the shared sheet in
    assets/gt-sheet.js, dressed by assets/gt-slidecart-size.css.

    ==================================================================
    MEASURED, NOT ASSUMED.

    .grid-product__link CARRIES A ::after AT INSET 0 WITH z-index 1, blanketing
    the whole card so that any click anywhere on it navigates. That is why
    z-index: 2 below is load bearing and why the script's handler runs in the
    capture phase - either one alone is not enough. The swatch row
    (.gt-rec-swatches) carries the identical pair of declarations for the
    identical reason, and the ADD button that preceded this one was painted
    underneath that overlay until it did.

    THE MASK IS A SIBLING OF THE ANCHOR ON FOUR SURFACES AND A CHILD OF IT ON
    ONE. In snippets/product-grid-item.liquid, .grid-product__image-mask sits
    inside .grid__item-image-wrapper NEXT TO a.grid-product__link, so the
    control is outside the anchor entirely and the overlay never covers it. In
    snippets/recently-viewed-product-template.liquid - a hand written
    Handlebars card, not the shared snippet - the mask is INSIDE the anchor.
    The same control works on both, for two different reasons, and the one that
    matters on Recently viewed is the z-index. Verify there first after any
    change to this file.

    .grid-product__image-mask IS GIVEN position: relative HERE, EXPLICITLY. The
    theme very probably sets it already - .quick-product__btn is positioned
    inside it in stock Impulse - but assets/theme.css is 763,527 bytes and
    cannot be read through the theme file connector, so that is an inference
    and not a measurement. Declaring it costs one rule and removes the guess.
    If the theme does set it, this is a harmless duplicate.

    QUICK SHOP IS OFF. settings.quick_shop_enable is false store wide, so
    nothing else occupies the image area and the corner is ours. IF IT IS EVER
    SWITCHED ON, .quick-product__btn renders inside this same mask as a bar
    along the BOTTOM of the image and the two will collide. The fix at that
    point is to move the plus to the top right rather than to fight the bar;
    do not simply raise the z-index and leave them overlapping.

    ==================================================================
    WHY IT IS HIDDEN AT REST ABOVE 768px, FROM THE DESIGN REVIEW.

    On a phone the rails are two or three cards wide and the plus is the only
    affordance there is, so it is always visible. On a desktop collection grid
    there are up to twenty cards on screen at once, and twenty black squares at
    rest turns a wall of leather into a wall of interface. That matters more
    here than it would elsewhere: the argument the brand makes is that these
    jackets have not needed to change since 1951, and the page has to look like
    it believes that. The control earns its place on hover.

    Revealed on :hover AND :focus-within OF THE WHOLE .grid-product, not of the
    image. A control that only appears on hover is unreachable by keyboard
    unless focus reveals it too, and focus lands on the card's own link before
    it reaches the button. Hiding with opacity rather than display or
    visibility keeps it in the tab order and hit-testable throughout.

    The 80ms delay is ON THE WAY OUT ONLY. Dragging a mouse diagonally across a
    grid crosses four or five cards in a few hundred milliseconds; without the
    delay each one flashes a square and the row strobes. Appearing is instant,
    because a control that lags the pointer feels broken.

    PURE ASCII, working rule 18.
*/.grid-product__image-mask{position:relative}.gt-rec-add{position:absolute;z-index:2;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;display:flex;align-items:flex-end;justify-content:flex-end;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}.gt-rec-add:after{content:"";display:block;width:28px;height:28px;background-color:#111;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%201v10M1%206h10%22%20stroke%3D%22%23FAFAFA%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:center center;background-size:12px 12px;box-shadow:-1px 0 #fff,0 -1px #fff;transition:background-color .15s ease,transform .12s ease}.gt-rec-add:hover:after,.gt-rec-add:focus-visible:after{background-color:#26241f}.gt-rec-add:active:after{background-color:#000;transform:scale(.94)}.gt-rec-add:focus-visible{outline:1px solid #111111;outline-offset:2px}@media screen and (max-width:768px){.gt-rec-add{right:0;bottom:0;opacity:1}.gt-rec-add:after{width:28px;height:28px;background-size:12px 12px}}@media screen and (min-width:769px){.gt-rec-add{right:8px;bottom:8px;opacity:0;transition:opacity .12s ease 80ms}.grid-product:hover .gt-rec-add,.grid-product:focus-within .gt-rec-add{opacity:1;transition-delay:0ms}.gt-rec-add:focus,.gt-rec-add:focus-visible{opacity:1;transition-delay:0ms}.gt-rec-add:after{width:32px;height:32px;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20d%3D%22M7%201.5v11M1.5%207h11%22%20stroke%3D%22%23FAFAFA%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E);background-size:14px 14px}}.gt-rec-add.is-busy:after{background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%225.6%22%20fill%3D%22none%22%20stroke%3D%22%23FAFAFA%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2226.4%208.8%22%2F%3E%3C%2Fsvg%3E);background-size:14px 14px;animation:gt-rec-add-spin .7s linear infinite}.gt-rec-add.is-busy{cursor:default}@keyframes gt-rec-add-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.gt-rec-add.is-busy:after{animation:none}.gt-rec-add:after{transition:none}}.grid-product__meta{position:relative}.gt-rec-add__err{position:absolute;left:0;bottom:0;z-index:3;display:block;max-width:100%;font-family:"Jost",var(--gt-font-body, inherit);font-size:12px;font-weight:400;line-height:1.3;letter-spacing:.3px;text-align:left;color:#7a756c;pointer-events:none}.gt-rec-add--meta{position:relative;right:auto;bottom:auto;width:28px;height:28px;margin:10px 0 2px;opacity:1}.gt-rec-add--meta:after{width:28px;height:28px;background-size:12px 12px}.gt-sc-sheet.gt-sheet--centred .gt-sc-sheet__panel{transition:none!important}@media screen and (min-width:769px){.gt-sc-sheet.gt-sheet--centred .gt-sc-sheet__panel{bottom:auto!important;left:50%!important;right:auto!important;top:50%!important;width:min(500px,calc(100vw - 48px))!important;max-height:calc(100vh - 48px)!important;overflow-y:auto!important}.gt-sc-sheet.gt-sheet--centred.is-open .gt-sc-sheet__panel{transform:translate(-50%,-50%)!important}}product-recommendations[data-intent=complementary] .gt-rec-add{width:36px!important;height:36px!important}@media screen and (max-width:768px){product-recommendations[data-intent=complementary] .gt-rec-add{right:0!important;bottom:0!important}product-recommendations[data-intent=complementary] .gt-rec-add:after{width:20px!important;height:20px!important;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%3E%3Cpath%20d%3D%22M4.5%201v7M1%204.5h7%22%20fill%3D%22none%22%20stroke%3D%22%23FAFAFA%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E)!important;background-size:9px 9px!important}}@media screen and (min-width:769px){product-recommendations[data-intent=complementary] .gt-rec-add{right:0!important;bottom:0!important}product-recommendations[data-intent=complementary] .gt-rec-add:after{width:22px!important;height:22px!important;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20d%3D%22M5%201v8M1%205h8%22%20fill%3D%22none%22%20stroke%3D%22%23FAFAFA%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E)!important;background-size:10px 10px!important}}product-recommendations[data-intent=complementary] .gt-rec-add.is-busy:after{background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223.9%22%20fill%3D%22none%22%20stroke%3D%22%23FAFAFA%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2218.4%206.1%22%2F%3E%3C%2Fsvg%3E)!important;background-size:10px 10px!important}@media screen and (min-width:769px){html.gt-sheet-open:not(:has(.slidecarthq-overlay.open)) body,html.gt-sc-sheet-open:not(:has(.slidecarthq-overlay.open)) body{padding-right:var(--gt-sbw, 0px)!important}}
/*# sourceMappingURL=/cdn/shop/t/70/assets/gt-rec-add.css.map */
