/* Product tiles (views/partials/tile.phtml): home page and related products of the product page, with
   their dialogs (license domain, installation of a free module) */

/* ——— Grid: a row of tiles ——— */
.row { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.44rem; margin: 0; padding: 0; list-style: none; }
.row > li[hidden] { display: none; }
@media (max-width: 47.99rem) {
  .row { grid-template-columns: 1fr; gap: .96rem; }
}
.row > li { margin: 0; }
.tile p { margin: 0; }
.tile a, .tile a:visited, .tile a:hover { color: inherit; }

/* ——— Product tile ——— */
.tile { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; box-sizing: border-box; }
.tile:hover { border-color: color-mix(in srgb, var(--c) 70%, var(--line)); transform: translateY(-3px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c) 45%, transparent); }
.tile .media { display: block; position: relative; aspect-ratio: 1; background: var(--art-bg); overflow: hidden; }
.tile .media .pic { width: 100%; height: 100%; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.tile:hover .media .pic { transform: scale(1.04); }
.tile .media svg { display: block; width: 100%; height: 100%; }
/* Card background: a light tint of the product color */
:root { --tint: 1; } html[data-theme="light"] { --tint: 1.6; }
/* Increased contrast requested by the system: cards without tint, on the plain background (the full card keeps its color) */
@media (prefers-contrast: more) { :root, html[data-theme="light"] { --tint: 0; } }
.tile { background: color-mix(in srgb, var(--c) calc(var(--tint) * 7%), var(--surface)); }
/* Price: the discount or the free status as a note below the eyebrow */
/* Full offers (Pass, Pro): background in the product color, --fink text (white or near-black, whichever is more readable) */
.tile.full { background: var(--c); border-color: var(--c); color: var(--fink); }
.tile.full :is(.kicker, h3, h3 a, .price, .deal.note), html[data-theme="light"] .tile.full :is(.kicker, h3, h3 a) { color: var(--fink); }
.tile.full :is(.sub, .price s) { color: var(--fink); opacity: .82; }
.tile.full .add, .tile.full .add:visited { border-color: var(--fink); background: var(--fink); color: var(--c); }
.tile.full .add:is(:hover, :focus-visible) { border-color: var(--fink); background: transparent; color: var(--fink); }
.tile .deal.note { margin: .48rem 0 0; color: var(--accent-ink); font-size: 1.28rem; font-weight: 600; }
.tile .body { display: flex; flex-direction: column; flex: 1; gap: .24rem; padding: 1.28rem 1.44rem 1.44rem; }
.tile .kicker { margin: 0; color: var(--ck-d, var(--ink)); font-size: 1.184rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="light"] .tile .kicker { color: var(--ck-l, var(--ink)); }
.tile .body h3 { margin: 0; font-size: 1.632rem; font-weight: 700; line-height: 1.25; }
.tile .body h3 a { text-decoration: none; }
.tile .body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.tile .sub { margin: 0; color: var(--muted); font-size: 1.44rem; line-height: 1.35; }
.tile .buy { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: 1.12rem; }
.tile .buy .add { margin-left: auto; }
.tile .price { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.tile .price s { margin-left: .56rem; color: var(--muted); font-weight: 400; font-size: 1.312rem; }
.tile .price.free { color: var(--accent-ink); }
/* Add to cart, light version: outline, icon, fills on hover */
.tile .add { display: inline-flex; align-items: center; gap: .56rem; height: 3.36rem; padding: 0 1.2rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; font-size: 1.312rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; box-sizing: border-box; }
.tile .add .i { width: 1.68rem; height: 1.68rem; }
.tile .add:hover, .tile .add:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--on-accent); outline: none; text-decoration: none; }
/* On mobile, a product line is a list: image on the left, text on the right */
@media (max-width: 47.99rem) {
  .tile { flex-direction: row; }
  .tile .media { flex: 0 0 10.4rem; aspect-ratio: auto; min-height: 11.2rem; }
  .tile .body { padding: 1.04rem 1.2rem; }
  .tile .buy { padding-top: .64rem; }
}

/* ——— Animations (the reveal on scroll: zeste.css) ———
   Nothing runs continuously: the scheduler (tiles.js) plays an animation from time to time, at random among the
   visible elements, at most two at a time; hovering a tile also plays the pin drop */
.art-pin { transform-box: fill-box; transform-origin: bottom center; }
.art-swing { transform-box: fill-box; transform-origin: 50% 0; }
.art-ring { transform-box: fill-box; transform-origin: 0 50%; opacity: .3; }
/* Locker door in the network color (pickup point illustrations): closed, it opens onto the parcel then
   closes again (hover, scheduler), pivoting on its left side */
