/* Port-only glue for the Laravel store (not part of the template; keep it tiny). */

/* Real photos fill the frame the template draws around its placeholder art (.mm-art stays for fly-to-cart);
   absolute, so a tall photo never stretches its square frame (quick view, cart lines, search, clothesline) */
.mm-art.mm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
:is(.mm-line__img, .mm-sres__img, .mm-qv__main, .mm-qv__thumbs button, .mm-polaroid__img, .mm-gallery__main, .mm-gallery__thumbs button, .mm-order__thumbs > span):has(> .mm-photo) { position: relative; overflow: hidden; }

/* The illustrated map is a link that opens the shop in Google Maps */
a.mm-map { display: block; color: inherit; text-decoration: none; }

/* Mega-menu without the "Shop by age" side (no age data yet): the categories take the whole width */
.mm-mega:not(:has(.mm-mega__side)) { grid-template-columns: 1fr; }

/* Photos zoom inside their frame instead of spilling out of it */
.mm-tag__img:has(.mm-photo), .mm-tile:has(> .mm-photo) { overflow: hidden; }

.mm-tile--hero { transition: background-color .6s ease; } /* the hero fades between its slides' pastels */

/* Shop sort: a pill button + the brand dropdown instead of a native select */
.mm-sortbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border: 2px solid var(--second-soft); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-soft); font: 500 14px var(--font-body); cursor: pointer; transition: border-color .15s; }
.mm-sortbtn:hover, .mm-sortbtn[aria-expanded="true"] { border-color: var(--second-strong); }
.mm-sortbtn b { color: var(--ink); font-weight: 600; }
.mm-sortbtn .mm-icon { --icon: 18px; color: var(--second-strong); }
.mm-sortbtn .mm-icon:last-child { transition: rotate .2s; }
.mm-sortbtn[aria-expanded="true"] .mm-icon:last-child { rotate: 180deg; }
@media (max-width: 760px) {
  /* Phones: the count on its own small line, then Filters and Sort as two equal pills (no card) */
  .mm-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; background: none; box-shadow: none; }
  .mm-toolbar__count { order: -1; grid-column: 1 / -1; }
  .mm-toolbar > .mm-btn, .mm-toolbar__sort, .mm-sortbtn { width: 100%; justify-content: center; }
  .mm-toolbar > .mm-btn.mm-show-sm { display: inline-flex !important; } /* mm-show-sm resets display, which broke the icon + label row */
  .mm-toolbar > .mm-btn, .mm-sortbtn { min-height: 44px; flex-wrap: nowrap; white-space: nowrap; padding-inline: 14px; }
  .mm-sortbtn b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .mm-toolbar__sort .mm-pop { inset-inline: 0; min-width: 0; }
}

/* Calm mode's ⓘ: a small tooltip explaining the switch (hover, keyboard focus, or tap on phones).
   Not ".mm-calm": that class is set on <html> itself when calm mode is on */
.mm-calmbox { display: inline-flex; align-items: center; gap: 2px; }
.mm-calmbox__help { position: relative; display: inline-grid; } /* the tip is anchored to the icon */
.mm-calmbox__info { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: help; }
.mm-calmbox__info .mm-icon { --icon: 17px; }
.mm-calmbox__info:hover, .mm-calmbox__info:focus-visible { color: var(--accent-strong); background: rgb(106 72 168 / .1); }
.mm-calmbox__tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; width: max-content; max-width: 240px; padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: #fff; font: 500 13px/1.5 var(--font-body); text-align: center; box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transition: opacity .2s, translate .2s, visibility .2s; z-index: 5; pointer-events: none; }
.mm-calmbox__tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ink); }
.mm-calmbox__info:is(:hover, :focus) + .mm-calmbox__tip { opacity: 1; visibility: visible; translate: -50% 0; }

/* Product gallery with a single photo has no thumbnail column (the template always draws five placeholder thumbs) */
.mm-gallery:not(:has(.mm-gallery__thumbs)) { grid-template-columns: minmax(0, 1fr); }
.mm-gallery:not(:has(.mm-gallery__thumbs)) .mm-gallery__main { grid-column: 1; }

/* Phones: the calm-mode tip is centred on the footer row (a tip centred on the icon pokes past the screen edge and widens the page) */
@media (max-width: 900px) {
  .mm-footer__bottom { position: relative; }
  .mm-calmbox, .mm-calmbox__help { position: static; }
  .mm-calmbox__tip { max-width: min(240px, calc(100% - 8px)); }
  .mm-calmbox__tip::after { display: none; }
}
/* The hidden calm-mode tip must not widen the page */
.mm-footer { overflow-x: clip; }

/* Account: log out is a POST button that looks like the menu links */
.mm-accnav__logout { display: contents; }
.mm-accnav__logout button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); margin-top: 4px; background: none; color: var(--ink-soft); font: 500 16px/1.4 var(--font-body); cursor: pointer; text-align: start; }
.mm-accnav__logout button:hover { background: var(--paper); }
.mm-accnav__logout .mm-icon { --icon: 20px; }
@media (max-width: 1100px) { .mm-accnav__logout button { flex: none; width: auto; border-top: 0; margin: 0; border-radius: var(--r-pill); padding: 9px 14px; } }