/** Shopify CDN: Minification failed Line 324:0 Unexpected "}" **/ /* Monster Arc: site-wide tweaks (from 8 Nov 2026). Loaded on every page, after monster-arc-buttons.css. */ /* 1. Homepage hero collection stack: the covers are links, and Drop gives every link a 24px bottom margin. The back two covers are pinned to the front one's box, so that margin cut 24px off their frames and the picture covered their bottom border. */ html .ma-hero__fan-card { margin: 0; } /* 2. Books peeking from the collection header: Drop's header parallax zoomed every header image to 120% and moved it, so the covers were cropped and sat off-centre in their frames. Covers now fit their frames, like the hero and menu stacks. */ html .ma-peek__book img { transform: none !important; } /* 3. Your wall pins (8 Nov 2026, assets/ma-wall.js). A pin on every product card picture, a 'Pin to your wall' button on product pages and in the showcase viewer, and a short note at the bottom of the screen. */ html .ma-pin{display:inline-flex;align-items:center;justify-content:center;gap:var(--ma-sp-8);padding:0;border:var(--ma-edge);background:var(--ma-card);color:var(--ma-ink);cursor:pointer;line-height:var(--ma-lh-solid);transition:transform var(--ma-ease),box-shadow var(--ma-ease),background-color var(--ma-ease);} html .ma-pin .ma-pin__fill{transition:fill var(--ma-ease);} html .ma-pin[aria-pressed="true"]{background:var(--ma-yellow);} html .ma-pin:focus-visible{outline:var(--ma-focus-ring);outline-offset:2px;} html .ma-pin.is-pop svg{animation:ma-pin-pop var(--ma-settle);} @keyframes ma-pin-pop{0%{transform:scale(1)}40%{transform:scale(1.4) rotate(-18deg)}100%{transform:scale(1)}} html .ma-pin--card{position:absolute;top:8px;right:8px;z-index:4;width:36px;height:36px;box-shadow:var(--ma-shadow-ink-2);} html .ma-pin--page,html .ma-pin--viewer{min-height:40px;padding:var(--ma-sp-6) var(--ma-sp-14);font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;} html .ma-pin-row{margin:var(--ma-sp-14) 0 var(--ma-sp-4);} html .ma-pin--viewer{background:transparent;color:var(--ma-white);border-color:var(--ma-white);} html .ma-pin--viewer[aria-pressed="true"]{background:var(--ma-yellow);border-color:var(--ma-yellow);color:var(--ma-ink);} @media (hover:hover){ html .ma-pin:hover{transform:var(--ma-lift);box-shadow:var(--ma-shadow-pink-3);} } html .ma-pin-toast{position:fixed;left:50%;bottom:22px;z-index:2147483000;display:flex;align-items:center;gap:var(--ma-sp-14);padding:var(--ma-sp-12) var(--ma-sp-16);background:var(--ma-ink);color:var(--ma-white);border:var(--ma-edge-w) solid var(--ma-white);box-shadow:var(--ma-shadow-pink-4);font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-l);letter-spacing:var(--ma-track-mono);text-transform:uppercase;transform:translate(-50%,140%);opacity:0;transition:transform var(--ma-open),opacity var(--ma-open);pointer-events:none;} html .ma-pin-toast.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto;} html .ma-pin-toast a{color:var(--ma-yellow) !important;margin:0;text-decoration:underline;text-underline-offset:3px;} @media (prefers-reduced-motion:reduce){html .ma-pin.is-pop svg{animation:none;}html .ma-pin-toast{transition:none;}} /* 4. Your wall link in the header (8 Nov 2026), added next to the bag by ma-wall.js. */ html .ma-wall-hdr{list-style:none;} html .ma-wall-hdr-left{display:flex;align-items:center;gap:var(--ma-sp-2);} html .ma-wall-hdr-left > li{margin:0;} html .ma-wall-hdr__a{color:var(--text-color) !important;text-decoration:none !important;} html .ma-wall-hdr__a svg{width:19px;height:19px;display:block;overflow:visible;position:relative;top:5px;} /* 11 Nov 2026: the frame's foot now lines up with the search and bag icons' (it sat 5px high; 4px on phones) */ @media (max-width:749px){html .ma-wall-hdr__a svg{top:4px;}} html .ma-wall-hdr__a:focus-visible{outline:var(--ma-focus-ring);outline-offset:-2px;} @media (hover:hover){html .ma-wall-hdr__a:hover{color:var(--ma-pink) !important;}} /* 4a. The frame on a wire (11 Nov 2026, ma-wall.js FRAME). Straight at rest. Swings on its nail and settles on hover, on keyboard focus and when something new is pinned; still under reduce motion. The picture inside fills in once anything is pinned. */ html .ma-wall-hdr__a .ma-frame__swing{transform-box:view-box;transform-origin:12px 2.4px;} html .ma-wall-hdr__a .ma-frame__art{transition:fill var(--ma-ease);} html .ma-wall-hdr__a.has-pins .ma-frame__art{fill:currentColor;} @keyframes ma-frame-swing{0%{transform:rotate(0)}18%{transform:rotate(-8deg)}42%{transform:rotate(5.5deg)}64%{transform:rotate(-3deg)}82%{transform:rotate(1.2deg)}100%{transform:rotate(0)}} @media (prefers-reduced-motion:no-preference){ html .ma-wall-hdr__a:focus-visible .ma-frame__swing,html .ma-wall-hdr__a.is-swing .ma-frame__swing{animation:ma-frame-swing var(--ma-swing) 1;} } @media (prefers-reduced-motion:no-preference) and (hover:hover){ html .ma-wall-hdr__a:hover .ma-frame__swing{animation:ma-frame-swing var(--ma-swing) 1;} } /* 5. Pins on cards show on hover (9 Nov 2026): product, collection and creator cards and showcase people. They stay once pinned, show on keyboard focus, and are always shown on touch screens. Collection and creator cards and showcase people get one too. */ html .ma-cc__item,html .ma-cr__item,html .mss{position:relative;} html .ma-cc__item > .ma-pin--card,html .ma-cr__item > .ma-pin--card,html .mss > .ma-pin--card{position:absolute;top:8px;right:8px;z-index:4;} /* Showcase cards keep their 'New' badge top right, so the pin sits top left there. */ /* Showcase cards: pin on the right like every other card; the New badge sits on the left. */ @media (hover:hover){ html .ma-pin--hover{opacity:0;transform:translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out,box-shadow var(--ma-ease),background-color var(--ma-ease);} html :is(.product-loop__item,.ma-cc__item,.ma-cr__item,.mss):is(:hover,:focus-within) .ma-pin--hover,html .ma-pin--hover[aria-pressed="true"]{opacity:1;transform:none;} html :is(.product-loop__item,.ma-cc__item,.ma-cr__item,.mss) .ma-pin--hover:hover{transform:var(--ma-lift);} } @media (prefers-reduced-motion:reduce){html .ma-pin--hover{transition:none;}} /* Creator and collection cards: the pin sits inside the card's 2px border and rides along when the card lifts on hover (the lift is on the item, so pointing at the pin keeps the card up). */ html .ma-cc__item > .ma-pin--card,html .ma-cr__item > .ma-pin--card{top:10px;right:10px;} @media (hover:hover){ html .ma-cr__item:hover > .ma-pin--card{transform:translate(-3px,-3px);} html .ma-cr__item > .ma-pin--card:hover{transform:translate(-5px,-5px);} html .ma-cc__item:hover > .ma-pin--card{transform:translate(-2px,-2px);} html .ma-cc__item > .ma-pin--card:hover{transform:translate(-4px,-4px);} html .ma-cr__grid[data-view="list"] .ma-cr__item:hover > .ma-pin--card{transform:none;} html .ma-cr__grid[data-view="list"] .ma-cr__item > .ma-pin--card:hover{transform:var(--ma-lift);} } @media (prefers-reduced-motion:reduce){html :is(.ma-cc__item,.ma-cr__item):hover > .ma-pin--card{transform:none;}} html .ma-pin-row--head{margin:var(--ma-sp-12) 0 0;width:100%;} html .section__banner-caption .ma-pin-row--head{grid-column:1 / -1;} html .section__banner-caption .ma-pin--page{min-height:34px !important;height:auto !important;line-height:var(--ma-lh-tight) !important;margin:0 !important;padding:var(--ma-sp-6) var(--ma-sp-12);font-size:var(--ma-fs-label-s);background:transparent;color:var(--ma-white);border-color:var(--ma-white);} html .section__banner-caption .ma-pin--page[aria-pressed="true"]{background:var(--ma-yellow);border-color:var(--ma-yellow);color:var(--ma-ink);} html .section__banner-caption .ma-pin-row--head{margin-top:var(--ma-sp-10);} /* 6. 9 Nov 2026. Pins stay outlined like the other header and card icons (pinned shows as the yellow square, not a filled icon). Drop's banner caption ignores clicks (pointer-events:none), so the pin under a collection or creator title turns them back on. */ html .section__banner-caption .ma-pin{pointer-events:auto;} /* The row stays click-through and only as wide as the button, so the covers on the right of the banner keep their hover and clicks. */ html .section__banner-caption .ma-pin-row--head{pointer-events:none;width:max-content;max-width:100%;justify-self:start;} /* 7. Quick add on books with versions: the bag is a , so it now gets the same hover as the bag on single books (ink square, pink shadow, white bag). */ html .product--grid_add details > summary{transition:background-color var(--ma-ease),box-shadow var(--ma-ease) !important;} html .product--grid_add details > summary svg .hover-fill{transition:fill var(--ma-ease);} html .product--grid_add details:not([open]) > summary:is(:hover,:focus-visible){background:var(--ma-ink) !important;box-shadow:var(--ma-shadow-pink-3);outline:none !important;} html .product--grid_add details:not([open]) > summary:is(:hover,:focus-visible) svg .hover-fill{fill:var(--ma-white) !important;} /* 8. Sold-out versions (9 Nov 2026): crossed through with a diagonal line, on product pages and in the quick add picker on cards. They stay clickable, so picking one shows it's sold out (the button reads 'Sold out'). */ html .swatch-element.soldout .swatches__form--label{background-image:linear-gradient(to top right,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + 1px),transparent calc(50% + 1px)) !important;background-repeat:no-repeat !important;background-size:100% 100% !important;background-position:0 0 !important;} /* Drop's own slash is a short fixed line that only crosses part of a long label, so it's off; ours runs corner to corner. */ html .swatch-element.soldout .swatches__form--label::before{display:none !important;} /* 10 Nov 2026: the line now runs bottom-left to top-right (David). Screen readers hear ', sold out' after the name. */ html .swatch-element.soldout .swatches__form--label::after{content:", sold out";position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} /* 8b. Choices in the quick add picker on cards: same 2px ink edge as the product page; sold ones muted, not faded. */ html .product--grid_variants .swatch-element label{border:var(--ma-edge);font-weight:600;position:relative;} /* Long names (a set) ran past both edges of the card. Choices now wrap inside the card, left to right. */ html .product--grid_variants .product__variants-swatches,html .product--grid_variants .swatches__container{width:100%;max-width:100%;box-sizing:border-box;} html .product--grid_variants .swatches__container{justify-content:flex-start;gap:var(--ma-sp-6);} html .product--grid_variants .swatch-element.swatches__swatch--regular{flex:0 1 auto;max-width:100%;} html .product--grid_variants .swatch-element label{box-sizing:border-box;width:auto;max-width:100%;height:auto;min-height:40px;padding:var(--ma-sp-6) var(--ma-sp-8);white-space:normal;line-height:var(--ma-lh-tight);text-align:left;flex:0 1 auto;} html .product--grid_variants .swatch-element.soldout label{opacity:1;border-color:var(--ma-muted-line);color:var(--ma-muted);} /* 8c. Sold card badge: ink with white text, so it's the clearest badge on the card. */ html .product-loop__badge-icon.icon-type--sold-out{background-color:var(--ma-ink) !important;color:var(--ma-white) !important;} /* 9. Blog posts on phones (9 Nov 2026): the sidebar (author, share, recent articles, tags) stacked above the post and pushed it a long way down. On phones the post now comes first and the sidebar follows it, and the space around the title is tighter. */ @media (max-width:767px){ html body.template-article .page-wrap{display:flex;flex-direction:column;} html body.template-article .page-wrap > *{width:100%;margin-left:0;margin-right:0;} html body.template-article .page-wrap > [id$="__sidebar"]{order:2;width:100% !important;padding-top:0 !important;} html body.template-article .page-wrap > [id$="__main"] ~ *{order:3;} html body.template-article .article-header{padding-bottom:var(--ma-sp-12) !important;} html body.template-article .article-template__title{margin-top:var(--ma-sp-20) !important;padding-top:var(--ma-sp-16) !important;padding-bottom:var(--ma-sp-8) !important;} } /* 10. Header menus open the same way (9 Nov 2026). Drop's dropdowns faded in over 0.4s with ease-in (slow to start, so they felt late), and our 'More' menu had no animation at all. All of them, and the side flyouts, now drop 6px into place and fade in over 0.18s with the same ease as our buttons. */ @keyframes ma-menu-in{from{opacity:0;translate:0 -6px;}to{opacity:1;translate:0 0;}} @keyframes ma-menu-fade{from{opacity:0;}to{opacity:1;}} html ul.header__navigation li.dropdown.has_sub_menu:hover > ul.submenu, html ul.header__navigation li.dropdown.has_sub_menu:hover > .drop-mega-menu, html ul.header__navigation .navigation__menuitem--active > ul.submenu, html ul.header__navigation .navigation__menuitem--active > .drop-mega-menu, html ul.header__navigation li.dropdown ul.submenu li.nest:hover > ul.nested, html .ma-more.is-open > .ma-more__menu{animation:ma-menu-in var(--ma-open) both;} @media (hover:hover){html .ma-more:hover > .ma-more__menu{animation:ma-menu-in var(--ma-open) both;}} @media (prefers-reduced-motion:reduce){ html ul.header__navigation li.dropdown.has_sub_menu:hover > ul.submenu, html ul.header__navigation li.dropdown.has_sub_menu:hover > .drop-mega-menu, html ul.header__navigation .navigation__menuitem--active > ul.submenu, html ul.header__navigation .navigation__menuitem--active > .drop-mega-menu, html ul.header__navigation li.dropdown ul.submenu li.nest:hover > ul.nested, html .ma-more.is-open > .ma-more__menu,html .ma-more:hover > .ma-more__menu{animation:ma-menu-fade var(--ma-ease) both;} } /* 11. Slide-out drawers (9 Nov 2026): the phone menu, cart and quick view slid in over 0.4s with ease-in, so they started slowly and felt laggy. Now 0.28s with our ease (fast start, soft stop). With reduced motion they just appear. The phone menu also had an empty links block under the main list (its menu has no links), which showed as a blank row with a line; it's hidden until it has links. */ html .slideout{transition-duration:var(--ma-drawer) !important;transition-timing-function:cubic-bezier(.2,.8,.2,1) !important;} @media (prefers-reduced-motion:reduce){html .slideout{transition-duration:var(--ma-instant) !important;}} html #slideout-mobile-navigation .mobile-menu__simple-links:not(:has(li)){display:none;} html #slideout-mobile-navigation .mobile-nav__menu-blocks--lower:not(:has(li, form, img, .mobile-menu__block:not(.mobile-menu__simple-links))){display:none;} /* 12. Blog text (9 Nov 2026): Drop sizes every at the base size (16px). Text pasted from another editor arrives wrapped in spans, so 'Who got us here' showed smaller than 'The archive is open'. Spans inside post paragraphs now take the paragraph's size. */ html .template-article .article_body-rte :is(p, li) span{font-size:inherit;line-height:inherit;} /* 13. Shop all groups (9 Nov 2026): Just landed, Signed, Japanese editions / Books, Art prints, Collectibles / All collections. A thin line starts each group, in the desktop dropdown, the More menu and the phone menu. Menus can't hold dividers, so the line goes before the items that start a group. */ html ul.header__navigation ul.submenu > li:is(:has(> a[href="/collections/books"]),:has(> a[href="/collections"])), html .ma-more .ma-more__list > li:is(:has(> a[href="/collections/books"]),:has(> a[href="/collections"])){margin-top:var(--ma-sp-10) !important;padding-top:var(--ma-sp-10) !important;border-top:1px solid var(--ma-white-a22);} html #slideout-mobile-navigation .slide-nav__second-level--item:is(:has(> a[href="/collections/books"]),:has(> a[href="/collections"])){margin-top:var(--ma-sp-18);} /* 14. Product carousels (9 Nov 2026), like 'Just landed' under blog posts: each card is its own slide, so a card with a longer title ended taller and the price rows didn't line up. Slides now stretch to at least the carousel's height (the tallest card) and the grey title area stretches, so every card ends at the same line. */ /* Drop's carousel sets the cards to display:block !important inline, so this needs to outrank it. */ html body .flickity-slider > .product-loop__item.product-loop__item.product-loop__item{min-height:100%;display:flex !important;flex-direction:column;} /* ---- Product cards: whole-card hover (9 Nov 2026, David; simplified 10 Nov) ---- The card itself moves, never the cover inside it (older rules in monster-arc-fixes.css lifted the cover on its own; these two lines switch that off). The hover, focus and pressed look is in rule 18. */ html .product-loop__item{transition:transform var(--ma-ease),box-shadow var(--ma-ease);} @media (hover:hover){html .product-loop__item:hover .product-image{transform:none !important;box-shadow:none !important;}} html .product-loop__item:focus-within .product-image{transform:none !important;box-shadow:none !important;} @media (prefers-reduced-motion:reduce){html .product-loop__item{transition:none;}} /* Card price range (9 Nov 2026): '$35.00 to $350.00' on two lines in the price box, a little smaller. */ .product-loop__item .product-loop__price.ma-has-range{font-size:var(--ma-fs-xs);line-height:var(--ma-lh-tight);padding-left:var(--ma-sp-4) !important;padding-right:var(--ma-sp-4) !important;} .product-loop__item .product-loop__price .ma-pr{display:block;white-space:nowrap;} .product-loop__item .product-loop__price .ma-pr-to{font-family:var(--ma-mono);font-size:.8em;font-weight:700;letter-spacing:0;} /* Breadcrumbs (9 Nov 2026, David): less space above them. Was 50px (half the section spacing). One section serves all 14 templates. The space below is left to each page: a version that pulled the next section up 10px ran into the Showcase page's heading, so it was taken out. */ .breadcrumb__nav.global__section{padding-top:clamp(var(--ma-sp-16),2.2vw,var(--ma-sp-24)) !important;} /* 14. Phone menu polish (10 Nov 2026). - The three small links (About, Contact, Live on Whatnot) sat under a second line with an empty band above it, in two uneven columns. Now one line (the last main row's own), and the links run in one row in our small mono caps, each a full-height tap target. - Timing: sub-menus slid over 0.35s with a slow start while the drawer took 0.28s. Sub-menus now take 0.22s on our ease, and row colours change over 0.12s, not at once. - Close has a larger tap area. Rows have a pressed state. */ html #slideout-mobile-navigation .mobile-nav__menu-blocks--lower{padding-top:var(--ma-sp-14) !important;} html #slideout-mobile-navigation .mobile-menu__simple-links ul{border-top:0 !important;padding-top:0 !important;columns:auto !important;column-count:auto !important;display:flex;flex-wrap:wrap;gap:0 var(--ma-sp-24);} html #slideout-mobile-navigation .simple-links__item{margin:0;break-inside:avoid;} html #slideout-mobile-navigation .simple-links__item a{display:inline-flex !important;align-items:center;min-height:44px;padding:0 !important;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-l);letter-spacing:var(--ma-track-mono);text-transform:uppercase;color:var(--ma-on-dark-muted) !important;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:color var(--ma-ease),text-decoration-color var(--ma-ease);} @media (hover:hover){html #slideout-mobile-navigation .simple-links__item a:hover{color:var(--ma-white) !important;text-decoration-color:var(--ma-pink);}} html #slideout-mobile-navigation .simple-links__item a:is(:focus-visible,:active){color:var(--ma-white) !important;text-decoration-color:var(--ma-pink);} html #slideout-mobile-navigation .slide-nav__second-level--wrapper,html #slideout-mobile-navigation [class*="slide-nav__third-level--wrapper"]{transition:transform var(--ma-open) !important;} html #slideout-mobile-navigation :is(.slide-nav__first-level--link,.slide-nav__parent--link,.slide-nav__second-level--link,.slide-nav__third-level--link){transition:color var(--ma-ease) !important;} html #slideout-mobile-navigation :is(.slide-nav__first-level--link,.slide-nav__parent--link,.slide-nav__second-level--link,.slide-nav__third-level--link):active{color:var(--ma-nav-hover) !important;} html #slideout-mobile-navigation .slide-nav__button svg{transition:transform var(--ma-ease);} @media (hover:hover){html #slideout-mobile-navigation .slide-nav__first-level--item:hover > .slide-nav__button svg{transform:translateX(3px);}} html #slideout-mobile-navigation .js-slideout-close{position:relative;} html #slideout-mobile-navigation .js-slideout-close::after{content:'';position:absolute;inset:-12px -10px;} @media (prefers-reduced-motion:reduce){ html #slideout-mobile-navigation .slide-nav__second-level--wrapper,html #slideout-mobile-navigation [class*="slide-nav__third-level--wrapper"]{transition-duration:var(--ma-instant) !important;} html #slideout-mobile-navigation .slide-nav__button svg{transition:none;transform:none !important;} } /* 15. Collection toolbar and filter drawer (10 Nov 2026). - 'Filter by' and 'Sort by' wrapped onto two lines and had a 1px edge beside the 2px per-page switch. One line, 2px, like every other control. - The drawer's Filter by / Sort by tabs are our two-part switch (see 15a below), not the theme's thin grey box. - Sub-panels slide over 0.22s on our ease, the same as the phone menu. - Rows have a pressed state and a chevron nudge. Close has a larger tap area. - 'Update price' has the 2px edge. Per-page numbers ease and have a focus state. */ html .ma-perpage__opt{transition:background-color var(--ma-ease),border-color var(--ma-ease),color var(--ma-ease);} html .ma-perpage__opt:active:not(.is-current){background:var(--ma-yellow);border-color:var(--ma-ink);} html #slideout-collection-filters .filter-drawer__menu-toggle,html #slideout-search-filters .filter-drawer__menu-toggle{display:inline-flex;border:0 !important;gap:0;} /* 15a (10 Nov 2026, David): the tabs didn't match the other joined switches (Cards / List, 24 / 48 / All). They were 46px with larger type, overlapped by 2px instead of sharing an edge, went yellow on hover and the chosen part had a pink shadow. Now they follow rule 25d: 40px, the same mono caps, one shared 2px line, ink fill for the chosen part and on hover, no shadow, no movement. */ html :is(#slideout-collection-filters,#slideout-search-filters) .filter-drawer__menu-toggle button.menu-toggle{display:inline-flex;align-items:center;justify-content:center;height:var(--ma-ctl-h) !important;min-height:var(--ma-ctl-h) !important;box-sizing:border-box;padding:0 var(--ma-sp-14) !important;margin:0;border:var(--ma-edge) !important;border-radius:0;background:transparent !important;color:var(--ma-ink) !important;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);line-height:var(--ma-lh-solid) !important;text-transform:uppercase;box-shadow:none;transform:none;} html :is(#slideout-collection-filters,#slideout-search-filters) .filter-drawer__menu-toggle button.menu-toggle:not([style*="display: none"]) ~ button.menu-toggle{border-left:0 !important;} html :is(#slideout-collection-filters,#slideout-search-filters) .filter-drawer__menu-toggle button.menu-toggle.active--menu{background:var(--ma-ink) !important;color:var(--ma-white) !important;} @media (hover:hover){html :is(#slideout-collection-filters,#slideout-search-filters) .filter-drawer__menu-toggle button.menu-toggle:not(.active--menu):hover{background:var(--ma-seg-hover) !important;color:var(--ma-ink) !important;}} html :is(#slideout-collection-filters,#slideout-search-filters) .filter-drawer__menu-toggle button.menu-toggle:not(.active--menu):active{background:var(--ma-yellow) !important;color:var(--ma-ink) !important;} html :is(#slideout-collection-filters,#slideout-search-filters) :is(.slide-nav__second-level--wrapper,[class*="slide-nav__third-level--wrapper"]){transition:transform var(--ma-open) !important;} html :is(#slideout-collection-filters,#slideout-search-filters) .slide-nav__button svg{transition:transform var(--ma-ease);} @media (hover:hover){html :is(#slideout-collection-filters,#slideout-search-filters) .slide-nav__first-level--item:hover > .slide-nav__button svg{transform:translateX(3px);}} html :is(#slideout-collection-filters,#slideout-search-filters) :is(.slide-nav__first-level--link,.slide-nav__second-level--link):active{background:var(--ma-card);box-shadow:inset 3px 0 0 var(--ma-pink);} html :is(#slideout-collection-filters,#slideout-search-filters) .js-slideout-close{position:relative;} html :is(#slideout-collection-filters,#slideout-search-filters) .js-slideout-close::after{content:'';position:absolute;inset:-12px -10px;} html .filter-drawer__wrapper .button.btn-outlined{border-width:2px !important;} @media (prefers-reduced-motion:reduce){html :is(#slideout-collection-filters,#slideout-search-filters) .slide-nav__button svg{transition:none;transform:none !important;}} /* 15b. The sort list marks the order in use (pink bar, bold, a tick), and the drawer tabs are in caps. */ html :is(#slideout-collection-filters,#slideout-search-filters) .ma-sort-current > a{background:var(--ma-card);box-shadow:inset 3px 0 0 var(--ma-pink);} html :is(#slideout-collection-filters,#slideout-search-filters) .ma-sort-current > a label{font-weight:700;} html :is(#slideout-collection-filters,#slideout-search-filters) .ma-sort-current > a label::after{content:' \2713';font-weight:700;} html :is(#slideout-collection-filters,#slideout-search-filters) .filter-drawer__menu-toggle button.menu-toggle{text-transform:uppercase !important;} /* 15c. Filter and sort rows (10 Nov 2026): the words sit 12px in from the row's left edge, so the highlight (hover, focus, the sort in use) and its pink bar have room. A first try pulled the highlight left with a negative margin, which the drawer clipped. 'Show results' sits at the foot of the filter list; it hides while Sort by is showing. */ html :is(#slideout-collection-filters,#slideout-search-filters) :is(.slide-nav__first-level--link,.slide-nav__second-level--link,.slide-nav__third-level--link){padding-left:var(--ma-sp-12) !important;margin-left:0 !important;box-sizing:border-box;} html .ma-drawer-done{padding-top:var(--ma-sp-20);padding-bottom:var(--ma-sp-8);} html .ma-drawer-done__btn{width:100%;min-height:48px;margin:0 !important;} html .filter-drawer__wrapper:has(.menu-toggle[data-toggle-menu="sort"].active--menu) .ma-drawer-done{display:none;} /* 15d. Choosing a sort closes the drawer. The theme re-opens it for a moment after it re-draws; that flash is hidden while the sort is being applied. */ html.ma-sorting .slideout[id$="-filters"]{opacity:0 !important;pointer-events:none !important;transition:none !important;} html.ma-sorting .slideout[id$="-filters"]::backdrop{opacity:0 !important;} /* 15e. 'Type to find' at the top of long filter lists. Same look as our other fields. */ html :is(#slideout-collection-filters,#slideout-search-filters) .ma-find{padding:var(--ma-sp-12) 0 !important;} html :is(#slideout-collection-filters,#slideout-search-filters) .ma-find__input{width:100%;height:46px !important;margin:0 !important;padding:0 var(--ma-sp-14) !important;border:var(--ma-edge) !important;border-radius:0 !important;background:var(--ma-card) !important;color:var(--ma-ink) !important;font-size:var(--ma-fs-body) !important;box-shadow:none;transition:box-shadow var(--ma-ease);-webkit-appearance:none;appearance:none;} @media (hover:hover){html :is(#slideout-collection-filters,#slideout-search-filters) .ma-find__input:hover:not(:focus){box-shadow:3px 3px 0 var(--ma-ink-a18);}} html :is(#slideout-collection-filters,#slideout-search-filters) .ma-find__input:focus{box-shadow:var(--ma-focus-edge) !important;} html :is(#slideout-collection-filters,#slideout-search-filters) .ma-find__none{margin:var(--ma-sp-12) 0 0;font-size:var(--ma-fs-m);} html :is(#slideout-collection-filters,#slideout-search-filters) li.js-filter[hidden]{display:none !important;} /* 16. One browse bar for every collection page (10 Nov 2026, David). Order, top to bottom: search (Shop all), quick-filter chips, then one row with the count on the left and Show / Filter by / Sort by on the right, then any other filters that are on. Same gap everywhere: 20px between rows (the page grid's own 16px plus 4px). - Chips: one height, eased, a pressed state. On phones they run in one swipeable line with no scrollbar track and fade out at the right edge to show there are more. - Filters that are on: our chip look with a ×, and 'Clear all' as a plain text link. A filter that a quick chip already shows is not repeated here. - 'Filter by' shows how many other filters are on. - Phones: with no Show switch, the count and the two buttons share one row. - The page search hides where the phone header already shows its own search bar. */ html .collection__page--wrapper .ma-chip{min-height:36px;box-sizing:border-box;transition:background-color var(--ma-ease),color var(--ma-ease);} html .collection__page--wrapper .ma-chip:not(.is-current):active{background:var(--ma-yellow);color:var(--ma-ink);} @media (max-width:767px){ html .collection__page--wrapper .ma-chips{flex-wrap:nowrap;overflow-x:auto;padding:0 var(--ma-sp-32) 0 0;margin-right:-16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);} html .collection__page--wrapper .ma-chips::-webkit-scrollbar{display:none;} } /* (10 Nov, late: the bar field is the Find field now and shows on phones too; see rule 29.) */ html .slideout__trigger-filters .ma-fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:var(--ma-sp-8);padding:0 var(--ma-sp-4);box-sizing:border-box;background:var(--ma-ink);color:var(--ma-white);font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-s);line-height:var(--ma-lh-solid);} html .slideout__trigger-filters:is(:hover,:focus-visible) .ma-fcount{background:var(--ma-yellow);color:var(--ma-ink);} html ul.current_filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ma-sp-8);margin:0 !important;padding:0;list-style:none;} html ul.current_filters li{margin:0 !important;display:block;} html ul.current_filters li.current_filters--filter a{display:inline-flex;align-items:center;gap:var(--ma-sp-8);min-height:36px;box-sizing:border-box;padding:0 var(--ma-sp-10) 0 var(--ma-sp-12);margin:0 !important;border:var(--ma-edge);background:var(--ma-card);color:var(--ma-ink);font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;line-height:var(--ma-lh-solid);text-decoration:none;transition:background-color var(--ma-ease),color var(--ma-ease);} html ul.current_filters li.current_filters--filter a::after{content:'\00d7';position:static;font-family:system-ui,sans-serif;font-size:var(--ma-fs-l);font-weight:400;line-height:var(--ma-lh-solid);} /* ma-ok: the close glyph draws best in the system font */ @media (hover:hover){html ul.current_filters li.current_filters--filter a:hover{background:var(--ma-ink);color:var(--ma-white);}} html ul.current_filters li.current_filters--filter a:active{background:var(--ma-ink);color:var(--ma-white);} html ul.current_filters li a.current_filters--clear{display:inline-flex;align-items:center;min-height:36px;margin:0 0 0 var(--ma-sp-6) !important;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;color:var(--ma-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color var(--ma-ease);} @media (hover:hover){html ul.current_filters li a.current_filters--clear:hover{text-decoration-color:var(--ma-pink);}} /* 16b. Same bar, loose ends (10 Nov 2026). - Series pages use buttons for chips; the theme made them 48px tall beside 36px link chips. - Phones: the count no longer pushes the Show switch onto its own row. - Search results: Filter by and Sort by match the collection pages (40px, 2px edge, one line), and the count and buttons share one row. */ html .collection__page--wrapper button.ma-chip{height:36px;min-height:36px;} @media (max-width:767px){ } /* 11 Nov 2026: the search page's count and buttons now sit in the shared bar (.ma-bar, rule 31); its own row and these rules are gone. */ /* 16c (10 Nov 2026) was the Shop all search on the toolbar row; the toolbar is the browse bar now, rule 31. */ } /* 16d. 'Show results' in the filter drawer (10 Nov 2026): it carries the drawer's close classes, so the close button's hover (clear background, pink words) was landing on it. It is the primary button and reads the same named values as every other one (--ma-btn-*, assets/monster-arc.css). Before: its own 2px border, and a press that moved 2px with an ink shadow. */ html .slideout .ma-drawer-done__btn.ma-drawer-done__btn{display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:48px;margin:0 !important;padding:0 var(--ma-sp-16) !important;border:0 !important;border-radius:0;background:var(--ma-yellow) !important;color:var(--ma-ink) !important;box-shadow:var(--ma-btn-edge),var(--ma-btn-rest) !important;font-family:var(--ma-head);font-weight:900;text-transform:uppercase;transition:transform var(--ma-ease),box-shadow var(--ma-ease) !important;} @media (hover:hover){html .slideout .ma-drawer-done__btn.ma-drawer-done__btn:hover{background:var(--ma-yellow) !important;color:var(--ma-ink) !important;transform:var(--ma-lift);box-shadow:var(--ma-btn-edge),var(--ma-btn-pop) !important;}} html .slideout .ma-drawer-done__btn.ma-drawer-done__btn:active{transform:var(--ma-btn-press);box-shadow:var(--ma-btn-edge),var(--ma-btn-down) !important;} html .slideout .ma-drawer-done__btn.ma-drawer-done__btn:focus-visible{background:var(--ma-yellow) !important;color:var(--ma-ink) !important;} html .ma-drawer-done{padding-right:var(--ma-sp-8);} @media (prefers-reduced-motion:reduce){html .slideout .ma-drawer-done__btn.ma-drawer-done__btn{transition:none !important;transform:none !important;}} /* 17. Toolbar order (10 Nov 2026, David): Shop all's search sits on the left; Show, Filter by and Sort by are a group on the right, on every page. When chips are showing, 'All' carries the count ('All artifacts 448') and the toolbar's own count is left to screen readers; on pages without chips the count sits on the left. Search results follow the same order (since 11 Nov in the same bar). */ /* ---- 18. Product cards, art first (10 Nov 2026, David) ---- 'Let the art carry it.' No frame round the cover, no grey panel, no 'View product' row. Up to two ranked badges on the art, the full title split into a bold first line and a smaller second one (nothing cut), then one row with the price on the left and the button on the right. Markup: snippets/product-loop.liquid. */ html .product-loop__item .product-image{border:0 !important;overflow:visible;} html .product-loop__item .product-loop__img-wrapper{overflow:hidden;} html .product-loop__item .product-loop__info-wrapper{background:transparent !important;border:0 !important;padding:var(--ma-sp-12) var(--ma-sp-2) 0 !important;text-align:left;} html .product-loop__item .product-loop__info_bottom-wrapper{display:flex !important;align-items:center;min-height:48px;margin:0;padding:var(--ma-sp-4) var(--ma-sp-48) var(--ma-sp-4) var(--ma-sp-2) !important;border:0 !important;background:transparent !important;grid-template-columns:none;} html .product-loop__item a.product-loop__cta{display:none !important;} html .product-loop__item .product-loop__price{flex:1 1 auto;margin:0;padding:0 !important;border:0 !important;text-align:left;font-size:var(--ma-fs-xl);line-height:var(--ma-lh-tight);} html .product-loop__item .product-loop__price.ma-has-range{font-size:var(--ma-fs-body);padding:0 !important;} html .product-loop__item .product-loop__price .ma-pr{display:inline;white-space:nowrap;} /* Title: series and issue, then artist and what sets the copy apart. */ html .product-loop__item .ma-ct a{display:block;text-decoration:none;color:var(--ma-ink);} html .product-loop__item .ma-ct__1{display:block;font-weight:700;font-size:var(--ma-fs-body);line-height:var(--ma-lh-tight);} /* Title groups (David, 10 Nov, 17:30 and 17:50). Two groups with a gap between them. Three steps of emphasis: bold ink, plain ink, plain muted. The second group is all muted and one size smaller. bold 16 series and issue ink 14 who: artist, signed by muted 14 what: treatment, printing gap 8 muted 13 where: the shop or event it is exclusive to (was ink until 17:50; David wanted it no stronger than the treatment line) muted 13 about: cover subject, homage, shorthand Every span gets its own size here: Drop sets 16px on spans inside the title, so inheriting isn't enough. */ html .product-loop__item .ma-ct__who,html .product-loop__item .ma-ct__what,html .product-loop__item .ma-ct__where,html .product-loop__item .ma-ct__about,html .product-loop__item .ma-ct__g2{display:block;font-weight:400;line-height:var(--ma-lh-snug);} html .product-loop__item .ma-ct__who{margin-top:var(--ma-sp-4);font-size:var(--ma-fs-s);color:var(--ma-ink);} html .product-loop__item .ma-ct__what{margin-top:1px;font-size:var(--ma-fs-s);color:var(--ma-muted);} html .product-loop__item .ma-ct__1 + .ma-ct__what{margin-top:var(--ma-sp-4);} html .product-loop__item .ma-ct__g2{margin-top:var(--ma-sp-8);font-size:var(--ma-fs-xs);} html .product-loop__item .ma-ct__1 + .ma-ct__g2{margin-top:var(--ma-sp-4);} html .product-loop__item .ma-ct__where{font-size:var(--ma-fs-xs);color:var(--ma-muted);} html .product-loop__item .ma-ct__about{font-size:var(--ma-fs-xs);color:var(--ma-muted);} html .product-loop__item .ma-ct__where + .ma-ct__about{margin-top:1px;} @media (hover:hover){html .product-loop__item .ma-ct a:hover .ma-ct__1{text-decoration:underline;text-decoration-color:var(--ma-pink);text-decoration-thickness:2px;text-underline-offset:3px;}} /* Badges on the art: the first two by rank, stacked top left, on every screen size. */ html .product-loop__item .product-image .ma-b{position:absolute;left:8px;top:8px;z-index:3;margin:0;} html .product-loop__item .product-image .ma-b--2{top:46px;} html .product-loop__item .product-image .ma-b:nth-of-type(n+3){display:none;} @media (max-width:767px){ html .product-loop__item .product-loop__price.ma-has-range{font-size:var(--ma-fs-s);} html .product-loop__item .ma-ct__1{font-size:var(--ma-fs-m);} html .product-loop__item .ma-ct__who,html .product-loop__item .ma-ct__what{font-size:var(--ma-fs-xs);} html .product-loop__item .ma-ct__g2{margin-top:var(--ma-sp-6);} html .product-loop__item .ma-ct__where,html .product-loop__item .ma-ct__about{font-size:var(--ma-fs-label-l);} html .product-loop__item .product-loop__info-wrapper{padding-top:var(--ma-sp-10) !important;} } /* Bag: off the art, into the price row. The version picker now opens over the text, not the cover. */ html .product-loop__item > .ma-card-quick{position:static;} html .product-loop__item > .ma-card-quick .product--grid_add{position:absolute;left:0;right:0;bottom:0;width:100%;z-index:5;} html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary,html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger{position:absolute;right:0;bottom:4px;top:auto;left:auto;width:40px;height:40px;box-sizing:border-box;border:var(--ma-edge);background:var(--ma-card);} /* Hover: the whole card lifts with the pink shadow (David, 10 Nov, 17:13), the same move and the same values as the collection cards (2px lift, 6px pink shadow). No ink ring, so the cover stays unframed. A card with its picker open holds the lifted state. Only the cover and title links press the card down, so tapping a choice or the Add button doesn't make the whole card jump. */ @media (hover:hover){html .product-loop__item:hover{transform:var(--ma-lift);box-shadow:var(--ma-shadow-pink-6);z-index:2;}} html .product-loop__item:has(a:focus-visible),html .product-loop__item:has(.ma-card-quick details[open]){transform:var(--ma-lift);box-shadow:var(--ma-shadow-pink-6);z-index:6;} html .product-loop__item:has(.product-image a:active,.ma-ct a:active){transform:var(--ma-press);box-shadow:var(--ma-shadow-pink-2);} @media (prefers-reduced-motion:reduce){html .product-loop__item,html .product-loop__item:hover,html .product-loop__item:has(a:focus-visible),html .product-loop__item:has(.ma-card-quick details[open]),html .product-loop__item:has(.product-image a:active,.ma-ct a:active){transform:none !important;}} /* ---- 19. Product cards, grouping pass (10 Nov 2026, David by voice) ---- Without a frame the text floated. Title sits tight under the cover and flush with its left edge, the bag is a bulky ink button ('Add', or 'Choose' on books with versions), and the card is closed at the foot. Two foots to compare: an ink rule (default) or a white block behind the text (add ?card=block to any page; ?card=rule switches back). The switch is in assets/ma-links.js. */ html .product-loop__item .product-loop__info-wrapper{padding:var(--ma-sp-8) 0 0 !important;} html .product-loop__item .product-loop__info_bottom-wrapper{min-height:52px;padding:var(--ma-sp-8) 104px var(--ma-sp-10) 0 !important;border-bottom:var(--ma-edge) !important;} /* Bulky Add / Choose button */ html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary,html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger{--directional-text:var(--ma-white);right:0;bottom:10px;width:auto;min-width:84px;height:40px;padding:0 var(--ma-sp-12) 0 var(--ma-sp-10);gap:var(--ma-sp-6);display:flex;align-items:center;justify-content:center;border:var(--ma-edge);background:var(--ma-ink) !important;color:var(--ma-white);transition:transform var(--ma-ease),box-shadow var(--ma-ease) !important;} html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary::after,html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger::after{font-family:var(--heading-family,"Saira Condensed",sans-serif);font-weight:900;font-size:var(--ma-fs-body);letter-spacing:var(--ma-track-btn);text-transform:uppercase;line-height:var(--ma-lh-solid);color:var(--ma-white);} html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger::after{content:"Add";} html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger:not([data-quick-add])::after{content:"Look";} html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary::after{content:"Choose";} html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary svg .hover-fill,html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger svg .hover-fill{fill:var(--ma-white) !important;} @media (hover:hover){html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary:hover,html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger:hover{transform:var(--ma-lift);box-shadow:var(--ma-shadow-pink-4);}} html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary:active,html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger:active{transform:var(--ma-press);box-shadow:var(--ma-shadow-pink-1);} @media (max-width:767px){ html .product-loop__item .product-loop__info_bottom-wrapper{padding-right:84px !important;} html .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger{min-width:70px;padding:0 var(--ma-sp-10) 0 var(--ma-sp-8);} html .product-loop__item:not(:has(.ma-card-quick > .product-listing__quickview-trigger)) .product-loop__info_bottom-wrapper{padding-right:0 !important;} } /* Foot B: white block behind the text, flush to the cover, no rule. */ html:not([data-ma-card="rule"]) .product-loop__item .product-loop__info-wrapper{background:var(--ma-card) !important;padding:var(--ma-sp-10) var(--ma-sp-12) 0 !important;} html:not([data-ma-card="rule"]) .product-loop__item .product-loop__info_bottom-wrapper{background:var(--ma-card) !important;border-bottom:0 !important;padding:var(--ma-sp-8) 112px var(--ma-sp-12) var(--ma-sp-12) !important;} html:not([data-ma-card="rule"]) .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary,html:not([data-ma-card="rule"]) .product-loop__item > .ma-card-quick > .product-listing__quickview-trigger{right:10px;bottom:10px;} @media (max-width:767px){ html:not([data-ma-card="rule"]) .product-loop__item .product-loop__info-wrapper{padding:var(--ma-sp-8) var(--ma-sp-10) 0 !important;} html:not([data-ma-card="rule"]) .product-loop__item .product-loop__info_bottom-wrapper{padding:var(--ma-sp-8) 90px var(--ma-sp-10) var(--ma-sp-10) !important;} html:not([data-ma-card="rule"]) .product-loop__item:not(:has(.ma-card-quick > .product-listing__quickview-trigger)) .product-loop__info_bottom-wrapper{padding-right:var(--ma-sp-10) !important;} } /* 19b. Drop left 24px under the cover link, which pushed the title away from the art. */ html .product-loop__item .product-loop__img-wrapper > a{display:block;margin-bottom:0 !important;} /* 19c. Version picker: slides up over the art, inside the card (David, 10 Nov, 17:12: 'okay to slide up over the art. it appears broken when sliding down.'). The open-downward version and its script are gone. The card with an open picker holds its lifted hover state (see rule 18). */ /* ---- 20. Version picker on phones (10 Nov 2026, David) ---- Drop hides the picker when phones show two cards a row, so books with versions had no button. It's back: 'Choose' in the price row, and the same panel as desktop, inside the card. (A sheet fixed to the foot of the screen was tried first; it would break inside the homepage carousels, which move their cards with a transform.) */ @media (max-width:767px){ html .product-loop__item.mobile--two wau-quick-add{display:block !important;} html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary{min-width:70px;padding:0 var(--ma-sp-8);} html .product-loop__item > .ma-card-quick .product--grid_add details:not([open]) > summary svg{display:none;} /* 10 Nov, 20:15: these two were losing to the 'no button, no gap' rule in 19, so on phones a price range ran under the Choose button ('$85.00 to $2'). :not(#_) only adds weight. */ html .product-loop__item:has(.ma-card-quick wau-quick-add):not(#_) .product-loop__info_bottom-wrapper{padding-right:84px !important;} html:not([data-ma-card="rule"]) .product-loop__item:has(.ma-card-quick wau-quick-add):not(#_) .product-loop__info_bottom-wrapper{padding-right:90px !important;} } /* ---- 21. Version picker, tidy (10 Nov 2026, David) ---- 'Make the different options fit the width better. Signed and unsigned could each take up half.' Every row of choices now fills the panel edge to edge. Two choices share a row when both fit in half the width; a longer name takes the whole row. Same look as the product page choices. */ html .product-loop__item > .ma-card-quick .product--grid_add:has(details[open]){box-sizing:border-box;max-height:100%;overflow-y:auto;overscroll-behavior:contain;border:var(--ma-edge);background:var(--ma-card);} html .product-loop__item > .ma-card-quick .product--grid_add details[open]{border:0;background:transparent;padding:var(--ma-sp-12);} html .product-loop__item > .ma-card-quick .product--grid_add details[open] > summary{top:4px;right:4px;width:32px;height:32px;} html .product-loop__item .product--grid_variants{row-gap:var(--ma-sp-12);justify-content:flex-start;} html .product-loop__item .product--grid_variants .swatches__container{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;gap:var(--ma-sp-6);padding:0;margin:0;} html .product-loop__item .product--grid_variants .swatches__container + .swatches__container{margin-top:var(--ma-sp-12);} html .product-loop__item .product--grid_variants .swatches__container .swatches__option-name{flex:0 0 100%;margin:0 0 var(--ma-sp-2);padding-right:var(--ma-sp-32);box-sizing:border-box;text-align:left;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-s);letter-spacing:var(--ma-track-mono-s);line-height:var(--ma-lh-snug);text-transform:uppercase;color:var(--ma-muted);} html .product-loop__item .product--grid_variants .swatch-element.swatches__swatch--regular{display:flex;flex:1 1 auto;min-width:calc(50% - 3px);max-width:100%;box-sizing:border-box;} html .product-loop__item .product--grid_variants .swatch-element label{flex:1 1 auto;width:100%;min-height:40px;height:auto;box-sizing:border-box;padding:var(--ma-sp-6) var(--ma-sp-8);justify-content:center;text-align:center;white-space:normal;font-size:var(--ma-fs-xs);font-weight:600;line-height:var(--ma-lh-tight);background:var(--ma-card);color:var(--ma-ink);} html .product-loop__item .product--grid_variants input[type=radio]:checked + label{background:var(--ma-ink);color:var(--ma-white);border-color:var(--ma-ink);} html .product-loop__item .product--grid_variants .swatch-element.soldout label{background:transparent;} /* Add to cart in the panel: the main action, so solid ink like the product page button. */ html .product-loop__item .product--grid_variants .button.AddtoCart{flex:1 0 100%;width:100%;min-height:44px;margin:0;padding:0 var(--ma-sp-12);box-sizing:border-box;border:var(--ma-edge);background:var(--ma-ink);color:var(--ma-white);box-shadow:none;font-family:var(--heading-family,"Saira Condensed",sans-serif);font-weight:900;font-size:var(--ma-fs-body);letter-spacing:var(--ma-track-btn);line-height:var(--ma-lh-solid);transition:transform var(--ma-ease),box-shadow var(--ma-ease);} @media (hover:hover){html .product-loop__item .product--grid_variants .button.AddtoCart:hover{background:var(--ma-ink);color:var(--ma-white);transform:var(--ma-lift);box-shadow:var(--ma-shadow-pink-4);}} html .product-loop__item .product--grid_variants .button.AddtoCart:active{transform:var(--ma-press);box-shadow:var(--ma-shadow-pink-1);} html .product-loop__item .product--grid_variants .button.AddtoCart:disabled{border-color:var(--ma-muted-line);background:var(--ma-fill);color:var(--ma-muted);transform:none;box-shadow:none;cursor:not-allowed;} @media (max-width:767px){ html .product-loop__item > .ma-card-quick .product--grid_add details[open]{padding:var(--ma-sp-8);} html .product-loop__item .product--grid_variants .swatch-element label{padding:var(--ma-sp-6) var(--ma-sp-4);font-size:var(--ma-fs-label-l);} html .product-loop__item .product--grid_variants .button.AddtoCart{font-size:var(--ma-fs-m);} } @media (prefers-reduced-motion:reduce){html .product-loop__item .product--grid_variants .button.AddtoCart{transition:none;transform:none !important;}} /* ---- 22. Version picker, motion (10 Nov 2026, David: 'the choose drawer on a card animation seems a little clunky') ---- Before: the white panel snapped in empty, its contents then faded in over half a second (Drop's own timing, four times slower than anything else on the site), and closing was instant. Now the panel rises from the foot of the card in .22s on the same curve as the filter drawer's panels, its contents rise with it, and closing runs the same move backwards, a little faster. assets/ma-choices.js holds the panel open until the closing move ends, closes any other open picker, and closes on Esc or a tap outside. With reduce motion on, it opens and closes at once. */ html .product-loop__item > .ma-card-quick .product--grid_add details[open] > form{opacity:1;transition:none;} @media (prefers-reduced-motion:no-preference){ html .product-loop__item > .ma-card-quick .product--grid_add:has(details[open]){animation:ma-pick-in var(--ma-open);} html .product-loop__item > .ma-card-quick .product--grid_add details[open] > form{animation:ma-pick-rise var(--ma-open);} html .product-loop__item > .ma-card-quick .product--grid_add.ma-closing:has(details[open]){animation:ma-pick-out var(--ma-close) forwards;} html .product-loop__item > .ma-card-quick .product--grid_add.ma-closing details[open] > form{animation:none;} } @keyframes ma-pick-in{from{clip-path:inset(100% 0 0 0);}to{clip-path:inset(0 0 0 0);}} @keyframes ma-pick-out{from{clip-path:inset(0 0 0 0);}to{clip-path:inset(100% 0 0 0);}} @keyframes ma-pick-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}} /* ---- 23. Empty bag (10 Nov 2026, David: 'the empty data state for a cart needs a visual pass') ---- snippets/ma-cart-empty.liquid. The same dashed 'empty slot' box as an empty wall, a heading in the site's condensed caps at a size that fits the drawer, the line of text, and two ways on. Drop gave it 100px above and below; it now sits under the 'Your bag' header, in line with it. */ html .ajax-cart__empty-cart.ma-bag-empty{margin:var(--ma-sp-8) 7% var(--ma-sp-40) !important;padding:0 !important;text-align:left;} html .ajax-cart__page-wrapper .ajax-cart__empty-cart.ma-bag-empty{max-width:640px;margin:var(--ma-sp-24) 7% 72px !important;} html .ma-bag-empty__box{padding:var(--ma-sp-28);border:2px dashed var(--ma-ink);} html .ma-bag-empty__h{margin:0 0 var(--ma-sp-10);font-family:var(--heading-family,"Saira Condensed",sans-serif);font-weight:900;font-size:var(--ma-fs-h2);line-height:var(--ma-lh-solid);text-transform:uppercase;} html .ma-bag-empty__p{margin:0 0 var(--ma-sp-20);max-width:38ch;font-size:var(--ma-fs-l);line-height:var(--ma-lh-body);} html .ma-bag-empty__acts{display:flex;flex-wrap:wrap;gap:var(--ma-sp-14) var(--ma-sp-16);align-items:center;} html .ma-bag-empty__acts .button{margin:0;} /* 'Just landed' under the empty box, drawer only (David: useful, 'though it cannot seem like things are added to the cart'). A small mono label and four small covers, nothing else. Unframed like all art; a cover lifts with the pink shadow on hover. */ html .ma-bag-empty__more{margin:var(--ma-sp-28) 0 0;} html .ma-bag-empty__label{margin:0 0 var(--ma-sp-10);font-family:var(--ma-mono);font-weight:400;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-wide);line-height:var(--ma-lh-snug);text-transform:uppercase;color:var(--ma-muted);} html .ma-bag-empty__row{display:flex;gap:var(--ma-sp-10);margin:0;padding:0;list-style:none;} html .ma-bag-empty__row li{flex:0 1 90px;min-width:0;margin:0;padding:0;line-height:0;} html .ma-bag-empty__book{display:block;margin:0 !important;line-height:0;transition:transform var(--ma-ease),box-shadow var(--ma-ease);} html .ma-bag-empty__cover{display:block;width:100%;height:auto;aspect-ratio:800 / 1238;object-fit:cover;background:var(--ma-fill);} @media (hover:hover){html .ma-bag-empty__book:hover{transform:var(--ma-lift);box-shadow:var(--ma-shadow-pink-4);}} html .ma-bag-empty__book:active{transform:var(--ma-press);box-shadow:var(--ma-shadow-pink-1);} html .ajax-cart__page-wrapper .ma-bag-empty__more{display:none;} /* Cart page: with nothing in the bag, the 'OR' line and the Shop Pay and PayPal buttons were still showing under the empty box. They only make sense with something to pay for. */ html .ajax-cart__page-wrapper:has(.js-cart-empty:not(.hide)) .ajax-cart__footer-wrapper{display:none !important;} @media (max-width:767px){ html .ma-bag-empty__box{padding:var(--ma-sp-20);} html .ma-bag-empty__acts .button{flex:1 1 auto;text-align:center;} } /* ---- 24. Footer: always there (10 Nov 2026, David: 'the footer animating in seems awkward and out of place') ---- Drop fades every section in as it scrolls into view. For the footer that meant an empty band at the end of the page that took two seconds to darken, with its four columns arriving one after another. The footer is furniture, not content: it's simply there now. Other sections keep their reveal. */ html body .section-footer[data-section-loaded],html body .section-footer[data-section-loaded] .animate--text{opacity:1 !important;visibility:visible !important;transform:none !important;transition:none !important;} /* ---- 25. One control set (10 Nov 2026, David) ---- 'A lot of the major collections and pages all have slightly different controls and styling ... We should have a superset of these controls and consistent ways to apply them.' The browse bars were built page by page (collections, Creators, Shops we carry, search), so the same control had three looks. This block is the one definition; it comes last and wins over the page styles. THE SET (what a browse bar can hold, left to right) chips row quick filters, on their own row above the bar Find a text field that narrows the list (or searches, with the yellow button) Show how many per page (product lists) Sort a menu on in-page lists; the 'Sort by' drawer on product lists Filter by the drawer, on product lists only Cards / List where a page has both views SIZES bar controls 40px tall, chips 36px, 2px ink edge, square corners. TYPE what you type or pick: body type, 16px in fields (smaller makes iPhones zoom the page). toggles (chips, Cards / List, 24 / 48 / All): mono caps. Actions (Filter by, Sort by): condensed caps. STATES a field: soft ink shadow on hover, the cyan ring on focus. a stand-alone toggle or menu: fills ink, lifts 2px with the pink shadow, pushes down when pressed. joined switches (Cards / List, 24 / 48 / All) fill but don't move, since they're joined. on: ink fill, white text. */ /* Tokens: assets/ma-tokens.css (moved 11 Nov 2026). */ /* 11 Nov 2026: --ma-row-arrow the arrow strip at the end of a menu or filter row; --ma-gutter the page's side margin (the same 3% as Drop's grid); --ma-band-gap the space between the page band and what comes first under it. */ /* Tokens: assets/ma-tokens.css (moved 11 Nov 2026). */ /* 25a. Find fields in a bar: Creators, Shops we carry, Shop all. Were mono 12.8px, mono 12.8px, and unset (Arial). */ html body :is(.ma-cr__q,.ma-ex__q,input.ma-field,.ma-sa-search__box input[type=search]){height:var(--ma-ctl-h) !important;min-height:var(--ma-ctl-h) !important;box-sizing:border-box;padding:0 var(--ma-sp-12) !important;border-radius:0 !important;background:var(--ma-card) !important;font-family:inherit !important;font-size:var(--ma-fs-body) !important;font-weight:400 !important;letter-spacing:0 !important;line-height:var(--ma-lh-tight) !important;color:var(--ma-ink) !important;transition:box-shadow var(--ma-ease);} html body :is(.ma-cr__q,.ma-ex__q,input.ma-field,.ma-sa-search__box input[type=search])::placeholder{color:var(--ma-muted);opacity:1;} html body .ma-sa-search__box{transition:box-shadow var(--ma-ease);} @media (hover:hover){ html body :is(.ma-cr__q,.ma-ex__q,input.ma-field):hover:not(:focus){box-shadow:var(--ma-field-hover);} html body .ma-sa-search__box:hover:not(:focus-within){box-shadow:var(--ma-field-hover);} } /* 25b. Every other text field, dropdown and text area in a page or a drawer gets the same hover. (The Showcase forms and the filter drawer's 'Type to find' already had it. Focus is the site-wide ring.) */ @media (hover:hover){ html body :is(.page-wrap,.slideout) :is(input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],textarea,select):not(.ma-sa-search__box input):hover:not(:focus):not(:disabled){box-shadow:var(--ma-field-hover);} } html body :is(.page-wrap,.slideout) :is(input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],textarea,select){transition:box-shadow var(--ma-ease),border-color var(--ma-ease);} /* (:not(#_) below only adds weight, so these win over a page's own '!important' rules.) */ /* 25c. Chips: collection pages and the Creators roles. Were 36px with a plain fill on hover, and 40px with a lift. One height, one hover. */ html body :is(.ma-chip,.ma-cr__chip):not(#_){height:var(--ma-chip-h) !important;min-height:var(--ma-chip-h) !important;box-sizing:border-box;padding-top:0 !important;padding-bottom:0 !important;font-size:var(--ma-fs-label) !important;letter-spacing:var(--ma-track-mono-s) !important;transition:background-color var(--ma-ease),color var(--ma-ease),transform var(--ma-ease),box-shadow var(--ma-ease) !important;} @media (hover:hover){ html body :is(.ma-chip,.ma-cr__chip):hover{background:var(--ma-ink) !important;color:var(--ma-white) !important;transform:var(--ma-lift);box-shadow:var(--ma-ctl-pop);position:relative;z-index:1;} } html body :is(.ma-chip,.ma-cr__chip):active{transform:var(--ma-press);box-shadow:var(--ma-shadow-pink-1);} /* 25d. (Hover changed in rule 27: a soft tint, not ink.) Joined switches: Cards / List on Creators and Shops we carry, 24 / 48 / All on product lists. Creators lifted on hover, Shops turned yellow, and 24 / 48 / All was plain numbers with no edge. */ html body :is(.ma-cr__viewbtn,.ma-ex__viewbtn,.ma-seg__btn):not(#_){height:var(--ma-ctl-h) !important;min-height:var(--ma-ctl-h) !important;box-sizing:border-box;padding:0 var(--ma-sp-14) !important;transform:none !important;box-shadow:none !important;transition:background-color var(--ma-ease),color var(--ma-ease) !important;} /* A proper button bar (David, 20:26: '24 48 All seems to have some odd double border inside'). Every bar is built the same way: each part has the 2px edge, and every part after the first drops its left edge, so there is exactly one line between parts. (24 / 48 / All overlapped its parts by 2px instead, and that overlap was being cancelled by an older rule; its row also had a 2px gap between parts, which is what showed as two edges side by side. The gap is gone.) */ html body :is(.ma-cr__viewbtn,.ma-ex__viewbtn,.ma-seg__btn):not(#_) ~ :is(.ma-cr__viewbtn,.ma-ex__viewbtn,.ma-seg__btn){border-left:0 !important;} html body :is(.ma-cr__viewbtn,.ma-ex__viewbtn,.ma-seg__btn):not(#_)[aria-pressed="true"]{background:var(--ma-ink) !important;color:var(--ma-white) !important;} @media (hover:hover){ html body :is(.ma-cr__viewbtn,.ma-ex__viewbtn,.ma-seg__btn):not(#_):not([aria-pressed="true"]):hover{background:var(--ma-seg-hover) !important;color:var(--ma-ink) !important;} } html body :is(.ma-cr__viewbtn,.ma-ex__viewbtn,.ma-seg__btn):not(#_):not([aria-pressed="true"]):active{background:var(--ma-yellow) !important;color:var(--ma-ink) !important;} html body .ma-perpage:not(#_){display:inline-flex;align-items:center;gap:0 !important;} html body .ma-bar .ma-perpage__opt{height:var(--ma-ctl-h);min-width:44px;padding:0 var(--ma-sp-12);box-sizing:border-box;border:var(--ma-edge) !important;margin-left:0 !important;margin-right:0 !important;background:transparent;color:var(--ma-ink);font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;line-height:var(--ma-lh-solid);} html body .ma-bar a.ma-perpage__opt:not(#_) ~ a.ma-perpage__opt{border-left:0 !important;} html body .ma-bar .ma-perpage__opt.is-current{background:var(--ma-ink);color:var(--ma-white);} @media (hover:hover){html body .ma-bar .ma-perpage__opt:not(.is-current):hover{background:var(--ma-seg-hover);color:var(--ma-ink);}} html body .ma-bar .ma-perpage__label{margin-right:var(--ma-sp-8);font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-s);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;color:var(--ma-muted);} /* Phones: 24 / 48 / All sits at the left edge, in line with the chips above; Filter by and Sort by stay right. */ /* 25e. Creators: chips on their own row above the bar, as on collection pages (they sat under it). */ /* 25g. The bar as named parts, for pages built from now on. All series is the first to use them. .ma-bar (the row) .ma-bar__find + input.ma-field .ma-bar__right .ma-bar__sort + .ma-bar__label .ma-seg + .ma-seg__btn (a button bar) .ma-vh (read aloud, not shown; from monster-arc.css) Creators and Shops we carry still use their own names; they get the same look from the rules above. */ html body .ma-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ma-sp-12) var(--ma-sp-18);margin:0 0 var(--ma-sp-24);padding:var(--ma-sp-14) 0;border-top:var(--ma-edge);border-bottom:var(--ma-hairline);} html body .ma-bar__find{flex:1 1 220px;max-width:360px;margin:0;} html body input.ma-field{width:100%;margin:0 !important;border:var(--ma-edge) !important;} html body .ma-bar__right{display:flex;align-items:center;gap:var(--ma-sp-14);margin-left:auto;flex-wrap:wrap;} html body .ma-bar__sort{display:flex;align-items:center;gap:var(--ma-sp-8);margin:0;} html body .ma-bar__label{font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-s);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;color:var(--ma-muted);line-height:var(--ma-lh-tight);} html body .ma-bar__sort .ma-dd__list{left:auto;right:-2px;} html body .ma-seg{display:inline-flex;} html body .ma-seg__btn:not(#_){display:inline-flex;align-items:center;justify-content:center;margin:0 !important;min-width:0 !important;line-height:var(--ma-lh-solid) !important;border:var(--ma-edge) !important;border-radius:0 !important;background:transparent !important;color:var(--ma-ink) !important;font-family:var(--ma-mono) !important;font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;cursor:pointer;} @media (max-width:749px){ html body .ma-bar__find{flex:1 1 100%;max-width:none;} html body .ma-bar__right{margin-left:0;width:100%;flex-wrap:nowrap;} html body .ma-bar__sort{flex:1 1 auto;min-width:0;} html body .ma-bar__sort .ma-dd{display:block;flex:1 1 auto;min-width:0;} html body .ma-bar__sort .ma-dd__btn{width:100%;} html body .ma-bar__sort .ma-dd__list{left:-2px;right:auto;} } /* 25h. 'Search the archive' (snippets/ma-archive-search.liquid). Its looks lived in the collection section; they are here now so the same field works on creator pages too. */ html body .ma-sa-search__box{position:relative;display:flex;margin:0;} html body .ma-sa-search__box input[type=search]{flex:1;min-width:0;margin:0 !important;border:var(--ma-edge) !important;border-right:0 !important;} html body .ma-sa-search__box input[type=search]:focus{box-shadow:var(--ma-focus-edge) !important;} html body .ma-sa-search__go{flex:none;width:42px;height:40px;min-height:0;margin:0;padding:0;display:grid;place-items:center;border:var(--ma-edge);border-radius:0;background:var(--ma-yellow);color:var(--ma-ink);cursor:pointer;transition:background-color var(--ma-ease),color var(--ma-ease);} @media (hover:hover){html body .ma-sa-search__go:hover{background:var(--ma-ink);color:var(--ma-yellow);}} html body .ma-sa-search__go:active{background:var(--ma-ink);color:var(--ma-yellow);} /* Phones show a search bar in the header, so the page's own is left out there (as on collection pages). */ /* (10 Nov, late: no longer hidden on phones; see rule 29.) */ /* 25f. The shared menu (assets/ma-dd.js): Sort on Shops we carry now uses the one Creators has. It was the browser's own dropdown there. */ html body select[data-ma-dd][hidden]{display:none !important;} html body .ma-dd{position:relative;display:inline-block;} html body .ma-dd__btn{display:inline-flex;align-items:center;gap:var(--ma-sp-14);justify-content:space-between;margin:0 !important;padding:0 var(--ma-sp-12) !important;height:40px !important;min-height:40px !important;min-width:0 !important;box-sizing:border-box;border:var(--ma-edge) !important;border-radius:0 !important;background:var(--ma-card) !important;color:var(--ma-ink) !important;font-family:var(--ma-mono) !important;font-weight:400;font-size:var(--ma-fs-label-l);letter-spacing:var(--ma-track-tight);line-height:var(--ma-lh-solid) !important;text-transform:none;cursor:pointer;transform:none;box-shadow:none;transition:transform var(--ma-ease),box-shadow var(--ma-ease) !important;} html body .ma-dd__val{display:grid;text-align:left;flex:1 1 auto;min-width:0;} html body .ma-dd__val > span{grid-area:1 / 1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body .ma-dd__val > span[data-off]{visibility:hidden;} html body .ma-dd__chev{width:10px;height:10px;flex:none;transition:transform var(--ma-ease);} html body .ma-dd.is-open .ma-dd__chev{transform:rotate(180deg);} @media (hover:hover){html body .ma-dd__btn:hover{transform:translate(-2px,-2px);box-shadow:var(--ma-shadow-pink-4);}} html body .ma-dd__btn:focus-visible,html body .ma-dd.is-open .ma-dd__btn{outline:none;transform:translate(-2px,-2px);box-shadow:var(--ma-shadow-pink-4);} html body .ma-dd__btn:active{transform:translate(1px,1px);box-shadow:var(--ma-shadow-pink-1);} html body .ma-dd__list{position:absolute;z-index:30;top:calc(100% + 8px);left:-2px;min-width:100%;box-sizing:border-box;margin:0 !important;padding:var(--ma-sp-6) 0 !important;list-style:none;background:var(--ma-ink);border:var(--ma-edge);box-shadow:var(--ma-shadow-pink-4);visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity var(--ma-ease),transform var(--ma-ease),visibility 0s linear .12s;} html body .ma-dd.is-open .ma-dd__list{visibility:visible;opacity:1;transform:none;transition:opacity var(--ma-ease),transform var(--ma-ease);} html body .ma-dd__list:focus,html body .ma-dd__list:focus-visible{outline:none !important;} html body .ma-dd__opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--ma-sp-16);margin:0;padding:var(--ma-sp-10) var(--ma-sp-16) var(--ma-sp-10) var(--ma-sp-24);font-family:var(--ma-mono);font-size:var(--ma-fs-label-l);line-height:var(--ma-lh-tight);color:var(--ma-white);white-space:nowrap;cursor:pointer;transition:color var(--ma-ease),transform var(--ma-ease);} html body .ma-dd__opt::before{content:"";position:absolute;left:10px;top:50%;width:0;height:2px;background:var(--ma-yellow);transition:width var(--ma-ease);} html body .ma-dd__opt.is-active{color:var(--ma-yellow);transform:translateX(6px);} html body .ma-dd__opt.is-active::before{width:10px;} html body .ma-dd__opt[aria-selected="true"]{font-weight:700;} html body .ma-dd__opt[aria-selected="true"]::after{content:"";width:7px;height:7px;flex:none;background:var(--ma-pink);} html body .ma-dd__opt.is-active[aria-selected="true"]::after{background:var(--ma-yellow);} html body .ma-ex__sortwrap .ma-dd__list{left:auto;right:-2px;} @media (prefers-reduced-motion:reduce){html body .ma-dd__btn,html body .ma-dd__list,html body .ma-dd__opt,html body .ma-dd__chev,html body :is(.ma-chip,.ma-cr__chip){transition:none !important;transform:none !important;}} /* 26. The primary button (10 Nov 2026, David asked if 'Show results' matched the other primary buttons). It matched the newer ones at rest and on hover but pressed differently, and the site had two recipes: the theme's solid .button (hero button, Check out, Shop all, Subscribe, Send, the search page button) and the Showcase and band buttons. There is now one, as named values at the top of assets/monster-arc.css (--ma-btn-edge, -rest, -pop, -down, -press), and these all read it: solid .button (assets/monster-arc.css) Show results (16d above) Send (monster-arc-buttons.css) Subscribe (monster-arc-fixes.css) .ma-sc__btn .ma-cd__btn .ma-gb__btn .mys__btn (their sections) Height stays by place: 48px as standard, 52px where the button is the page's main call. Ink buttons (Add and Choose on cards, Add to cart on a product page) are a different button and are not part of this. */ /* 27. One edge, and the joined switch hover (10 Nov 2026, David). THE EDGE. An audit of every button and field found these off the 2px ink edge: - outlined buttons (Your wall, View cart, the hero's second button, search and 404 buttons): 1px - the quantity box on a bag line: 1px, light grey - footer email field: 1px, dark grey on the dark footer - phone header search: 1px, faint white - header search (desktop): a faint underline, no box Now: outlined buttons are 2px at the source (--buttons-border-weight, snippets/css-variables.liquid); the rest read --ma-edge (ink) or --ma-edge-light (off-white, dark surfaces) from assets/monster-arc.css. The footer and header fields are restyled where they live, in assets/monster-arc-fixes.css. JOINED SWITCHES. Hovering the part that wasn't chosen filled it ink, so both parts looked chosen. It now takes a soft ink tint (--ma-seg-hover) and keeps ink type; the chosen part is the only solid one. Press still flashes yellow. Applies to 24 / 48 / All, Cards / List and the drawer's Filter by / Sort by. */ button.btn-outlined,.button.btn-outlined{line-height:calc(var(--buttons-height) - 4px);} html :is(.mini-cart,[data-section-type="cart-template"],.ajax-cart__page-wrapper) .ajax-cart__item-qty.border{border:var(--ma-edge) !important;} /* 28. Fields on dark surfaces (10 Nov 2026, David: the solid off-white edge was too bright, and the search had no hover or focus). Header search, phone header search, phone menu search, footer email. One recipe, values in assets/monster-arc.css: rest the see-through edge the hero uses on its arrows and thumbnails (--ma-edge-light) hover the edge goes solid off-white (--ma-edge-light-on) with the soft light shadow focus yellow edge and a hard yellow shadow (--ma-field-focus-dark), as the hero arrows; no ring Why there was no hover: rule 25b gives every field on a page the ink hover shadow, and ink can't show on ink. Why there was no focus: the theme opens the header search without putting the cursor in it, so the field sat unfocused (fixed in assets/ma-typeahead.js), and focus was only a pink edge. */ html body :is(.section-header .section-header__searchbox .searchbox__input,.section-footer input[type="email"],#slideout-mobile-navigation .mobile-menu__search .search__input):not(#_){border:var(--ma-edge-light) !important;border-radius:0 !important;transition:border-color var(--ma-ease),box-shadow var(--ma-ease) !important;} @media (hover:hover){html body :is(.section-header .section-header__searchbox .searchbox__input,.section-footer input[type="email"],#slideout-mobile-navigation .mobile-menu__search .search__input):not(#_):hover:not(:focus){border-color:var(--ma-edge-light-on) !important;box-shadow:var(--ma-field-hover-light) !important;}} html body :is(.section-header .section-header__searchbox .searchbox__input,.section-footer input[type="email"],#slideout-mobile-navigation .mobile-menu__search .search__input):not(#_):focus{border-color:var(--ma-yellow) !important;box-shadow:var(--ma-field-focus-dark) !important;outline:none !important;} html body .header--mobile-search .searchbox__form:not(#_){border:var(--ma-edge-light) !important;transition:border-color var(--ma-ease),box-shadow var(--ma-ease) !important;} @media (hover:hover){html body .header--mobile-search .searchbox__form:not(#_):hover:not(:focus-within){border-color:var(--ma-edge-light-on) !important;box-shadow:var(--ma-field-hover-light) !important;}} html body .header--mobile-search .searchbox__form:not(#_):focus-within{border-color:var(--ma-yellow) !important;box-shadow:var(--ma-field-focus-dark) !important;} html body .header--mobile-search .searchbox__form:not(#_) .searchbox__input{box-shadow:none !important;outline:none !important;} @media (prefers-reduced-motion:reduce){html body :is(.section-header .section-header__searchbox .searchbox__input,.section-footer input[type="email"],#slideout-mobile-navigation .mobile-menu__search .search__input):not(#_),html body .header--mobile-search .searchbox__form:not(#_){transition:none !important;}} /* 29. Find in place (10 Nov 2026, David: 'I was hoping that the search acted more like a typeahead search that filters the same view in place'). The bar field on collection and creator pages narrows the books on the page as you type. snippets/ma-find.liquid, assets/ma-find.js. It is the plain Find field that Creators, Shops we carry and All series use: no yellow button, nothing drops down. It was hidden on phones when it was a shop-wide search (the header search did that job); now it works on the page in front of you, so on a phone it takes its own row above the other controls. */ html body .ma-find{position:relative;} html body [data-ma-find-grid][hidden],html body #main-collection-product-grid > .product-loop[hidden]{display:none !important;} html body .ma-find__count{grid-column:1 / -1;margin:0 0 -6px;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);line-height:var(--ma-lh-snug);text-transform:uppercase;color:var(--ma-deep-steel);} html body .ma-find__none{grid-column:1 / -1;box-sizing:border-box;max-width:640px;margin:0 0 var(--ma-sp-32);padding:var(--ma-sp-28);border:2px dashed var(--ma-ink);} html body .ma-find__none-h{margin:0 0 var(--ma-sp-10);font-size:var(--ma-fs-l);line-height:var(--ma-lh-body);} html body .ma-find__none-p{margin:0;} html body .ma-find__all{font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-l);letter-spacing:var(--ma-track-mono);text-transform:uppercase;color:var(--ma-ink) !important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;margin:0 !important;transition:text-decoration-color var(--ma-ease);} @media (hover:hover){html body .ma-find__all:hover{text-decoration-color:var(--ma-pink);}} html body .ma-find-out{display:none !important;} html body [data-ma-finding] .ma-cb__more-item[hidden]:not(.ma-find-out){display:block !important;} html body [data-ma-finding] .ma-cb__showwrap{display:none !important;} @media (max-width:749px){ } /* 30. Search results page on a phone (10 Nov 2026). The count now says what was searched ("161 artifacts for 'batman'"), which is too long to share a row with Filter by and Sort by, and pushed Sort by onto a row of its own. The count takes its own row. The header's phone search bar is hidden on this page: the page has its own field right under it, and two search boxes stacked was one too many. */ @media (max-width:749px){ html body.template-search .page-wrap > .header--mobile-search{display:none !important;} } /* 31. The browse bar, one layout (10 Nov 2026, David: 'We should try to keep these layouts and filters similar'). Every browse page: Shop all and every collection page, creator pages, Creators, Shops we carry, All series, the Collections page. Top to bottom: 2px rule chips row, where the page has one (series, kinds, roles) the count: '409 artifacts', '59 shops'. While Find is narrowing it reads '12 of 409 artifacts'. Not on a page with chips (22:57, David): the 'All' chip carries the number there, and the count then shows above the matches while Find narrows. the row: Find pinned left with an X to clear it; on the right the per-page switch, Filter by and Sort by (collection pages) or Sort and Cards / List (in-page lists) the 'filtering by' row, when filters are on (collection pages) 1px line On a phone the row stacks: Find full width, the right-hand controls under it. Before: Creators, Shops and All series had the rules and collection pages didn't; the count sat in three different places; Find floated right on some pages and was missing on others. */ html body .ma-bar:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:var(--ma-sp-12) var(--ma-sp-16);margin:0 0 var(--ma-sp-28);padding:var(--ma-sp-14) 0 var(--ma-sp-16);border-top:var(--ma-edge);border-bottom:var(--ma-hairline);} html body .ma-bar__chips:not(#_){order:-2;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:var(--ma-sp-8);margin:0 !important;} html body .ma-bar__count:not(#_){order:-1;flex:1 1 100%;margin:0;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);line-height:var(--ma-lh-snug);text-transform:uppercase;color:var(--ma-deep-steel);} html body .ma-bar__row:not(#_){order:0;flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ma-sp-12);} html body .ma-bar__row > .ma-find:not(#_){order:0;flex:0 1 320px;min-width:200px;max-width:none;margin:0 auto 0 0 !important;} html body .ma-bar__right:not(#_){order:1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ma-sp-12);margin:0 0 0 auto;} html body .ma-bar .ma-perpage{margin:0 !important;} html body .ma-bar .ma-active{order:10;flex:1 1 100%;margin:0;} html body .ma-bar .slideout__trigger-filters{display:inline-flex;align-items:center;justify-content:center;height:var(--ma-ctl-h) !important;min-height:var(--ma-ctl-h) !important;box-sizing:border-box;margin:0 !important;padding:0 var(--ma-sp-20) !important;border-width:2px !important;white-space:nowrap;line-height:var(--ma-lh-solid);} html body .ma-bar .ma-perpage{display:inline-flex;align-items:center;height:var(--ma-ctl-h);padding:0;} html body .ma-bar .ma-perpage__opt{display:inline-flex;align-items:center;justify-content:center;margin:0 !important;} html body .ma-bar .ma-perpage__label{display:inline-flex;align-items:center;height:var(--ma-ctl-h);line-height:var(--ma-lh-solid);margin:0 var(--ma-sp-8) 0 0;} /* The X in a Find field */ html body .ma-find{position:relative;} html body .ma-find input.ma-field{padding-right:var(--ma-sp-40) !important;} html body .ma-find input[type=search]::-webkit-search-cancel-button,html body .ma-find input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none;} html body .ma-find__clear{position:absolute;top:0;right:0;width:40px;height:var(--ma-ctl-h);display:grid;place-items:center;margin:0 !important;padding:0 !important;min-height:0 !important;border:0 !important;border-radius:0;background:transparent !important;color:var(--ma-muted) !important;box-shadow:none !important;transform:none !important;cursor:pointer;transition:color var(--ma-ease);} html body .ma-find__clear[hidden]{display:none !important;} @media (hover:hover){html body .ma-find__clear:hover{color:var(--ma-ink) !important;}} html body .ma-find__clear:active{color:var(--ma-pink) !important;} html body .ma-find__clear:focus-visible{outline:var(--ma-focus-ring);outline-offset:-3px;} @media (max-width:749px){ html body .ma-bar__row > .ma-find:not(#_){flex:1 1 100%;min-width:0;} html body .ma-bar__right:not(#_){width:100%;margin-left:0;flex-wrap:nowrap;} html body .ma-bar .ma-perpage__label{display:none !important;} html body .ma-bar .slideout__trigger-filters{padding:0 var(--ma-sp-14) !important;} html body .ma-bar__chips:not(#_){flex-wrap:nowrap;overflow-x:auto;padding:0 var(--ma-sp-32) 0 0;margin-right:-16px !important;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);} html body .ma-bar__chips::-webkit-scrollbar{display:none;} } /* 32. Home in the band (10 Nov 2026, David). A small link above the page title takes the place of the breadcrumb row that sat under the band and only ever said 'Home / this page'. Off-white at rest, yellow on hover, the site ring on focus. */ html body .ma-band__home{display:inline-block;margin:0 0 var(--ma-sp-10) !important;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-s);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;line-height:var(--ma-lh-tight);color:var(--ma-white-a70) !important;text-decoration:none !important;transition:color var(--ma-ease);} html body .ma-band__home span{display:inline-block;transition:transform var(--ma-ease);} @media (hover:hover){html body .ma-band__home:hover{color:var(--ma-yellow) !important;}html body .ma-band__home:hover span{transform:translateX(-3px);}} html body .ma-band__home:focus-visible{color:var(--ma-yellow) !important;outline:var(--ma-focus-ring-dark);outline-offset:4px;} /* With the breadcrumb row gone, a bar that is not the first thing under the band sits 28px below what is. */ html body #CollectionProductGrid > .ma-bar:first-child{margin-top:var(--ma-sp-28);} @media (prefers-reduced-motion:reduce){html body .ma-band__home span{transition:none;transform:none !important;}} /* 32c. The same link on a light band (11 Nov 2026): the Showcase headers (cyan) and Showcase profiles. Ink at rest, full ink on hover with the same arrow nudge, an ink ring on focus (the cyan ring would vanish on cyan). */ html body .ma-band__home.ma-band__home--ink{color:var(--ma-ink-a75) !important;} @media (hover:hover){html body .ma-band__home.ma-band__home--ink:hover{color:var(--ma-ink) !important;}} html body .ma-band__home.ma-band__home--ink:focus-visible{color:var(--ma-ink) !important;outline:3px solid var(--ma-ink);outline-offset:4px;} /* 32b. The words stay clear of what sits at the right of the band. The title and the line under it wrap before they reach the bolt marks (snippets/ma-header-marks.liquid) or the book covers (snippets/ma-header-books.liquid, which already does this for the title). On phones the marks sit below the words, so no limit there. */ html body .template-header:has(.ma-marks) .section__banner-caption > h1, html body .template-header:has(.ma-marks) .section__banner-caption > .rte{max-width:calc(100% - 400px);} html body .template-header:has(.ma-peek) .section__banner-caption > .rte{max-width:calc(100% - 470px);} @media (max-width:1099px){ html body .template-header:has(.ma-marks) .section__banner-caption > h1, html body .template-header:has(.ma-marks) .section__banner-caption > .rte{max-width:calc(100% - 330px);} html body .template-header:has(.ma-peek) .section__banner-caption > .rte{max-width:calc(100% - 380px);} } @media (max-width:749px){ html body .template-header:has(.ma-marks) .section__banner-caption > h1, html body .template-header:has(.ma-marks) .section__banner-caption > .rte{max-width:none;} html body .template-header:has(.ma-peek) .section__banner-caption > .rte{max-width:calc(100% - 150px);} } /* 33. No rule between the band and the bar (10 Nov 2026, David: 'the black horizontal rule above the collection filter tools' is not needed, 'the bottom of the header background will act as that horizontal rule'). A bar that is the first thing under the band (ma-bar--top, set by its section) drops the 2px rule and its top padding and sits 24px under the band. On a collection page the sections that can render between the band and the bar (primer, artist, retailer, series strip) put the rule and the 28px back. */ html body .ma-bar--top:not(#_){border-top:0;padding-top:0;margin-top:0;} html body #CollectionProductGrid > .ma-bar--top:first-child{margin-top:var(--ma-sp-2);} html body .shopify-section:has(> .ma-primer, > .ma-artist, > .ma-rt, > .ma-ss) ~ .shopify-section .ma-bar--top:not(#_){border-top:var(--ma-edge);padding-top:var(--ma-sp-14);margin-top:var(--ma-sp-28);} html body .ma-cr:has(> .grid__wrapper .ma-bar--top), html body .ma-se:has(> .grid__wrapper .ma-bar--top), html body .ma-ex:has(> .grid__wrapper .ma-bar--top), html body .ma-sv.global__section:has(> .grid__wrapper .ma-bar--top){padding-top:var(--ma-sp-24);} /* 34. The bag: drawer and cart page (11 Nov 2026, David: 'lets return to the professional polish and consistency, and interaction pass'). Markup in snippets/cart-form.liquid, the cart page in sections/main-cart.liquid. 34a. Quantity is a joined control, like 24 / 48 / All: 40px, the ink edge, one line between parts, a mono number, the soft tint on hover, yellow on press. It was 44px, a 13px browser-default number, 30px-wide buttons, and an ink fill on hover. − rests at 1 (Remove is beside it) and + rests at the last copy (its label says '1 in stock'); both say so by fading and refusing the pointer. */ html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__item-qty:not(#_){display:inline-flex !important;align-items:stretch;width:auto !important;height:var(--ma-ctl-h) !important;min-height:0 !important;box-sizing:border-box;padding:0 !important;border:var(--ma-edge) !important;background:transparent;} html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__item-quantity:not(#_){display:flex !important;align-items:stretch;height:100%;margin:0 !important;} html body :is(.mini-cart,.ajax-cart__page-wrapper) :is(.ajax-cart__qty-control--down,.ajax-cart__qty-control--up):not(#_){display:grid !important;place-items:center;width:38px !important;height:100% !important;min-height:0 !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;cursor:pointer;line-height:0;} html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__qty-input:not(#_){width:38px !important;height:100% !important;margin:0 !important;padding:0 !important;border:0 !important;border-left:var(--ma-edge) !important;border-right:var(--ma-edge) !important;border-radius:0 !important;background:transparent !important;color:var(--ma-ink) !important;font-family:var(--ma-mono) !important;font-weight:700 !important;font-size:var(--ma-fs-s) !important;line-height:var(--ma-lh-solid) !important;text-align:center;-moz-appearance:textfield;} html body :is(.mini-cart,.ajax-cart__page-wrapper) :is(.ajax-cart__qty-control--down,.ajax-cart__qty-control--up):not(#_) svg .hover-fill{fill:var(--ma-ink) !important;} @media (hover:hover){ html body :is(.mini-cart,.ajax-cart__page-wrapper) :is(.ajax-cart__qty-control--down,.ajax-cart__qty-control--up):not(#_):not(:disabled):hover{background:var(--ma-seg-hover) !important;} } html body :is(.mini-cart,.ajax-cart__page-wrapper) :is(.ajax-cart__qty-control--down,.ajax-cart__qty-control--up):not(#_):not(:disabled):active{background:var(--ma-yellow) !important;} html body :is(.mini-cart,.ajax-cart__page-wrapper) :is(.ajax-cart__qty-control--down,.ajax-cart__qty-control--up):not(#_):focus-visible{background:transparent !important;outline:2px solid var(--ma-pink) !important;outline-offset:-5px;} html body :is(.mini-cart,.ajax-cart__page-wrapper) :is(.ajax-cart__qty-control--down,.ajax-cart__qty-control--up):not(#_):disabled{cursor:not-allowed;background:transparent !important;} html body :is(.mini-cart,.ajax-cart__page-wrapper) :is(.ajax-cart__qty-control--down,.ajax-cart__qty-control--up):not(#_):disabled svg{opacity:.28;} html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__qty-input:not(#_):focus{outline:none;box-shadow:inset 0 -3px 0 var(--ma-pink) !important;} /* One copy in the bag and one on the shelf: 'Qty 1' in place of a control with nothing to do. */ html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__item-qty.is-single:not(#_){display:none !important;} html body .ma-qty-one:not(#_){display:inline-flex;align-items:center;height:var(--ma-ctl-h);margin:0 !important;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;color:var(--ma-muted);} html body .mini-cart .ajax-cart__cart-item .ma-qty-one{grid-column:2 / 4;grid-row:2;justify-self:start;} /* Cart page: Remove sits beside the quantity, centred on it. */ html body .ajax-cart__page-wrapper .ajax-cart__item-details :is(.ajax-cart__item-qty,.ma-qty-one,.ma-remove):not(#_){vertical-align:middle;} html body .ajax-cart__page-wrapper .ajax-cart__item-details .ma-remove:not(#_){margin:0 0 0 var(--ma-sp-14) !important;} /* Covers sit at the top of their line, level with the title (they were centred on the whole line). */ html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__cart-item:not(#_) > .ajax-cart__item-image{align-self:start !important;display:block !important;} html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__cart-item:not(#_) > .ajax-cart__item-image :is(.ajax-cart__item-image__wrapper,a){display:block;margin:0 !important;} html body :is(.mini-cart,.ajax-cart__page-wrapper) .ajax-cart__cart-item:not(#_) > .ajax-cart__item-image img{display:block;margin:0 !important;} /* 34b. A line whose book sold out while it sat in the bag, or that asks for more than we have ('1 in stock', never 'only' or 'left'). Mono caps like the other small labels; the sold-out one has a pink bar and its cover fades. */ html body .ma-line-note:not(#_){margin:var(--ma-sp-8) 0 0 !important;font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label-s);letter-spacing:var(--ma-track-mono-s);line-height:var(--ma-lh-snug);text-transform:uppercase;color:var(--ma-ink);} html body .ma-line-note--out:not(#_){padding-left:var(--ma-sp-8);border-left:3px solid var(--ma-pink);} /* '1 in stock' looks like the product page's stock line (snippets/ma-stock.liquid): a grey dot, steel type. */ html body .ma-line-note--stock:not(#_){display:flex;align-items:center;gap:var(--ma-sp-8);color:var(--ma-slate);} html body .ma-line-note__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ma-steel);} html body .ajax-cart__cart-item.is-gone .ajax-cart__item-image img{opacity:.45;filter:grayscale(1);} /* 34c. The order note now sits under the books (it was in the drawer's fixed footer). */ html body .ma-cart-note:not(#_){margin:var(--ma-sp-4) 0 var(--ma-sp-18);} html body .ma-cart-note .details{margin:0 !important;border-top:var(--ma-hairline);border-bottom:var(--ma-hairline);} /* 34d. The drawer's footer. One total line (Subtotal only shows when a discount makes it differ), tighter spacing, and the two buttons. It took 41% of the screen and left room for about one and a half books. */ html body .mini-cart .ajax-cart__summary-wrapper:not(#_){padding-top:var(--ma-sp-14) !important;padding-bottom:var(--ma-sp-16) !important;} html body .mini-cart .ajax-cart__final-details .total:not(#_){margin:0 !important;padding:0 !important;} html body .mini-cart .ajax-cart__final-details .total p:not(#_){margin:0 !important;} html body .mini-cart .ma-shipline:not(#_){margin:var(--ma-sp-4) 0 var(--ma-sp-12) !important;} /* 34e. The cart page on a wide screen: the books on the left, the summary on the right, staying in view while the books scroll, with Shop Pay / PayPal / Google Pay right under it (placed by the script in sections/main-cart.liquid, which only measures; the buttons are never moved in the page). The toploader box and the order note sit under the books. Narrower screens keep the theme's stacked layout. */ @media (min-width:990px){ html body .ajax-cart__page-wrapper .ajax-cart__cart-form:not(#_){display:grid !important;grid-template-columns:minmax(0,7fr) minmax(0,5fr) !important;column-gap:var(--ma-sp-48) !important;row-gap:0 !important;align-items:start;} html body .ajax-cart__page-wrapper .ajax-cart__cart-form:not(#_) > *{grid-column:1 !important;grid-row:auto !important;width:auto !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-form:not(#_) > .ajax-cart__cart-items{grid-row:1 !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-form:not(#_) > .ma-addon{margin-top:var(--ma-sp-18);} html body .ajax-cart__page-wrapper .ajax-cart__cart-form:not(#_) > .ajax-cart__summary-wrapper{grid-column:2 !important;grid-row:1 / span 12 !important;align-self:start;position:sticky;top:var(--ma-stick,96px);} /* The summary keeps room under itself for the buttons (a sticky box stops at its margin), so the pair travels together and ends level with the last book, with no blank space added to the page. */ html body .ma-cart--rail:not(#_){position:relative;} html body .ma-cart--rail .ajax-cart__cart-form:not(#_) > .ajax-cart__summary-wrapper{margin-bottom:calc(var(--ma-exp-h,0px) + var(--ma-sp-6)) !important;} html body .ma-cart--rail .ajax-cart__footer-wrapper:not(#_){position:absolute !important;top:calc(var(--ma-rail-top,0px) + var(--ma-sum-h,0px) + 6px);bottom:var(--ma-rail-bot,48px);left:var(--ma-rail-left,0px);width:var(--ma-rail-w,100%);display:block !important;margin:0 !important;padding:0 !important;} html body .ma-cart--rail .ajax-cart__footer-wrapper:not(#_) > .span-12{position:sticky;top:calc(var(--ma-stick,96px) + var(--ma-sum-h,0px) + 6px);} html body .ma-cart--rail .or-divider:not(#_){margin:0 0 var(--ma-sp-12) !important;} } /* 34g. The cart page on a phone takes the drawer's line layout: cover on the left; title, then quantity, then Remove with the price at the right. The theme's three columns squeezed the title to a word a line. */ @media (max-width:767px){ html body .ajax-cart__page-wrapper .ajax-cart__cart-item:not(#_){display:grid !important;grid-template-columns:72px minmax(0,1fr) auto !important;grid-template-rows:auto auto auto;column-gap:var(--ma-sp-14) !important;row-gap:var(--ma-sp-10);align-items:start;padding:var(--ma-sp-16) !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-item:not(#_) > .ajax-cart__item-image{grid-column:1 !important;grid-row:1 / span 3 !important;width:auto !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-item:not(#_) > .ajax-cart__item-details{display:contents !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-item:not(#_) .ajax-cart__cart-title__wrapper{grid-column:2 / 4;grid-row:1;display:block !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-item:not(#_) :is(.ajax-cart__item-qty,.ma-qty-one){grid-column:2 / 4;grid-row:2;justify-self:start;margin:0 !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-item:not(#_) .ma-remove{grid-column:2;grid-row:3;justify-self:start;align-self:center;margin:0 !important;} html body .ajax-cart__page-wrapper .ajax-cart__cart-item:not(#_) > .ajax-cart__item-price{grid-column:3 !important;grid-row:3 !important;align-self:center !important;justify-self:end;width:auto !important;margin:0 !important;text-align:right;white-space:nowrap;} html body .ajax-cart__header__continue-link-text:not(#_){white-space:nowrap;} } /* 34f. 'Continue shopping' on the cart page: the drawn arrow (snippets/ma-arrow.liquid), and the label shows on phones too (an arrow on its own didn't say where it went). */ html body .ajax-cart__header__continue-link .ma-continue__arrow{width:1.05em;height:.9em;margin:0;} /* 35. Expanders (11 Nov 2026, David: 'the animation to the order note expander seems really slow and unlike our other animations'). Drop opens every expander (the order note, the product page's sections, the FAQ) over half a second at an even pace, and closes the arrow with a jump. They now open the way the card's Choose panel does (--ma-open, .22s, quick start and a soft finish) and close a little quicker (--ma-close), with the arrow turning both ways on the same timing. Reduce motion still turns it off (Drop's own rule). */ :root{--accordion-transition-duration:.22s;} @supports selector(::details-content) and (block-size: calc-size(auto, size)){ @media (prefers-reduced-motion:no-preference){ html body .details::details-content{transition:block-size var(--ma-close),content-visibility var(--ma-close) allow-discrete;} html body .details[open]::details-content{transition:block-size var(--ma-open),content-visibility var(--ma-open) allow-discrete;} } } @media (prefers-reduced-motion:no-preference){ html body .details > .details__summary .details__svg{transition:rotate var(--ma-close);} html body .details[open] > .details__summary .details__svg{transition:rotate var(--ma-open);} } /* 33. Plain pages line up with the band (11 Nov 2026, polish pass). The title in the band, the page copy and the contact form start at the same left edge as every other page's content (3%, the site's grid gutters). Drop's 'narrow' wrapper set the copy in at 7%, and the contact fields sat in another 3% inside that. The copy keeps its reading width (68ch, monster-arc.css 3a). */ html body .page-template > .grid__wrapper.narrow{padding-left:var(--ma-gutter);padding-right:var(--ma-gutter);} html body .contact__form-section{padding-left:var(--ma-gutter);padding-right:var(--ma-gutter);} html body .contact__form-section .contact-form__wrapper{padding-left:0;padding-right:0;} /* Policy pages (Shipping, Refund, Privacy, Terms, Contact information). Shopify draws these itself, with a centred title and text running the full width. Now: the page band on top (layout/theme.liquid), Shopify's title hidden, and the text set like the other plain pages, at the same left edge and the same section spacing. */ html body .page-wrap:has(> #shopify-section-template-header) .shopify-policy__title{display:none;} html body.over-content--true .page-wrap:has(> #shopify-section-template-header){padding-top:0;} /* Drop pads 'template-' pages (policies) for a floating header; the band starts under ours like everywhere else */ html body .page-wrap .shopify-policy__container{max-width:none;margin:0;box-sizing:border-box;padding:calc(var(--section-padding) / 2) var(--ma-gutter);} html body .shopify-policy__body .rte p{max-width:68ch;} html body .shopify-policy__body .rte :is(ul,ol){margin:0 0 var(--ma-sp-24) !important;} html body .shopify-policy__body .rte li{margin-bottom:var(--ma-sp-6);max-width:66ch;} html body .shopify-policy__body .rte h2{font-family:var(--ma-head);font-weight:900;margin-top:var(--ma-sp-40);margin-bottom:var(--ma-sp-10);line-height:var(--ma-lh-head);} html body .shopify-policy__body .rte > h2:first-child{margin-top:0;} html body .shopify-policy__body .rte h3{margin-top:var(--ma-sp-28);margin-bottom:var(--ma-sp-6);} html body .shopify-policy__body .rte [style*="font-size"]{font-size:inherit !important;} /* text pasted into a policy can carry its own size (one Refund paragraph did) */ /* 34. Small leftovers (11 Nov 2026, polish pass). - Pin buttons on cards and Showcase tiles are 36px. On touch screens an invisible edge makes each a 44px target, the comfortable size for a finger. How they look doesn't change. - Phone menu: the arrows sat 3px above the middle of their words (fixed in rule 35, which centres them in the row). */ @media (pointer:coarse){html body :is(.ma-pin--card,.ma-pin--tile)::after{content:"";position:absolute;inset:-6px;}} /* -6px from inside the 2px border = 4px past the edge, 44px */ /* 35. Whole-row taps in the phone menu and the filter and sort panel (11 Nov 2026, David: 'allows one to tap anywhere on the row with the menu item. Right now it's only on the menu item text'). Each row is one target, edge to edge and top to bottom. The name stretches across the row (it was only as wide as its words in the phone menu's lists), and a row's arrow is a strip the full height of the row at its end (--ma-row-arrow), with the arrow centred on the words. A row with a list under it opens that list wherever it's tapped, in both panels: the phone menu's names now do what the filter panel's group names already did (sections/mobile-navigation.liquid). The list's first row is the link to the page itself. Rows that hold fields (the price range, the type-to-find box) are left alone. */ html body :is(#slideout-mobile-navigation,#slideout-collection-filters,#slideout-search-filters) :is(.slide-nav__first-level--item,.slide-nav__second-level--item,.slide-nav__third-level--item):has(> a){display:flex;align-items:stretch;} html body :is(#slideout-mobile-navigation,#slideout-collection-filters,#slideout-search-filters) li:has(> a) > :is(.slide-nav__first-level--link,.slide-nav__second-level--link,.slide-nav__third-level--link,.slide-nav__parent--link){flex:1 1 auto;min-width:0;width:auto !important;margin:0 !important;} html body :is(#slideout-mobile-navigation,#slideout-collection-filters,#slideout-search-filters) li:has(> a) > .slide-nav__button{display:flex;align-items:center;align-self:stretch;height:auto !important;min-height:0 !important;margin:0 !important;} html body :is(#slideout-mobile-navigation,#slideout-collection-filters,#slideout-search-filters) li:has(> a) > :is(.slide-nav__first-level--button,.slide-nav__second-level--button){flex:0 0 var(--ma-row-arrow);width:var(--ma-row-arrow) !important;justify-content:flex-end;} html body :is(#slideout-mobile-navigation,#slideout-collection-filters,#slideout-search-filters) li:has(> a) > .slide-nav__button svg{pointer-events:none;} /* 36. Keyboard (11 Nov 2026, accessibility pass). a. Drop's 'Skip to content' link stayed clipped to 1px even when focused, so the first Tab on every page landed on something invisible. Focused, it now shows top left as the main button. b. Drawers take focus when they open (assets/ma-drawers.js). The panel itself takes it, so no ring round the whole drawer; the ring shows on whatever Tab reaches next. */ html .skip-link.visually-hidden:focus{position:fixed !important;top:var(--ma-sp-8);left:var(--ma-sp-8);z-index:10000;width:auto;height:auto;clip:auto;overflow:visible;margin:0;padding:0 var(--ma-sp-16);line-height:var(--ma-field-h);background:var(--ma-yellow);color:var(--ma-ink);box-shadow:var(--ma-btn-edge),var(--ma-btn-rest);font-family:var(--ma-head);font-weight:900;text-transform:uppercase;letter-spacing:var(--ma-track-btn);text-decoration:none;} html :is([popover].slideout,[popover].modal__container):focus{outline:none !important;} /* 37. 'What is Your wall?' (11 Nov 2026, David: an (i) popover beside the larger pins). An info button after the larger 'Pin to your wall' buttons (collection and creator bands, product pages) opens a short note under the row (assets/ma-wall.js). It looks like the pin beside it: same edge, same height, same hover. */ html .ma-pin-row{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--ma-sp-8);} html .product__section--main .ma-wall-about__btn{width:var(--ma-field-h);height:var(--ma-field-h);} html .ma-wall-about{display:inline-flex;pointer-events:auto;} html .ma-wall-about__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:0 !important;margin:0 !important;padding:0 !important;border:var(--ma-edge);border-radius:0;background:var(--ma-card) !important;color:var(--ma-ink);box-shadow:none;cursor:pointer;transition:transform var(--ma-ease),box-shadow var(--ma-ease),background-color var(--ma-ease);} html .ma-wall-about__btn[aria-expanded="true"]{background:var(--ma-ink) !important;color:var(--ma-white);} html .section__banner-caption .ma-wall-about__btn{width:34px;height:34px;background:transparent !important;color:var(--ma-white);border-color:var(--ma-white);} html .section__banner-caption .ma-wall-about__btn[aria-expanded="true"]{background:var(--ma-white) !important;color:var(--ma-ink);} @media (hover:hover){html .ma-wall-about__btn:hover{transform:var(--ma-lift);box-shadow:var(--ma-shadow-pink-3);}} html .ma-wall-about__panel{position:absolute;left:0;top:calc(100% + var(--ma-sp-8));z-index:40;width:min(340px,calc(100vw - 2 * var(--ma-sp-16)));display:flex;flex-direction:column;gap:var(--ma-sp-8);padding:var(--ma-sp-14) var(--ma-sp-16);background:var(--ma-card);color:var(--ma-ink);border:var(--ma-edge);box-shadow:var(--ma-shadow-pink-4);text-align:left;font-family:var(--ma-body);text-transform:none;letter-spacing:normal;white-space:normal;} html .ma-wall-about__panel[hidden]{display:none;} html .ma-wall-about__panel p{margin:0 !important;font-size:var(--ma-fs-s);line-height:var(--ma-lh-body);color:var(--ma-ink);} html .ma-wall-about__panel .ma-wall-about__h{font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;line-height:var(--ma-lh-tight);} html .ma-wall-about__a{align-self:flex-start;margin-top:var(--ma-sp-2);font-family:var(--ma-mono);font-weight:700;font-size:var(--ma-fs-label);letter-spacing:var(--ma-track-mono-s);text-transform:uppercase;color:var(--ma-ink) !important;text-decoration:none !important;border-bottom:var(--ma-edge-w) solid var(--ma-pink);padding-bottom:var(--ma-sp-2);} html .ma-wall-about__a:hover{color:var(--ma-pink-text) !important;} @media (prefers-reduced-motion:reduce){html .ma-wall-about__btn:hover{transform:none;}} /* 38. Preorders at the point of buying (11 Nov 2026). A preorder version says when it's expected: on the product page in place of 'N in stock' (snippets/ma-stock.liquid), and on its line in the bag; a bag with a preorder and anything else says it all ships together (snippets/cart-form.liquid). Cyan dot, as the Preorder badge. */ html body .ma-line-note--pre:not(#_){display:flex;align-items:center;gap:var(--ma-sp-8);color:var(--ma-ink);} html body .ma-line-note--pre .ma-line-note__dot,html .ma-bag-pre .ma-line-note__dot{background:var(--ma-cyan-deep);} html .ma-bag-pre{display:flex;align-items:flex-start;gap:var(--ma-sp-8);margin:var(--ma-sp-4) 0 var(--ma-sp-16) !important;font-size:var(--ma-fs-s);line-height:var(--ma-lh-snug);color:var(--ma-ink);} html .ma-bag-pre .ma-line-note__dot{margin-top:.45em;} /* 39. Sold (12 Nov 2026, David, project doc Sold_Out_Rule.md). A listing with nothing for sale says 'Sold' where the price was, so the last price is never shown: cards through snippets/ma-price-range.liquid (the badge says Sold too). On the product page a sold choice does the same. snippets/snip-product-price.liquid adds 'Sold' and the class ma-sold-rule, Drop's script adds price--sold-out when a sold choice is picked, and this swaps them. 'When sold out' set to Comes back keeps the price and 'Sold out'. The type is the price's own (monster-arc-product.css 1). */ html body .ma-pr-sold{font-size:inherit;} /* a card's 'Sold' is the price's size (Drop sizes every span to the body) */ html .ma-price-sold{display:none;} html body .product__price-container.ma-sold-rule.price--sold-out:not(#_) :is(.price-item--regular,.price-item--sale,.price__badge--sold-out){display:none !important;} html body .product__price-container.ma-sold-rule.price--sold-out:not(#_) .ma-price-sold{display:inline-block;} /* 40. From David's iPhone check of Live (13 Nov 2026). a. Rows that scroll sideways on phones (the chips on Shop all and other collection pages, the series strip, swipe shelves) could also be dragged up and down a little, because a sideways scroller also scrolls the other way unless told not to. They only move sideways now; an up or down swipe moves the page. */ @media (max-width:767px){ html body :is(.ma-bar__chips,.collection__page--wrapper .ma-chips,.ma-ss__row,.ma-sv--swipe .ma-sv__grid):not(#_){overflow-y:hidden;overscroll-behavior-x:contain;} } /* b. (Pinch on the product photo slider: letting the page zoom there zoomed the whole page, David found the same evening. A two-finger touch now opens the zoom view instead, where pinching zooms the photo: assets/ma-gallery-count.js. Flickity keeps its own 'pan-y'.) */ /* c. The bag, menu and filter drawers hold the page still on phones and tablets. Scrolling inside the bag ran on into the page behind it, so Safari's toolbar slid in and out and the Check out button dipped below the screen. Scrolling inside a drawer stops at its ends, and the bag's book list takes the visible screen height (dvh) instead of the tallest one. The lock is on body, never on html (13 Nov 2026): Drop's body clips sideways, so overflow on html made the body clip the page at one screen tall, and Safari on iPhone kept that after the drawer closed (blank below, no taps, until the phone was turned). See lockPage() in ma-showcase-kit.js. */ @media (max-width:1023px){ html body:has(.slideout:popover-open){overflow:hidden;} } html body :is(.slideout,.mini-cart .ajax-cart__cart-form):not(#_){overscroll-behavior:contain;} html body .ajax-cart__drawer-wrapper .ajax-cart__cart-form:not(#_){height:calc(100dvh - 210px);} /* ma-ok: Drop's own drawer list height, on the visible screen */