/** Shopify CDN: Minification failed Line 373:2 Unexpected "%" Line 378:2 Unexpected "%" Line 385:2 Unexpected "%" **/ /* ============================================================ AmenTee — Sticky Add to Cart restyle Desktop: centered 780px floating card (not a full-width band) Mobile: single row with a labelled button (no icon-only collapse) Retuned from the AllegedTee build for a 55+ audience: larger type, bigger thumbnail, taller CTA, and the word "ADD TO CART" kept on mobile rather than reduced to a bag glyph. Every rule is scoped under .content-container:has(.sticky-atc-button) — specificity 0,3,0. Your sticky bar section emits its own CSS in the , which loads after anything in ; at equal specificity the later rule wins, so plain class selectors here would lose. The :has() guard also keeps these rules off any other .content-container in the theme, since that class name is generic. INSTALL 1. Assets > Add a new asset > upload this file 2. layout/theme.liquid, just before : {{ 'amb-sticky-atc.css' | asset_url | stylesheet_tag }} ============================================================ */ :root { --amb-atc-max: 780px; --amb-atc-radius: 16px; --amb-atc-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08); --amb-atc-ink: #1a2238; /* navy */ --amb-atc-muted: #5a5f6e; --amb-atc-strike: #8b8f9a; --amb-atc-sep: #c6c9d1; --amb-atc-thumb: 62px; --amb-atc-thumb-mobile: 56px; } /* ---- Neutralise the fixed shell so only the card is visible ---- */ .sticky-atc, *:has(> .content-container > .atc-button-container) { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; pointer-events: none; } /* ---- The card ---- */ .content-container:has(.sticky-atc-button) { position: relative !important; pointer-events: auto; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 16px !important; width: min(var(--amb-atc-max), calc(100% - 32px)) !important; max-width: var(--amb-atc-max) !important; margin: 0 auto 16px !important; padding: 10px 10px 10px 12px !important; background: #fff !important; border-radius: var(--amb-atc-radius) !important; box-shadow: var(--amb-atc-shadow); } /* ---- Which block shows at which breakpoint ---- */ .content-container:has(.sticky-atc-button) .sticky-atc-mobile { display: none !important; } .content-container:has(.sticky-atc-button) .sticky-atc-desktop { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; column-gap: 14px !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-desktop .sticky-atc-image { grid-area: 1 / 1 / 3 / 2; } .content-container:has(.sticky-atc-button) .sticky-atc-desktop .sticky-atc-title { grid-area: 1 / 2 / 2 / 3; min-width: 0; } .content-container:has(.sticky-atc-button) .sticky-atc-desktop .sticky-atc-variants { grid-area: 2 / 2 / 3 / 3; min-width: 0; } .content-container:has(.sticky-atc-button) .sticky-atc-desktop .sticky-atc-price { grid-area: 1 / 3 / 3 / 4; justify-self: end; } /* ---- Thumbnail ---- */ .content-container:has(.sticky-atc-button) .sticky-atc-image { flex: 0 0 auto !important; line-height: 0 !important; margin: 0 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-image img { display: block !important; width: var(--amb-atc-thumb) !important; height: var(--amb-atc-thumb) !important; object-fit: cover !important; border-radius: 8px !important; background: #f4f4f4 !important; } /* ---- Title ---- */ .content-container:has(.sticky-atc-button) .sticky-atc-title-desktop, .content-container:has(.sticky-atc-button) .sticky-atc-title-mobile { display: block !important; margin: 0 !important; font-size: 16px !important; line-height: 1.25 !important; font-weight: 600 !important; color: var(--amb-atc-ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ---- Variant line: "Natural / S" ---- */ .content-container:has(.sticky-atc-button) .sticky-atc-variants { margin: 0; } .content-container:has(.sticky-atc-button) .sticky-atc-active-variant { display: flex !important; align-items: baseline !important; gap: 8px !important; min-width: 0 !important; overflow: hidden !important; } .content-container:has(.sticky-atc-button) .sticky-atc-active-variant__option { display: flex !important; align-items: baseline !important; gap: 4px !important; margin: 0 !important; font-size: 15px !important; line-height: 1.3 !important; color: var(--amb-atc-muted) !important; white-space: nowrap !important; } /* Labels dropped for the compact look. Delete this rule to bring "Color:" and "Size:" back — the "/" separator below goes with it. */ .content-container:has(.sticky-atc-button) .sticky-atc-active-variant__option-name { display: none !important; } .content-container:has(.sticky-atc-button) .sticky-atc-active-variant__option + .sticky-atc-active-variant__option::before { content: "/"; color: var(--amb-atc-sep) !important; } /* ---- Price: sale figure first, compare-at after ---- */ .content-container:has(.sticky-atc-button) .sticky-atc-price, .content-container:has(.sticky-atc-button) .sticky-atc-price .price, .content-container:has(.sticky-atc-button) .sticky-atc-price .price__container { margin: 0 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-price .price__sale { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; align-items: baseline !important; gap: 8px !important; white-space: nowrap !important; } .content-container:has(.sticky-atc-button) .sticky-atc-price .price-item--sale { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 0; } .content-container:has(.sticky-atc-button) .sticky-atc-price s.price-item { font-size: 15px !important; font-weight: 400 !important; color: var(--amb-atc-strike) !important; } .content-container:has(.sticky-atc-button) .sticky-atc-price .price:not(.price--on-sale) .price-item--regular { font-size: 19px !important; font-weight: 700 !important; color: var(--amb-atc-ink) !important; } /* ---- CTA ---- */ .content-container:has(.sticky-atc-button) .atc-button-container { flex: 0 0 auto !important; margin: 0 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; min-width: 0 !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding: 0 28px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .04em; box-shadow: none; transition: transform .08s ease-out, filter .08s ease-out; -webkit-tap-highlight-color: transparent; } .content-container:has(.sticky-atc-button) .sticky-atc-button::after { box-shadow: none; } /* Press feedback — Dawn's button has almost none, which on a sticky bar reads as "nothing happened". */ .content-container:has(.sticky-atc-button) .sticky-atc-button:active { transform: scale(.96); filter: brightness(.88); } .content-container:has(.sticky-atc-button) .sticky-atc-button:focus-visible { outline: 3px solid var(--amb-atc-ink); outline-offset: 2px; } /* ============================================================ Size gate states — paired with assets/amb-sticky-atc.js ============================================================ */ /* "Choose a size" replaces the stale default size while no size is picked */ .content-container:has(.sticky-atc-button) .sticky-atc-active-variant__option[data-amb-prompt] .sticky-atc-active-variant__option-value { padding: 1px 8px !important; border-radius: 999px !important; background: #e8a87c !important; color: #1a2238 !important; font-weight: 700 !important; } /* No "/" before a prompt chip — it reads as a value, not an option */ .content-container:has(.sticky-atc-button) .sticky-atc-active-variant__option[data-amb-prompt]::before { content: none; } /* Message sits above the bar, where the thumb already is */ .content-container:has(.sticky-atc-button) .amb-atc-gate-msg { position: absolute !important; bottom: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; width: fit-content !important; max-width: 100% !important; padding: 8px 14px !important; background: #1a1a1a !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); animation: amb-atc-msg-in .22s ease-out; } .content-container:has(.sticky-atc-button) .amb-atc-gate-msg[hidden] { display: none !important; } @keyframes amb-atc-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes amb-atc-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(7px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(4px); } 80% { transform: translateX(-2px); } } .content-container.amb-atc-shake:has(.sticky-atc-button) { animation: amb-atc-shake .45s ease-out; } /* ============================================================ Mobile — two tight rows, labelled button ============================================================ */ @media screen and (max-width: 749px) { .content-container:has(.sticky-atc-button) { width: calc(100% - 16px) !important; margin-bottom: 8px; padding: 8px !important; border-radius: 14px !important; gap: 10px !important; } .content-container:has(.sticky-atc-button) .sticky-atc-desktop { display: none !important; } /* Three columns: thumbnail, text, price. display:contents on both wrappers dissolves them so the image, title, variants and price all become grid items of .sticky-atc-mobile. The price sits beside the title on row 1 and the variant line gets the full width of row 2. With a labelled button (rather than AT's icon), "Black / Choose a size" and two price figures cannot share one line on a 390px screen — they collide. This splits them. */ /* Three text rows beside the thumbnail: title, variant line, price. Measured against a 360-414px viewport, the variant line carrying the "Choose a size" chip needs ~160px and the price ~110px — they cannot share a row with a labelled button present, at any button width. Both wrappers are dissolved with display:contents so title, variants and price all become grid items of .sticky-atc-mobile. */ .content-container:has(.sticky-atc-button) .sticky-atc-mobile { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; column-gap: 10px !important; row-gap: 1px !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile-flex, .content-container:has(.sticky-atc-button) .sticky-atc-mobile-content { display: contents !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-image { grid-area: 1 / 1 / 4 / 2 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-title-mobile { grid-area: 1 / 2 / 2 / 3 !important; font-size: 15px !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-variants { grid-area: 2 / 2 / 3 / 3 !important; min-width: 0 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-price { grid-area: 3 / 2 / 4 / 3 !important; min-width: 0 !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-image img { width: var(--amb-atc-thumb-mobile) !important; height: var(--amb-atc-thumb-mobile) !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-active-variant__option { font-size: 12px !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-active-variant__option[data-amb-prompt] .sticky-atc-active-variant__option-value { padding: 1px 6px !important; } /* "Military Green" plus the chip exceeds a 360px column. The colour name gives way with an ellipsis; the chip never shrinks, because it is the instruction the visitor needs to read. */ %(P)s .sticky-atc-mobile .sticky-atc-active-variant__option { min-width: 0 !important; flex: 0 1 auto !important; } %(P)s .sticky-atc-mobile .sticky-atc-active-variant__option-value { display: block !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } %(P)s .sticky-atc-mobile .sticky-atc-active-variant__option[data-amb-prompt] { flex: 0 0 auto !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-price .price-item--sale { font-size: 15px !important; } .content-container:has(.sticky-atc-button) .sticky-atc-mobile .sticky-atc-price s.price-item { font-size: 13px !important; } /* Keep a readable label rather than collapsing to an icon — this audience skews 55+, and a bare bag glyph is a guess for many. The label shrinks instead, and the title/price give up width first. */ /* The label wraps to two lines so the button takes ~90px instead of ~150px. Full words rather than a bag glyph, which matters for this audience, without eating the row the price and variants need. */ .content-container:has(.sticky-atc-button) .sticky-atc-button { width: auto !important; max-width: 96px !important; height: 48px !important; min-height: 48px !important; padding: 0 10px !important; font-size: 13px !important; line-height: 1.15 !important; letter-spacing: 0 !important; white-space: normal !important; text-align: center !important; } .content-container:has(.sticky-atc-button) .sticky-atc-button > .loading__spinner { display: none !important; } .content-container:has(.sticky-atc-button) .sticky-atc-title-mobile { font-size: 15px !important; } } /* ============================================================ Size picker callout — applied by the JS after scrolling there, so the ask is visible the moment the visitor arrives. This sits on the product form, outside the sticky bar. ============================================================ */ .product-form__input.amb-atc-size-callout, fieldset.amb-atc-size-callout { position: relative; border-radius: 10px; animation: amb-atc-callout 1.1s ease-out 2; } .product-form__input.amb-atc-size-callout > legend, fieldset.amb-atc-size-callout > legend { color: #111; font-weight: 700; } @keyframes amb-atc-callout { 0% { box-shadow: 0 0 0 0 rgba(232, 168, 124, .9), 0 0 0 0 rgba(232, 168, 124, .5); background: rgba(232, 168, 124, .18); } 70% { box-shadow: 0 0 0 4px rgba(232, 168, 124, .9), 0 0 0 14px rgba(232, 168, 124, 0); background: rgba(232, 168, 124, .10); } 100% { box-shadow: 0 0 0 4px rgba(232, 168, 124, 0), 0 0 0 14px rgba(232, 168, 124, 0); background: rgba(232, 168, 124, 0); } } @media (prefers-reduced-motion: reduce) { .product-form__input.amb-atc-size-callout, fieldset.amb-atc-size-callout { animation: none; box-shadow: 0 0 0 3px #e8a87c; } } /* ============================================================ Add-to-cart feedback on the sticky button ============================================================ */ /* Spinner while the add is in flight. Text goes transparent rather than display:none so the button keeps its width and doesn't jump. */ .content-container:has(.sticky-atc-button) .sticky-atc-button.amb-atc-loading { position: relative !important; color: transparent !important; background-image: none !important; pointer-events: none; cursor: default; } /* Centred by absolute offsets, not by flex. Themes routinely give .button::before its own absolute box (inset:0 hover fills), which this pseudo-element would otherwise inherit and land top-left. Margins do the centring rather than translate(-50%,-50%), because transform is already spoken for by the spin. */ .content-container:has(.sticky-atc-button) .sticky-atc-button.amb-atc-loading::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; width: 20px !important; height: 20px !important; margin: -10px 0 0 -10px !important; padding: 0 !important; box-sizing: border-box !important; border: 2.5px solid rgba(255, 255, 255, .35) !important; border-top-color: #fff !important; border-radius: 50% !important; background: none !important; box-shadow: none !important; opacity: 1 !important; animation: amb-atc-spin .6s linear infinite; } @keyframes amb-atc-spin { to { transform: rotate(360deg); } } /* Brief tick once the item is in the cart */ .content-container:has(.sticky-atc-button) .sticky-atc-button.amb-atc-added { color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; } @media (prefers-reduced-motion: reduce) { .content-container:has(.sticky-atc-button) .sticky-atc-button.amb-atc-loading::before { animation-duration: 1.4s; } } /* ---- Optional: stop the bar covering the last of the page. Uncomment if the footer feels cramped underneath it. body:has(.sticky-atc-button) { padding-bottom: 96px; } @media screen and (max-width: 749px) { body:has(.sticky-atc-button) { padding-bottom: 76px; } } ------------------------------------------------------------ */