/* MORE FROM DAISY CHAIN BIANNUAL: the pod under the product on the issue pages (approved preview, Charles, 5 Oct 2026).
   One grid of three columns, three rows: Instagram stills (visitors not signed in), the three products, the founding
   films (not signed in). dc-shop-pods.js plays the films and fills the products from Shopify. Drawn at the preview's
   own sizes (1280 px computers, 390 px phones); a page that scales its layout scales the pod with it. Square corners,
   brand colours only, no text over pictures. [data-phone] marks the phone layout (the page decides by device). */
.dc-shop-pods { --g: var(--dc-grid-gap, 10px); box-sizing: border-box; margin: 0; padding: 28px 0 0; border-top: 1px solid #231F20;
  background: #FCFBFE; color: #231F20; font-family: 'DC Sans Condensed', Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 1.6px; }
.dc-shop-pods *, .dc-shop-pods *::before, .dc-shop-pods *::after { box-sizing: border-box; border-radius: 0; }
.dc-shop-pods-k { margin: 0 0 20px; font-weight: 700; font-size: 15px; line-height: 1.3; text-transform: uppercase; }
.dc-shop-pods-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.dc-shop-pods-row + .dc-shop-pods-row { margin-top: var(--g); }   /* one gap everywhere in the grid */
.dc-shop-pods-row li { min-width: 0; }
.dc-shop-pods a { color: inherit; text-decoration: none; }
.dc-shop-pods a:focus-visible { outline: 2px solid #E71411; outline-offset: 3px; }

/* ---- Instagram tiles: 4:5, a direct cut between cover and film, no fades */
.dc-shop-pods-ig a, .dc-shop-pods-films a { display: block; line-height: 0; background: #FCFBFE; }
.dc-shop-pods-ig video, .dc-shop-pods-ig img, .dc-shop-pods-films video, .dc-shop-pods-films img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #231F20; }
.dc-shop-pods-ig li > a > img { background: transparent; mix-blend-mode: multiply; }   /* the Vogue cards' white becomes the page's #FCFBFE */
.dc-shop-pods-fw, .dc-shop-pods-hw { position: relative; display: block; overflow: hidden; }
.dc-shop-pods-cov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-shop-pods-fw.on .dc-shop-pods-cov { visibility: hidden; }          /* the film shows while it plays; its cover otherwise */
.dc-shop-pods-hw .dc-shop-pods-cov { visibility: hidden; }
.dc-shop-pods-hw.rest .dc-shop-pods-cov { visibility: visible; }       /* Hydrea: after the film, the cover holds 10 s */
.dc-shop-pods-flash { position: absolute; inset: 0; background: #FCFBFE; opacity: 0; pointer-events: none; }
.dc-shop-pods-hw.pop .dc-shop-pods-flash { animation: dc-shop-pods-flash .7s cubic-bezier(.1, .7, .3, 1) forwards; }   /* flashbulb: white at once, fading out */
@keyframes dc-shop-pods-flash { 0% { opacity: 1; } 12% { opacity: 1; } 100% { opacity: 0; } }
html.dc-signed-in .dc-shop-pods-ig, html.dc-signed-in .dc-shop-pods-films { display: none; }   /* signed in: the products only */

/* ---- products: square Shopify picture (its white margin multiplied onto the page's white, enlarged so the product
   fills the tile), title, price, then the kit's SELECT SIZE + GET IT DELIVERED (.dc-buy), lined up at the bottom */
.dc-shop-pods-prods li { display: flex; flex-direction: column; }
.dc-shop-pods-pic { display: block; overflow: hidden; line-height: 0; background: #FCFBFE; }
.dc-shop-pods-pic img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: transparent; mix-blend-mode: multiply;
  transform: scale(1.12); transform-origin: 50% 50%; }
.dc-shop-pods-t { display: block; margin-top: 12px; font-weight: 700; font-size: 15px; line-height: 1.3; text-transform: uppercase; }
.dc-shop-pods-p { display: block; margin-top: 6px; min-height: 1.3em; font-weight: 400; font-size: 15px; line-height: 1.3; }
.dc-shop-pods-prods a:hover .dc-shop-pods-t, .dc-shop-pods-prods a:focus-visible .dc-shop-pods-t { color: #E71411; }
.dc-shop-pods-prods .dc-buy { margin-top: auto; padding-top: 18px; }   /* room under the price (Charles, 5 Oct) */
.dc-shop-pods-cred { margin: auto 0 0; padding-top: 10px; height: 54px; overflow: hidden; font-weight: 400; font-size: 11px; line-height: 1.35; letter-spacing: 1px; }   /* exactly SELECT SIZE's height (44) and its space above */
.dc-shop-pods-cred + .dc-buy { margin-top: 0; padding-top: 8px; }   /* SELECT SIZE's gap to the button */
.dc-shop-pods-br { display: none; }

/* ---- phones (the page marks its phone layout) */
.dc-shop-pods[data-phone] .dc-shop-pods-br { display: inline; }   /* LOGO / CROP TEE */
.dc-shop-pods[data-phone] .dc-shop-pods-t, .dc-shop-pods[data-phone] .dc-shop-pods-p { font-size: 13px; }
.dc-shop-pods[data-phone] .dc-shop-pods-cred { height: 46px; font-size: 7px; letter-spacing: .3px; }
.dc-shop-pods[data-phone] .dc-buy .dc-size { height: 36px; padding: 0 22px 0 6px; font-size: 9px; letter-spacing: 1px; background-position: right 6px center; background-size: 10px 7px; }
.dc-shop-pods[data-phone] .dc-buy .dc-buy-now { font-size: 8px; letter-spacing: 1px; }

@media (prefers-reduced-motion: reduce) {   /* covers only */
  .dc-shop-pods-fw .dc-shop-pods-cov, .dc-shop-pods-hw .dc-shop-pods-cov { visibility: visible; }
  .dc-shop-pods-hw .dc-shop-pods-flash { animation: none; }
}