.art-ldoor { transform-box: fill-box; transform-origin: 0 50%; }
.tile:hover .art-ldoor { animation: ldoor 3s ease-in-out infinite; }
.art-ldoor.play { animation: ldoor 3s ease-in-out; }
.art-pin.play { animation: float 1.6s ease-in-out 2; }
.tile:hover .art-pin { animation: drop .7s cubic-bezier(.3, 1.5, .5, 1); }
/* Tile hover: its illustration animates as long as the mouse stays on it, and its front layers lift */
.tile:hover .art-swing { animation: swing 3.4s ease-in-out infinite; }
.tile:hover .art-ring { animation: ring 1.6s ease-out infinite; }
.tile .media svg .art-l2, .tile .media svg .art-l3 { transition: transform .2s ease-out, translate .4s cubic-bezier(.3, 1.4, .5, 1); }
.tile:hover .media svg .art-l2 { translate: 0 -2px; }
.tile:hover .media svg .art-l3 { translate: 0 -6px; }
.art-swing.play { animation: swing 3.4s ease-in-out; }
.art-ring.play { animation: ring 1.6s ease-out 3; }
@keyframes swing { 25% { transform: rotate(5deg); } 75% { transform: rotate(-4deg); } }
@keyframes ring { 0% { opacity: .2; transform: scale(.85); } 40% { opacity: 1; } 100% { opacity: .2; transform: scale(1.05); } }
@keyframes float { 50% { translate: 0 -4px; } }
@keyframes drop { 0% { transform: translateY(-22px); } }
@keyframes ldoor { 0%, 100% { transform: none; } 35%, 65% { transform: scaleX(-.62); filter: brightness(.88); } }

/* ——— Dialogs (views/partials/tile-dialogs.phtml): .dialog of zeste.css; here, the installation of a free module
   (#inst) ——— */
/* Domain dialog, complete offer of a signed-in customer: their domains, the upgrade price of the domain entered */
.dlg-doms { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .64rem; margin: .8rem 0 0; color: var(--muted); font-size: 1.36rem; }
.dlg-doms button { display: inline-flex; gap: .4em; min-width: 0; max-width: 100%; white-space: nowrap; padding: .48rem 1.12rem; border: 1px solid var(--line); border-radius: 99rem; background: var(--bg); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.dlg-doms button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.dlg-doms button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dlg-upg { margin: .8rem 0 0; color: var(--accent-ink); font-size: 1.36rem; font-weight: 600; }
.dlg-doms[hidden], .dlg-upg[hidden] { display: none; }
/* Installation: as wide as the longest command (without scrolling) on desktop */
@media (min-width: 48rem) { #inst { width: fit-content; min-width: 44.8rem; max-width: calc(100% - 3.2rem); } }
.cmds { display: grid; gap: .8rem; }
.cmds div { min-width: 0; display: flex; align-items: center; gap: .8rem; padding: .8rem .8rem .8rem 1.28rem; border: 1px solid var(--line); border-radius: .96rem; background: var(--bg); }
.cmds pre { flex: 1; min-width: 0; margin: 0; padding: 0; overflow-x: auto; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 1.36rem; line-height: 1.6; }
.cmds .copy { height: 3.2rem; padding: 0 1.28rem; font-size: 1.28rem; }
/* Condition of a command (« In production mode only ») */
.cmds .cmd-note { margin: .4rem 0 -.32rem .4rem; color: var(--muted); font-size: 1.2rem; font-style: italic; }
#inst .src { font-size: 1.36rem; }
#inst .src a, #inst .src a:visited { color: var(--accent-ink); }

/* ——— Print ——— */
@media print {
  .tile .add { display: none !important; }
  .tile { box-shadow: none; background: #fff !important; }
  .row { grid-template-columns: repeat(3, 1fr) !important; }
  .tile .media svg { filter: grayscale(1); }
}

/* Selection below the empty cart (views/checkout/partials/picks.phtml) */
.cart-picks { margin: 3.2rem 0 1.6rem; }
.cart-picks h2 { margin: 0 0 1.6rem; font-size: 2rem; font-weight: 800; letter-spacing: -.01em; }
.cart-picks .row { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
@media (max-width: 47.99rem) { .cart-picks .row { grid-template-columns: minmax(0, 1fr); } }

/* Retired product (images/art/retired.svg): the module asleep in its archive box, in the color --c of the product;
   product page (.pp-retired) and mini tiles of the home (.retired) */
.art-retired .art-retired-shadow { fill: var(--ink); opacity: .1; }
.art-retired .art-retired-back { fill: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.art-retired .art-retired-card { fill: var(--c); }
.art-retired .art-retired-face { fill: none; stroke: var(--surface); stroke-width: 2.4; stroke-linecap: round; }
.art-retired .art-retired-front { fill: color-mix(in srgb, var(--c) 30%, var(--surface)); stroke: color-mix(in srgb, var(--c) 60%, var(--ink)); stroke-width: 1.5; }
.art-retired .art-retired-label { fill: var(--surface); stroke: color-mix(in srgb, var(--c) 60%, var(--ink)); stroke-width: 1.2; }
.art-retired .art-retired-z { fill: var(--muted); font: 700 12px/1 var(--font, system-ui, sans-serif); }
.art-retired .art-retired-z text + text { font-size: 15px; }
.art-retired .art-retired-mod { animation: art-retired-breathe 4s ease-in-out infinite; }
@keyframes art-retired-breathe { 50% { translate: 0 1.5px; } }
@media (prefers-reduced-motion: reduce) { .art-retired .art-retired-mod { animation: none; } }