/** Shopify CDN: Minification failed
Line 277:124 Unexpected "/"
**/
.mini-cart.is-empty + .cart-recommendations {
display: none;
}
.cart-recommendations {
display: block;
position: relative;
text-align: start;
margin-top: 2rem;
border-top: 0.1rem solid rgb(var(--color-border));
}
.cart-recommendations .title {
justify-content: center;
white-space: nowrap;
position: absolute;
top: 0;
left: 1rem;
padding: 0 1rem;
transform: translateY(-50%);
background-color: rgb(var(--color-background));
text-transform: uppercase;
letter-spacing: 0.3rem;
margin: 0;
}
.cart-recommendations .mini-cart__navigation {
padding: 2rem;
}
.cart-recommendations .mini-cart__navigation .product-content {
margin-top: 0;
}
.cart-recommendations .mini-cart__navigation .product-content .link {
margin-inline-end: 0;
}
.cart-recommendations .mini-cart__navigation .product-button {
margin-top: auto;
}
.cart-recommendations .mini-cart__navigation .price,
.cart-recommendations .mini-cart__navigation .product-button .button,
.cart-recommendations .mini-cart__navigation .caption-with-letter-spacing + .product-content {
margin-top: 0.6rem;
}
.cart-recommendations .loading-overlay {
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 10rem;
}
.cart-recommendations .mini-cart__navigation li {
border-top: 0;
}
@media screen and (min-width: 750px) {
.cart-drawer {
overflow: visible;
}
.cart-recommendations .title {
position: static;
transform: none;
background-color: transparent;
padding: 3rem 3rem 0;
}
.cart-recommendations .mini-cart__navigation {
padding: 2.5rem 3rem;
}
.cart-drawer-container.menu-closing .cart-recommendations {
transition-delay: 0s;
transition-duration: var(--duration-short);
}
.cart-drawer .cart-recommendations {
transition-delay: calc(var(--duration-long) + var(--duration-short));
}
.cart-recommendations {
margin-top: 0;
z-index: 1;
position: absolute;
top: 0;
right: 100%;
width: 32rem;
height: var(--max-height);
background-color: rgb(var(--color-background));
border-inline-end: 0.1rem solid rgb(var(--color-border));
border-top: 0;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
scrollbar-width: thin;
}
.cart-recommendations::-webkit-scrollbar {
appearance: none;
width: 0.2rem;
border-radius: 1.6rem;
background-color: transparent;
}
.cart-recommendations::-webkit-scrollbar-thumb {
border-radius: 1.6rem;
background-color: rgb(var(--color-border));
}
.cart-recommendations .mini-cart__navigation .product-button .button .small-hide {
display: flex;
align-items: center;
}
}
@media screen and (max-width: 749px) {
.mini-cart__main {
display: flex;
flex-direction: column-reverse;
}
.mini-cart__main cart-items {
padding-top: 0;
}
.mini-cart__main .cart-recommendations + cart-items {
flex: 1 1 auto;
}
.cart-recommendations {
border-bottom: 0.1rem solid rgb(var(--color-border));
margin-bottom: -0.1rem;
}
.cart-recommendations .title {
font-size: 1.2rem;
}
.cart-recommendations .mini-cart__navigation {
padding-top: 3rem;
display: flex;
flex-direction: row;
column-gap: 1.5rem;
overflow-y: hidden;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* The thumb grows to the text column's full height - its bottom edge
lands level with the add-to-cart button - so the 4.4rem touch box
reads as part of a balanced card instead of an oversized stray. The
ratio box goes; the stretched frame crops with object-fit instead. */
.cart-recommendations .mini-cart__navigation .product-container {
align-items: stretch;
}
.cart-recommendations .mini-cart__navigation .product-image {
width: 11rem;
align-self: stretch;
}
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper,
.cart-recommendations .mini-cart__navigation .product-image .media {
height: 100%;
}
.cart-recommendations .mini-cart__navigation .product-image .media {
padding-bottom: 0;
}
.cart-recommendations .mini-cart__navigation .product-image .media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-recommendations .mini-cart__navigation li {
width: 82%;
max-width: 100%;
flex-grow: 1;
flex-shrink: 0;
padding: 0;
/* The container declares x-mandatory snapping; without an align value
on the items, cards stopped mid-scroll at arbitrary cut-offs */
scroll-snap-align: start;
}
.cart-recommendations .mini-cart__navigation::-webkit-scrollbar {
appearance: none;
height: 0.2rem;
border-radius: 1.6rem;
background-color: transparent;
}
.cart-recommendations .mini-cart__navigation::-webkit-scrollbar-thumb {
border-radius: 1.6rem;
background-color: rgb(var(--color-border));
}
.cart-recommendations .mini-cart__navigation .product-button .button {
width: 4.4rem;
height: 4.4rem;
justify-content: center;
box-shadow: inset 0 0 0 0.1rem rgb(var(--color-border));
}
.cart-recommendations .mini-cart__navigation .product-button .button.loading::after {
left: 50%;
width: 2rem;
height: 2rem;
margin-top: -1rem;
margin-left: -1rem;
}
}
/* Short viewports: the upsell keeps its slot by shrinking - vendor line
off, thumb on the compact ratio box - instead of pushing the items
list into a sliver. */
@media screen and (max-height: 700px) and (max-width: 749px) {
.cart-recommendations .mini-cart__navigation {
padding-top: 2rem;
}
.cart-recommendations .mini-cart__navigation .caption-with-letter-spacing {
display: none;
}
.cart-recommendations .mini-cart__navigation .product-image {
width: 8rem;
align-self: flex-start;
}
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper {
height: auto;
}
.cart-recommendations .mini-cart__navigation .product-image .media {
height: 0;
padding-bottom: var(--image-ratio-percent);
}
}
/* Craft Tallow — cart drawer YOU MAY ALSO LIKE
Paste at the END of assets/component-cart-recommendations.css
(theme t/39, already linked on every page that has the drawer).
Live markup (fetched /recommendations/products?section_id=mini-cart):
cart-recommendations.cart-recommendations
ul.mini-cart__navigation
li > .product-container.product-container--link
.product-image > a.media-wrapper.media-wrapper--small
.media.media--adapt style="--image-ratio-percent: 149.70703125%;"
img[is="lazy-image"][loading="lazy"]
.product-description
.product-button > button.button.button--small.button--cta.js-recs-atc
span.small-hide > span.label (text "Add to cart")
/* NO .icon-plus-alt / .icon-wrap — that is the empty square */
*/
/* ------------------------------------------------------------------
1) Product images: blank tan rectangles
------------------------------------------------------------------
.media-wrapper { background: rgb(var(--color-placeholder)) }
live --color-placeholder: 245, 236, 220 (the tan)
Two stacked bugs hide the ![]()
and leave that placeholder:
A. Geometry. base.css:
.media--adapt { height: 0; padding-bottom: var(--image-ratio-percent); }
.media > img { position: absolute; inset: 0; width/height: 100%; object-fit: cover; }
component-cart-recommendations.css @media (max-width: 749px):
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper,
.cart-recommendations .mini-cart__navigation .product-image .media {
height: 100%;
}
.cart-recommendations .mini-cart__navigation .product-image .media {
padding-bottom: 0;
}
That kills the padding-box. Height:100% of a stretch flex item with an
absolutely-positioned child is an auto/0 cycle → img paints at 0×0
inside a still-sized tan .media-wrapper.
@media (max-height: 700px) and (max-width: 749px) already tries to
undo this (height:0; padding-bottom: var(--image-ratio-percent)) which
is why the bug is viewport-dependent.
B. Opacity. base.css:
.media-wrapper[loading] img[is=lazy-image] { opacity: 0; }
YMAL imgs are is="lazy-image" + loading="lazy" inside a drawer that
starts at transform:translate(100%) with [data-animate]{opacity:0}.
Native lazy-load often never fires in a transformed off-canvas panel,
so the custom-element fade-in never runs.
Line-item thumbs still work: they keep the padding-bottom aspect box
and sit in the on-screen drawer column, not the side recs panel.
*/
.cart-recommendations .mini-cart__navigation .product-image,
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper,
.cart-recommendations .mini-cart__navigation .product-image .media {
display: block;
position: relative;
overflow: hidden;
background-color: rgb(var(--color-placeholder));
}
.cart-recommendations .mini-cart__navigation .product-image {
flex: 0 0 auto;
width: 7rem;
min-width: 7rem;
align-self: flex-start;
height: auto !important;
border-radius: min(var(--card-radius), 0.3rem);
}
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper,
.cart-recommendations .mini-cart__navigation .product-image .media {
width: 100%;
height: auto !important;
min-height: 0;
}
/* Restore the aspect-ratio padding box. Square matches the Aug 26 visible thumbs
(hero files are 2048×3066 / --image-ratio-percent: 149.7%; cover-crop to 1:1). */
.cart-recommendations .mini-cart__navigation .product-image .media.media--adapt {
height: 0 !important;
padding-bottom: 100% !important;
}
.cart-recommendations .mini-cart__navigation .product-image .media img,
.cart-recommendations .mini-cart__navigation .product-image img[is="lazy-image"] {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 1 !important;
visibility: visible !important;
color: transparent; /* hide broken-image icon if a src 404s */
}
/* Don't keep the wrapper in the loading/opacity-0 state. */
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper.loading,
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper[loading] {
/* keep the tan box, but never hide the img */
}
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper.loading img[is="lazy-image"],
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper[loading] img[is="lazy-image"] {
opacity: 1 !important;
}
@media screen and (max-width: 749px) {
.cart-recommendations .mini-cart__navigation .product-image,
.cart-recommendations .mini-cart__navigation .product-image .media-wrapper {
width: 11rem;
min-width: 11rem;
align-self: flex-start;
height: auto !important;
}
.cart-recommendations .mini-cart__navigation .product-image .media,
.cart-recommendations .mini-cart__navigation .product-image .media.media--adapt {
height: 0 !important;
padding-bottom: 100% !important;
}
}
@media screen and (max-height: 700px) and (max-width: 749px) {
.cart-recommendations .mini-cart__navigation .product-image {
width: 8rem;
min-width: 8rem;
}
}
/* ------------------------------------------------------------------
2) ATC control: empty white/cream square (missing plus)
------------------------------------------------------------------
Live button (no icon node):
base.css @media (max-width: 749px) { .small-hide { display: none !important; } }
so the label is gone on phone.
component-cart-recommendations.css @media (max-width: 749px):
.cart-recommendations .mini-cart__navigation .product-button .button {
width: 4.4rem; height: 4.4rem; justify-content: center;
box-shadow: inset 0 0 0 0.1rem rgb(var(--color-border));
}
That 4.4rem square is designed to hold .icon-plus-alt (see gallery-cursor
on PDPs: ). The in-drawer ATC
rewrite (js-recs-atc + /cart/add.js?appstle=true) dropped the icon.
.button--cta:before/:after are the desktop underline. On small screens
we reuse them as a plus (theme .icon-plus-alt pattern) in foreground color
so it cannot be white-on-white.
*/
.cart-recommendations .product-button .button.js-recs-atc {
position: relative;
color: rgb(var(--color-foreground));
background-color: transparent;
}
@media screen and (max-width: 749px) {
.cart-recommendations .mini-cart__navigation .product-button .button.js-recs-atc {
width: 4.4rem;
height: 4.4rem;
min-width: 4.4rem;
min-height: 4.4rem;
padding: 0;
justify-content: center;
align-items: center;
color: rgb(var(--color-foreground));
background-color: rgb(var(--color-background));
box-shadow: inset 0 0 0 0.1rem rgb(var(--color-border));
}
/* Hide the "Add to cart" underline bars; draw a plus instead.
If the liquid icon-wrap is restored later, :has() turns this off. */
.cart-recommendations .mini-cart__navigation .product-button .button.js-recs-atc:not(:has(.icon-plus-alt)):before,
.cart-recommendations .mini-cart__navigation .product-button .button.js-recs-atc:not(:has(.icon-plus-alt)):after {
content: "";
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
margin: 0;
border: 0;
padding: 0;
background-image: none;
background-color: rgb(var(--color-foreground));
opacity: 1;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
}
.cart-recommendations .mini-cart__navigation .product-button .button.js-recs-atc:not(:has(.icon-plus-alt)):before {
width: 1.4rem;
height: 0.15rem;
}
.cart-recommendations .mini-cart__navigation .product-button .button.js-recs-atc:not(:has(.icon-plus-alt)):after {
width: 0.15rem;
height: 1.4rem;
}
.cart-recommendations .mini-cart__navigation .product-button .button.js-recs-atc .icon-plus-alt {
position: relative;
z-index: 1;
width: 1.4rem;
height: 1.4rem;
color: rgb(var(--color-foreground));
}
}
@media screen and (min-width: 750px) {
/* Desktop already shows the .small-hide label. Keep it, and if the
icon-wrap is restored it sits on the right via existing .button--cta .icon. */
.cart-recommendations .mini-cart__navigation .product-button .button.js-recs-atc .small-hide {
display: flex;
align-items: center;
}
}