/*
 * Wishlists - lists pages, public list, gallery and the heart picker.
 * Loaded on every page (the picker can open anywhere). Everything is prefixed wl-.
 *
 * Pages use the shop's information-page header (.archive-header, H1 over the
 * breadcrumb). The one signature element is the list card drawn as a nursery
 * hang tag - chamfered label, eyelet and twine - hanging over the cover photo.
 * Totals and "all to cart" live in a sticky side column, never at the bottom of
 * the screen, where the opening-hours, advisor and chat widgets float.
 */
:root {
  --wl-leaf: #1E913D;
  --wl-leaf-dark: #17742F;
  --wl-ink: #253D4E;
  --wl-muted: #687986;
  --wl-mint: #E9F7EF;
  --wl-mint-strong: #D3F0DE;
  --wl-moss: #173B2A;
  --wl-pollen: #FDC040;
  --wl-twine: #CDB27C;
  --wl-line: #E3E8E5;
  --wl-paper: #F5F8F6;
}

.wl-main { color: var(--wl-ink); }
.wl-main [hidden], .wl-dialog [hidden] { display: none !important; }
.wl-main .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- header */
.wl-header__panel { position: relative; overflow: hidden; isolation: isolate; }
.wl-header__grid { position: relative; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; width: 100%; }
.wl-header__main { flex: 1 1 520px; max-width: 780px; }
.wl-header__title { margin: 0 0 15px; overflow-wrap: anywhere; }
.wl-header__intro { margin: 22px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.65; color: #4A5E6C; }
.wl-header__author { margin: 18px 0 0; font-weight: 700; }
.wl-header__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.wl-header__desc { margin: 18px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.7; }
.wl-header__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.wl-header__aside { flex: none; align-self: center; }

/* With a cover the panel becomes the photo itself, darkened towards the text. */
.archive-header.wl-header__panel--photo { background: var(--wl-moss); min-height: clamp(340px, 30vw, 460px); display: flex; align-items: flex-end; padding-top: 56px; padding-bottom: 56px; }
.wl-header__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.wl-header__panel--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 38, 25, .9) 0%, rgba(14, 38, 25, .66) 38%, rgba(14, 38, 25, .1) 72%),
    linear-gradient(0deg, rgba(14, 38, 25, .6) 0%, rgba(14, 38, 25, 0) 55%);
}
.wl-header__panel--photo,
.wl-header__panel--photo h1,
.wl-header__panel--photo .breadcrumb,
.wl-header__panel--photo .breadcrumb a,
.wl-header__panel--photo .wl-header__desc,
.wl-header__panel--photo .wl-header__author { color: #fff; }
.wl-header__panel--photo .breadcrumb span { color: rgba(255, 255, 255, .7); }
.wl-header__panel--photo .wl-header__desc { text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }

/* ---------------------------------------------------------------- chips and buttons */
.wl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--wl-line); background: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--wl-ink); white-space: nowrap; }
.wl-chip i { line-height: 1; font-size: 12px; }
.wl-chip--public, .wl-chip--approved { background: var(--wl-mint-strong); border-color: transparent; color: var(--wl-leaf-dark); }
.wl-chip--default { background: #FFE6A1; border-color: transparent; color: #6B4E00; }
.wl-chip--pending { background: #FFF1C7; border-color: transparent; color: #7A5600; }
.wl-chip--hidden { background: #FDE3E3; border-color: transparent; color: #A12A2A; }
.wl-chip--plain { background: transparent; }
.wl-header__panel--photo .wl-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; backdrop-filter: blur(6px); }
.wl-header__panel--photo .wl-chip--public, .wl-header__panel--photo .wl-chip--approved { background: rgba(211, 240, 222, .95); color: var(--wl-leaf-dark); }
.wl-header__panel--photo .wl-chip--default { background: var(--wl-pollen); color: #4A3600; }

.wl-main .btn i, .wl-dialog .btn i { margin-right: 8px; line-height: 1; vertical-align: -1px; }
.wl-btn-hero { padding: 15px 28px; font-size: 15px; border-radius: 10px; box-shadow: 0 10px 24px rgba(30, 145, 61, .25); }
.wl-btn-hero.btn-sm { padding: 11px 20px !important; font-size: 14px; }
/* The theme's .btn-sm is square-cornered and smaller; every list button shares one shape. */
.wl-main .btn-sm, .wl-dialog .btn-sm { border-radius: 10px; }
.wl-header__actions .btn, .wl-btn-block.btn-sm { padding: 11px 20px !important; font-size: 14px; }
.wl-btn-quiet, .wl-btn-ghost { background: #fff !important; color: var(--wl-ink) !important; border: 1px solid var(--wl-line) !important; }
.wl-btn-quiet:hover, .wl-btn-ghost:hover { border-color: var(--wl-leaf) !important; color: var(--wl-leaf) !important; }
.wl-btn-danger:hover { border-color: #A12A2A !important; color: #A12A2A !important; }
.wl-header__panel--photo .wl-btn-quiet { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; backdrop-filter: blur(6px); }
.wl-header__panel--photo .wl-btn-quiet:hover { background: rgba(255, 255, 255, .22) !important; }
.wl-btn-block { display: flex; width: 100%; justify-content: center; align-items: center; }
.wl-link-btn { background: none; border: 0; padding: 0; color: var(--wl-leaf); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* ---------------------------------------------------------------- body */
.wl-body { padding-bottom: 24px; } /* the footer adds 40px above its newsletter bar */
/* The fixed "Overené zákazníkmi" tab covers the left 36 px of the viewport; the
   header panel can run under it, the checkboxes and links below cannot. */
@media (min-width: 992px) { .wl-body { padding-left: 48px; padding-right: 48px; } }
.wl-notice { display: flex; gap: 10px; align-items: center; background: var(--wl-paper); border-radius: 14px; padding: 14px 18px; margin: 0 0 24px; color: var(--wl-muted); }

/* ---------------------------------------------------------------- hang tags (overview, gallery) */
.wl-tags {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 48px 28px;
}
.wl-tag-card__link { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; cursor: pointer; border-radius: 22px; }
.wl-tag-card__link:focus-visible { outline: 3px solid var(--wl-leaf); outline-offset: 6px; }
.wl-tag-card__photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--wl-mint); }
/*
 * The hangers' holes, cut out of the photo so the page shows through. They sit
 * where the rope ends in wishlist/tag_hangers.tpl: fixed px from each side, and
 * above the bottom by an amount that shifts with the card width because the tag
 * is tilted (measured, linear in width; the card is a size container for cqw).
 */
.wl-tag-card { container-type: inline-size; }
.wl-tag-card__photo {
  --wl-hole-lx: 22.46px; --wl-hole-ly: calc(135.58px - 1.224cqw);
  --wl-hole-rx: 25.64px; --wl-hole-ry: calc(134.39px + 1.224cqw);
  -webkit-mask-image: radial-gradient(circle at var(--wl-hole-lx) calc(100% - var(--wl-hole-ly)), transparent 4.7px, #000 5.3px), radial-gradient(circle at calc(100% - var(--wl-hole-rx)) calc(100% - var(--wl-hole-ry)), transparent 4.7px, #000 5.3px);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at var(--wl-hole-lx) calc(100% - var(--wl-hole-ly)), transparent 4.7px, #000 5.3px), radial-gradient(circle at calc(100% - var(--wl-hole-rx)) calc(100% - var(--wl-hole-ry)), transparent 4.7px, #000 5.3px);
  mask-composite: intersect;
}
.wl-tag-card:nth-child(even) .wl-tag-card__photo {
  --wl-hole-lx: 25.40px; --wl-hole-ly: calc(134.47px + 1.050cqw);
  --wl-hole-rx: 22.68px; --wl-hole-ry: calc(135.48px - 1.045cqw);
}
.wl-tag-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-tag-card__photo--empty { background: var(--wl-mint) url("../../theme/porto/assets/imgs/blog/header-bg.png?v=2") center / cover no-repeat; }
.wl-tag-card__photo--new { display: flex; align-items: flex-start; justify-content: center; padding-top: 17%; background: transparent; border: 2px dashed #B5D9C2; color: var(--wl-leaf); font-size: 44px; transition: background-color .2s, border-color .2s; }
.wl-tag-card__link:hover .wl-tag-card__photo--new { background: var(--wl-mint); border-color: var(--wl-leaf); }

/*
 * The label: ivory card stock with a faint grain, chamfered top corners (a clipped
 * ::before, so the drop shadow on the element follows the shape) and a hanger in
 * each top corner (wishlist/tag_hangers.tpl): brass grommet on a reinforcement
 * ring, twine looped and knotted, then up into a hole punched in the cover photo.
 * Tags hang slightly askew, alternating sides. On hover a tag swings like a sign
 * on two strings: sideways without turning, while each
 * string skews from its grommet so the top end stays in its hole. Tags in a row
 * stretch to the same height.
 */
.wl-tag {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: -70px 18px 0;
  padding: 34px 22px 24px;
  rotate: -1.4deg;
  transform-origin: 50% 0;
  filter: drop-shadow(0 16px 18px rgba(23, 40, 30, .18)) drop-shadow(0 2px 2px rgba(23, 40, 30, .12));
}
/* Every second tag hangs askew the other way. */
.wl-tag-card:nth-child(even) .wl-tag { rotate: 1.2deg; }
.wl-tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(176deg, #FFFDF7 0%, #FAF4E6 55%, #F4ECDA 100%);
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%, 0 26px);
}
/* Reinforcement ring with the brass grommet and its hole. */
.wl-tag__eyelet {
  position: absolute;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #2E2A20 0 3.5px, #8C7140 4px, #E8D49A 5.5px, #B8964F 7px, #7E6331 8px, transparent 8.6px), #EFE5CC;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(110, 86, 40, .18);
}
.wl-tag__eyelet--left { left: 26px; }
.wl-tag__eyelet--right { right: 26px; }
.wl-tag__eyelet--right .wl-tag__twine { left: 0; transform: scaleX(-1); }
/* Swing: the tag moves sideways; skewX(atan(dx / 92px)) keeps the strings' top ends (92px up) in place. */
.wl-tag-card__link:hover .wl-tag { animation: wl-tag-swing 1.6s cubic-bezier(.36, 0, .3, 1); }
.wl-tag-card__link:hover .wl-tag__eyelet--left .wl-tag__twine { animation: wl-twine-swing-left 1.6s cubic-bezier(.36, 0, .3, 1); }
.wl-tag-card__link:hover .wl-tag__eyelet--right .wl-tag__twine { animation: wl-twine-swing-right 1.6s cubic-bezier(.36, 0, .3, 1); }
@keyframes wl-tag-swing { 18% { translate: 7px 0; } 42% { translate: -5px 0; } 66% { translate: 2.6px 0; } 86% { translate: -1px 0; } }
@keyframes wl-twine-swing-left { 18% { transform: skewX(4.35deg); } 42% { transform: skewX(-3.11deg); } 66% { transform: skewX(1.62deg); } 86% { transform: skewX(-.62deg); } }
@keyframes wl-twine-swing-right { 0%, 100% { transform: scaleX(-1); } 18% { transform: scaleX(-1) skewX(-4.35deg); } 42% { transform: scaleX(-1) skewX(3.11deg); } 66% { transform: scaleX(-1) skewX(-1.62deg); } 86% { transform: scaleX(-1) skewX(.62deg); } }
.wl-tag__twine { position: absolute; left: -30px; bottom: 15px; width: 60px; height: 100px; transform-origin: 50% 100%; overflow: visible; fill: none; stroke-linecap: round; pointer-events: none; }
.wl-tag__twine .wl-tag__strand { stroke: #C4A167; stroke-width: 2.6; }
.wl-tag__twine .wl-tag__twist { stroke: #8F7140; stroke-width: 1.6; stroke-dasharray: 1.6 2.4; }
.wl-tag__twine .wl-tag__knot { fill: #B08C52; stroke: #8F7140; stroke-width: .8; }
/* The punched hole in the photo: dark, a soft shadow below it and a light lower rim for the photo's thickness; the twine ends under it. */
/* Inside the hole: the shadow of its upper edge on the wall behind (the rope goes on behind the photo under it), the cut edge, and the lit lower rim of the print's thickness. */
.wl-tag__twine .wl-tag__hole-shade { fill: rgba(40, 32, 18, .32); }
.wl-tag__twine .wl-tag__hole-edge { fill: none; stroke: rgba(30, 24, 12, .45); stroke-width: .7; }
.wl-tag__twine .wl-tag__hole-rim { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: .9; }
.wl-tag__name { max-width: 100%; padding: 0 36px; box-sizing: border-box; font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--wl-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-tag-card__link:hover .wl-tag__name { color: var(--wl-leaf); }
.wl-tag-card--new .wl-tag__name { color: var(--wl-leaf); }
.wl-tag__count, .wl-tag__author { font-size: 14px; color: var(--wl-muted); }
.wl-tag__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wl-tag__desc { max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--wl-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.wl-gallery-teaser { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 64px; padding: 26px 30px; border-radius: 20px; background: var(--wl-paper); color: var(--wl-muted); }
.wl-gallery-teaser strong { font-family: "Quicksand", sans-serif; font-size: 20px; color: var(--wl-leaf); }
.wl-gallery-teaser:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- list layout */
.wl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.wl-layout__aside { display: flex; flex-direction: column; gap: 18px; }
/* Sticky below the 73 px navigation bar, but only where the whole column fits
   above the opening-hours / advisor / chat widgets at the bottom. */
@media (min-width: 1200px) and (min-height: 760px) { .wl-layout__aside { position: sticky; top: 96px; } }
@media (max-width: 1199px) {
  .wl-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

.wl-panel { border-radius: 22px; padding: 26px 26px 24px; background: var(--wl-paper); }
.wl-panel__title { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 14px; }
.wl-panel__text { color: var(--wl-muted); line-height: 1.6; margin: 0 0 16px; }

.wl-panel--summary { background: var(--wl-moss); color: #fff; padding: 28px; }
.wl-summary__label { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .72); }
.wl-summary__price { margin: 4px 0 6px; font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 42px; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff; }
.wl-summary__meta { margin: 0 0 22px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.wl-main .wl-btn-cart-all { padding: 16px 20px; font-size: 16px; border-radius: 12px; background: var(--wl-pollen); color: var(--wl-moss); }
.wl-main .wl-btn-cart-all:hover { background: #FFD162; color: var(--wl-moss); }
.wl-summary__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.wl-skipped { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 14px; line-height: 1.5; }
.wl-skipped ul { margin: 6px 0 0; padding-left: 18px; }
.wl-skipped a { color: var(--wl-pollen); }

.wl-share__row { display: flex; gap: 8px; }
.wl-share__row input { flex: 1; min-width: 0; height: 42px !important; border: 1px solid var(--wl-line); border-radius: 10px; padding: 0 12px !important; background: #fff; font-size: 13px; color: var(--wl-muted); }
.wl-share__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; font-size: 14px; }
.wl-share__links a { color: var(--wl-leaf); font-weight: 700; }

/* ---------------------------------------------------------------- toolbar */
.wl-toolbar { position: sticky; top: 73px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; min-height: 58px; padding: 8px 0; background: #fff; }
.wl-toolbar__all { display: inline-flex; gap: 10px; align-items: center; margin: 0; font-weight: 700; cursor: pointer; }
.wl-toolbar__count { color: var(--wl-muted); font-size: 14px; }
.wl-toolbar__bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wl-toolbar__bulk select { height: 36px; border: 1px solid var(--wl-line); border-radius: 8px; padding: 0 10px; font-size: 14px; max-width: 220px; background: #fff; }
.wl-check { cursor: pointer; }

/* ---------------------------------------------------------------- items */
.wl-items-head, .wl-item { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) 128px 110px 178px; column-gap: 20px; align-items: center; }
.wl-items-head--readonly, .wl-items--readonly .wl-item { grid-template-columns: 92px minmax(0, 1fr) 72px 110px 150px; }
.wl-items-head { padding: 0 0 10px; border-bottom: 2px solid var(--wl-ink); font-size: 13px; font-weight: 700; color: var(--wl-muted); }
.wl-items-head__product { grid-column: 1 / 4; }
.wl-items-head--readonly .wl-items-head__product { grid-column: 1 / 3; }
.wl-items-head span:nth-last-child(2) { text-align: right; }

.wl-items { list-style: none; padding: 0; margin: 0; }
.wl-item { padding: 20px 0; border-bottom: 1px solid var(--wl-line); background: #fff; transition: opacity .25s ease, transform .25s ease; }
/* Removal in flight: already sliding out; wishlists.js folds it away when the server confirms. */
.wl-item.is-removing { opacity: .35; transform: translateX(-12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wl-item { transition: none; } .wl-item.is-removing { transform: none; } }
.wl-item.is-dragging { opacity: .5; }
.wl-item.is-drop-target { box-shadow: inset 0 3px 0 var(--wl-leaf); }
.wl-item__select { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wl-item__handle { cursor: grab; color: #B2BCB6; font-size: 15px; line-height: 1; }
.wl-item__handle:hover { color: var(--wl-leaf); }
.wl-item__image img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; display: block; }
.wl-item--sold_out .wl-item__image img { filter: grayscale(.7); opacity: .75; }
.wl-item__info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wl-item__name { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--wl-ink); }
.wl-item__name:hover { color: var(--wl-leaf); }
.wl-item__facts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.wl-item__unit { color: var(--wl-ink); font-variant-numeric: tabular-nums; }
.wl-item__old { margin-left: 4px; color: var(--wl-muted); font-size: 13px; }
.wl-item__note { font-size: 13px; color: var(--wl-muted); }
.wl-item__qty, .wl-item__total { display: flex; flex-direction: column; gap: 4px; }
.wl-item__qty-value { font-weight: 700; }
.wl-item__total { align-items: flex-end; }
.wl-item__total strong { font-family: "Quicksand", sans-serif; font-size: 19px; color: var(--wl-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-item__actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.wl-label { display: none; font-size: 13px; color: var(--wl-muted); }

.wl-stock { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.wl-stock--in_stock { background: var(--wl-mint-strong); color: var(--wl-leaf-dark); }
.wl-stock--delivery { background: #E4EEFB; color: #2A5EA1; }
.wl-stock--reservation { background: #FFF1C7; color: #7A5600; }
.wl-stock--sold_out { background: #FDE3E3; color: #A12A2A; }

.wl-stepper { display: inline-flex; align-self: flex-start; height: 40px; border: 1px solid var(--wl-line); border-radius: 10px; overflow: hidden; background: #fff; }
.wl-stepper button { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; padding: 0; border: 0; line-height: 1; background: var(--wl-paper); font-size: 18px; cursor: pointer; color: var(--wl-ink); }
.wl-stepper button:hover { background: var(--wl-mint-strong); color: var(--wl-leaf-dark); }
.wl-stepper input { width: 52px !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-weight: 700; font-size: 15px; line-height: 1; -moz-appearance: textfield; }
.wl-stepper input::-webkit-outer-spin-button, .wl-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wl-main .wl-btn-cart { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px !important; border-radius: 10px; white-space: nowrap; }
.wl-main .wl-btn-cart--reserve { background: #fff; color: var(--wl-leaf-dark); border: 1px solid var(--wl-leaf); }
.wl-main .wl-btn-cart--reserve:hover { background: var(--wl-mint); color: var(--wl-leaf-dark); }
.wl-main .wl-btn-cart.is-disabled { background: #EEF1EF !important; color: var(--wl-muted) !important; cursor: not-allowed; }
.wl-icon-btn { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--wl-line); background: #fff; color: var(--wl-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wl-icon-btn:hover { color: #A12A2A; border-color: #A12A2A; }

.wl-empty { text-align: center; padding: 40px 20px 52px; color: var(--wl-muted); border: 2px dashed var(--wl-line); border-radius: 22px; }
.wl-empty p { max-width: 46ch; margin: 4px auto 0; line-height: 1.6; }
.wl-empty__title { margin: 8px 0 6px; color: var(--wl-ink); font-family: "Quicksand", sans-serif; font-size: 22px; font-weight: 700; }
.wl-empty__heart { display: inline-block; margin: 0 1px; color: var(--wl-leaf); font-size: .95em; line-height: 1; vertical-align: -1px; }
.wl-main .wl-empty__cta { margin-top: 20px; }

/* Empty list: isometric crate, pot with a young plant, fertilizer bag and gloves (wishlist/empty_scene.tpl), faces shaded t > l > r like the sostar.test scenes. */
.wl-scene { display: block; width: 264px; max-width: 70%; height: auto; margin: 0 auto; overflow: visible; }
.wl-scene .ground.t { fill: var(--wl-mint); stroke: #D3ECDC; stroke-width: .6; }
.wl-scene .ground.l { fill: #D3ECDC; }
.wl-scene .ground.r { fill: #BFE0CB; }
.wl-scene .shade { fill: rgba(23, 59, 42, .16); filter: blur(2.5px); }
.wl-scene .crate.l { fill: var(--wl-twine); }
.wl-scene .crate.r { fill: #B0925A; }
.wl-scene .crate-in { fill: #A9894F; }
.wl-scene .crate-in--end { fill: #BB9C62; }
.wl-scene .crate-floor { fill: #96773F; }
.wl-scene .crate-gap { fill: none; stroke: #8A6C37; stroke-width: .7; }
.wl-scene .crate-rim { fill: none; stroke: #EBDDBA; stroke-width: 1; stroke-linejoin: round; }
.wl-scene .shade--bag { fill: rgba(23, 59, 42, .2); filter: blur(1.6px); }
.wl-scene .pot.side { fill: url(#wl-scene-pot); }
.wl-scene .pot-rim.side { fill: url(#wl-scene-rim); }
.wl-scene .pot-rim.top { fill: #E39467; }
.wl-scene .soil { fill: url(#wl-scene-soil); }
.wl-scene .soil-specks { fill: none; stroke: #8A6A52; stroke-width: .7; stroke-linecap: round; }
.wl-scene .stem { fill: none; stroke: #2B8A3E; stroke-width: 1.2; stroke-linecap: round; }
.wl-scene .stem-light { fill: none; stroke: rgba(190, 240, 190, .5); stroke-width: .35; stroke-linecap: round; }
.wl-scene .leaf { fill: url(#wl-scene-leaf); }
.wl-scene .leaf--back { fill: url(#wl-scene-leaf-back); }
.wl-scene .vein { fill: none; stroke: rgba(225, 250, 215, .45); stroke-width: .3; stroke-linecap: round; }
.wl-scene .bud { fill: #7FD488; }
/* Fertilizer bag: off-white paper sack, crimped seal, green label. */
.wl-scene .bag.l { fill: url(#wl-scene-bag); }
.wl-scene .bag.r { fill: #DCD3BB; }
.wl-scene .bag.t { fill: #FBF8EF; }
.wl-scene .bag-seal { fill: #E2D9C1; }
.wl-scene .bag-crimp { fill: none; stroke: #C2B591; stroke-width: .3; }
.wl-scene .bag-label { fill: var(--wl-leaf); }
.wl-scene .bag-leaf { fill: #fff; }
.wl-scene .bag-lines { fill: none; stroke: #9AA79C; stroke-width: .45; stroke-linecap: round; }
/* Garden gloves: beige knit back, green dipped fingertips, pollen cuff. */
.wl-scene .glove { fill: #EFE7D3; }
.wl-scene .glove-shadow { fill: rgba(23, 59, 42, .22); filter: blur(.5px); }
.wl-scene .glove-shadow .glove-cuff, .wl-scene .glove-shadow .glove-dip { fill: inherit; }
.wl-scene .glove .glove-cuff { fill: var(--wl-pollen); }
.wl-scene .glove .glove-dip { fill: #2E9A4F; }
.wl-scene .glove-rib { fill: none; stroke: rgba(160, 110, 10, .45); stroke-width: .3; }
.wl-scene .glove-shadow .glove-rib, .wl-scene .glove-shadow .glove-seam { display: none; }
.wl-scene .glove-seam { fill: none; stroke: rgba(150, 130, 90, .5); stroke-width: .25; stroke-linecap: round; }
.wl-scene .sprout { transform-origin: 0 0; animation: wl-sprout-grow 1.4s cubic-bezier(.2, .8, .25, 1.2) both, wl-sprout-sway 4.5s ease-in-out 1.4s infinite; }
.wl-scene .heart { fill: var(--wl-leaf); opacity: 0; transform-origin: 0 0; animation: wl-heart-rise 3.6s ease-out 1s infinite; }
.wl-scene .heart--late { fill: var(--wl-pollen); animation-delay: 2.8s; }
@keyframes wl-sprout-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes wl-sprout-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3.5deg); } 70% { transform: rotate(3deg); } }
@keyframes wl-heart-rise { 0% { transform: translate(0, 2px) scale(.4); opacity: 0; } 18% { opacity: 1; } 70% { opacity: .9; } 100% { transform: translate(-3px, -26px) scale(1.05); opacity: 0; } }

@media (max-width: 767px) {
  .wl-items-head { display: none; }
  .wl-item, .wl-items--readonly .wl-item {
    grid-template-columns: auto 76px minmax(0, 1fr);
    grid-template-areas: "sel img info" "sel qty total" "sel act act";
    gap: 14px 14px;
    padding: 18px 0;
  }
  .wl-items--readonly .wl-item { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "img info" "qty total" "act act"; }
  .wl-item__select { grid-area: sel; align-self: start; }
  .wl-item__image { grid-area: img; align-self: start; }
  .wl-item__image img { width: 76px; height: 76px; }
  .wl-item__info { grid-area: info; }
  .wl-item__qty { grid-area: qty; }
  .wl-item__total { grid-area: total; }
  .wl-item__actions { grid-area: act; }
  .wl-item__actions .wl-btn-cart { flex: 1; }
  .wl-label { display: block; }
  .wl-header__panel--photo { min-height: 420px; }
}

/* ---------------------------------------------------------------- AI prompts */
/*
 * AI visualisation: a moss panel. Left, the title and three numbered steps (pollen
 * discs); right, each prompt as a paper hang tag - eyelet and twine stitch along
 * its header, as on the list cards - with the copy button in that header. The text
 * fades out at the bottom edge and scrolls inside the tag.
 */
.wl-ai { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: 36px 64px; align-items: center; margin-top: 72px; padding: clamp(28px, 4.5vw, 64px); border-radius: 24px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #2A6545 0%, var(--wl-moss) 58%); }
.wl-ai__lead { align-self: center; }
.wl-ai__badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(253, 192, 64, .14); color: var(--wl-pollen); font: 700 13px/1 "Quicksand", sans-serif; }
.wl-ai__badge svg { width: 16px; height: 16px; fill: currentColor; }
.wl-ai__title { margin: 0 0 26px; color: #fff; font-family: "Quicksand", sans-serif; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.wl-ai__steps { margin: 0; padding: 0; list-style: none; counter-reset: wl-ai-step; display: grid; gap: 16px; }
.wl-ai__steps li { position: relative; counter-increment: wl-ai-step; padding: 3px 0 0 46px; min-height: 32px; color: rgba(255, 255, 255, .84); font-size: 15px; line-height: 1.6; }
.wl-ai__steps li::before { content: counter(wl-ai-step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wl-pollen); color: var(--wl-moss); font: 700 15px/1 "Quicksand", sans-serif; }
/* The dotted thread joining the discs. */
.wl-ai__steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: -14px; border-left: 2px dotted rgba(253, 192, 64, .4); }

.wl-ai__prompts { display: grid; gap: 22px; }
.wl-ai__prompt { position: relative; border-radius: 6px 18px 18px 18px; background: #FBFAF6; color: var(--wl-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 48px -20px rgba(0, 0, 0, .55); transform: rotate(-.6deg); }
.wl-ai__prompt-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 50px; }
.wl-ai__prompt-head::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; border-top: 2px dashed rgba(205, 178, 124, .7); }
.wl-ai__eyelet { position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--wl-moss); box-shadow: 0 0 0 3px var(--wl-twine); }
.wl-ai__prompt h3 { flex: 1; min-width: 0; margin: 0; color: var(--wl-ink); font-family: "Quicksand", sans-serif; font-size: 17px; font-weight: 700; }
.wl-main .wl-ai .wl-ai__copy { flex: none; display: inline-flex; align-items: center; gap: 2px; background: var(--wl-pollen); color: var(--wl-moss); border-radius: 10px; transition: background-color .2s, color .2s; }
.wl-main .wl-ai .wl-ai__copy:hover { background: #FFD162; }
.wl-main .wl-ai .wl-ai__copy.is-copied { background: var(--wl-leaf); color: #fff; }
.wl-main .is-copied svg { width: 16px; height: 16px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wl-ai__prompt textarea { display: block; width: 100%; height: 280px !important; min-height: 0 !important; margin: 0; padding: 18px 24px 30px !important; border: 0 !important; border-radius: 0 0 18px 18px; background: transparent; color: var(--wl-ink); font-family: "Lato", sans-serif; font-size: 14px; line-height: 1.7; box-shadow: none !important; resize: none; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); scrollbar-width: thin; scrollbar-color: #D8D2C2 transparent; }
.wl-ai__prompt textarea:focus { outline: none; -webkit-mask-image: none; mask-image: none; }
.wl-ai__prompt:focus-within { box-shadow: 0 0 0 3px var(--wl-pollen), 0 24px 48px -20px rgba(0, 0, 0, .55); }
@media (max-width: 991px) {
  .wl-ai { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .wl-ai { margin-top: 48px; border-radius: 18px; }
  .wl-ai__prompt { transform: none; }
  .wl-ai__prompt-head { flex-wrap: wrap; padding-left: 46px; }
  .wl-ai__eyelet { top: 21px; margin-top: 0; }
  .wl-main .wl-ai .wl-ai__copy { flex-basis: 100%; justify-content: center; }
  .wl-ai__prompt textarea { height: 240px !important; padding: 16px 18px 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-tag-card__photo--new { transition: none; }
  .wl-tag-card__link:hover .wl-tag, .wl-tag-card__link:hover .wl-tag__twine { animation: none; }
  .wl-scene * { animation: none !important; }
  .wl-scene .heart { opacity: 1; transform: translate(0, -12px); }
  .wl-scene .heart--late { display: none; }
}

/* ---------------------------------------------------------------- dialogs */
/*
 * Opening and closing are transitions. @starting-style gives the entry (a tag
 * swinging in from its top edge); the exit is the way back to the base state,
 * which wishlists.js triggers with [data-closing] where a closing <dialog> cannot
 * stay in the top layer by itself (Firefox, older Safari).
 */
.wl-dialog {
  border: 0;
  border-radius: 22px;
  padding: 0;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  color: var(--wl-ink);
  background: #fff;
  box-shadow: 0 40px 90px -24px rgba(14, 38, 25, .5), 0 0 0 1px rgba(23, 59, 42, .06);
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transform-origin: 50% 0;
  transition-property: opacity, transform, overlay, display;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
  transition-behavior: allow-discrete;
}
.wl-dialog[open]:not([data-closing]) {
  opacity: 1;
  transform: none;
  transition-duration: .45s;
  transition-timing-function: cubic-bezier(.2, .9, .3, 1.25);
}
@starting-style {
  .wl-dialog[open]:not([data-closing]) { opacity: 0; transform: translateY(-16px) rotate(-3deg) scale(.96); }
}
.wl-dialog--form { width: min(720px, calc(100vw - 24px)); }
.wl-dialog::backdrop {
  background-color: rgba(14, 38, 25, 0);
  backdrop-filter: blur(0);
  overflow: hidden;
  overscroll-behavior: contain;
  transition-property: background-color, backdrop-filter, overlay, display;
  transition-duration: .3s;
  transition-behavior: allow-discrete;
}
.wl-dialog[open]:not([data-closing])::backdrop { background-color: rgba(14, 38, 25, .5); backdrop-filter: blur(3px); }
@starting-style {
  .wl-dialog[open]:not([data-closing])::backdrop { background-color: rgba(14, 38, 25, 0); backdrop-filter: blur(0); }
}
.wl-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--wl-line); }
.wl-dialog__head h2 { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 20px; margin: 0; }
.wl-dialog__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #7E7E7E; padding: 0 0 2px; transition: background-color .2s, color .2s, transform .3s; }
.wl-dialog__close:hover { background: var(--wl-mint); color: var(--wl-ink); transform: rotate(90deg); }
.wl-dialog__close:focus-visible { outline: 2px solid var(--wl-leaf); outline-offset: 2px; }
.wl-dialog__body { padding: 18px 22px; overflow-y: auto; max-height: calc(100vh - 200px); }
.wl-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--wl-line); }
.wl-dialog__msg { margin: 0 0 12px; font-size: 14px; color: var(--wl-leaf); min-height: 1em; }
.wl-dialog__msg.is-error { color: #a12a2a; }

/*
 * "Uložiť do zoznamu" follows the add-to-cart popup (porto/assets/css/cart-added-popup.css)
 * so saving and buying read as one family: white card, round leaf badge before the
 * title, the product on a sand tile, then the lists as plain rows and the same pair
 * of footer buttons. A ticked row takes the leaf border and a filled round check.
 */
.wl-dialog--picker { width: min(520px, calc(100vw - 24px)); border-radius: 12px; overflow: hidden; font-family: "Quicksand", sans-serif; color: #253D4E; }
.wl-picker-head { align-items: flex-start; margin: 0 28px; padding: 26px 0 16px; border-bottom: 1px solid #E8EBE6; }
.wl-picker-head h2 { display: flex; align-items: center; gap: 12px; min-height: 34px; color: #253D4E; font-size: 23px; line-height: 1.3; }
.wl-picker-badge { display: flex; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #EDF4E9; color: #468B42; }
.wl-picker-badge svg { width: 19px; height: 19px; margin: auto; fill: currentColor; }
.wl-picker-head .wl-dialog__close { width: 30px; height: 30px; margin-top: 2px; border-radius: 6px; color: #6C766E; }
.wl-picker-head .wl-dialog__close:hover { background: #F5F2ED; color: #253D4E; transform: none; }
.wl-picker-head .wl-dialog__close:focus-visible { outline: 2px solid #253D4E; outline-offset: 3px; }

.wl-picker-product { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; margin: 20px 28px 0; }
.wl-picker-product[hidden] { display: none; }
.wl-picker-product__image { position: relative; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: #F5F2ED; color: #7D9770; }
.wl-picker-product__image > svg { width: 50px; height: 50px; margin: 11px; }
.wl-picker-product__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-picker-product__name { color: #253D4E; font-size: 16px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.wl-dialog--picker .wl-dialog__body { padding: 20px 28px 28px; max-height: calc(100vh - 230px); }

/*
 * Opening and closing are SweetAlert2's own (sweetalert2@9.js, which runs the
 * add-to-cart popup): a .3s pop from 70 % with a small overshoot, a .15s shrink to
 * 50 % while fading out, and a black backdrop at 60 % (main.css) fading in .1s.
 * Keyframes instead of the dialog transitions above, so wishlists.js always plays
 * the exit through [data-closing] before close().
 */
.wl-dialog.wl-dialog--picker, .wl-dialog.wl-dialog--picker[open]:not([data-closing]) { opacity: 1; transform: none; transition: none; }
.wl-dialog.wl-dialog--picker[open] { animation: wl-swal-show .3s; }
.wl-dialog.wl-dialog--picker[data-closing] { animation: wl-swal-hide .15s forwards; }
.wl-dialog.wl-dialog--picker::backdrop, .wl-dialog.wl-dialog--picker[open]:not([data-closing])::backdrop { background-color: rgba(0, 0, 0, .6); backdrop-filter: none; transition: none; animation: wl-swal-backdrop-in .1s; }
.wl-dialog.wl-dialog--picker[data-closing]::backdrop { animation: wl-swal-backdrop-out .1s forwards; }
@keyframes wl-swal-show { 0% { transform: scale(.7); } 45% { transform: scale(1.05); } 80% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes wl-swal-hide { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.5); opacity: 0; } }
@keyframes wl-swal-backdrop-in { from { background-color: rgba(0, 0, 0, 0); } }
@keyframes wl-swal-backdrop-out { to { background-color: rgba(0, 0, 0, 0); } }
@keyframes wl-fade-in { from { opacity: 0; } }
@keyframes wl-fade-out { to { opacity: 0; } }

.wl-picker-msg { margin: 0 0 14px; padding: 11px 14px; border-radius: 5px; background: #EDF4E9; color: #468B42; font-size: 13px; font-weight: 700; line-height: 1.45; min-height: 0; }
/* The slot grows from 0fr to 1fr, so the centred card eases taller when the first message arrives. */
.wl-picker-note { display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; transform: translateY(-4px); transition: grid-template-rows .3s ease, margin-bottom .3s ease, opacity .25s ease .05s, transform .25s ease .05s; }
.wl-picker-note.is-shown { grid-template-rows: 1fr; margin-bottom: 14px; opacity: 1; transform: none; }
.wl-picker-note > div { min-height: 0; overflow: hidden; }
.wl-picker-note .wl-picker-msg { margin: 0; transition: background-color .2s, color .2s; }
.wl-picker-note .wl-picker-msg.is-new { animation: wl-note-swap .3s ease; }
@keyframes wl-note-swap { from { opacity: .35; transform: translateY(-3px); } }
.wl-picker-msg.is-error { background: #FBEDED; color: #A12A2A; }

.wl-picker-lists { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: min(300px, 40vh); overflow-y: auto; }

.wl-pick__tag { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid #E8EBE6; border-radius: 8px; background: #fff; font-weight: 400; cursor: pointer; transition: background-color .16s, border-color .16s; }
.wl-pick__tag:hover { background: #F3F7EF; }
.wl-dialog .wl-pick__tag input.wl-pick__box { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; margin: 0; opacity: 0; pointer-events: none; }
.wl-pick__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wl-pick__name { font-size: 15px; font-weight: 700; color: #253D4E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-pick__text small { font-family: "Lato", sans-serif; font-size: 12px; color: #68736B; }
.wl-pick__vis { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 5px; background: #F5F2ED; color: #68736B; font-size: 12px; font-weight: 700; }
.wl-pick__vis i { font-size: 11px; line-height: 1; }
.wl-pick__mark { flex: none; width: 24px; height: 24px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-pick__mark circle { stroke: #CCD6CE; fill: #fff; transition: fill .16s, stroke .16s; }
.wl-pick__mark path { stroke: #fff; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .3s ease .05s; }

.wl-pick__tag:has(.wl-pick__box:checked) { border-color: #1E913D; background: #F3F7EF; }
.wl-pick__tag:has(.wl-pick__box:checked) .wl-pick__mark circle { fill: #1E913D; stroke: #1E913D; }
.wl-pick__tag:has(.wl-pick__box:checked) .wl-pick__mark path { stroke-dashoffset: 0; }
.wl-pick__tag:has(.wl-pick__box:focus-visible) { outline: 2px solid #253D4E; outline-offset: 2px; }
.wl-pick__tag:has(.wl-pick__box:disabled) { cursor: progress; }
.wl-pick__tag:has(.wl-pick__box:disabled) .wl-pick__mark { opacity: .5; }

/* New list: the sand panel the cart popup uses for its total. */
.wl-picker-new { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin: 14px 0 0; padding: 14px 16px; border-radius: 5px; background: #F5F2ED; }
.wl-picker-new label { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 700; color: #253D4E; }
.wl-dialog .wl-picker-new input[type=text] { width: 100% !important; height: 45px !important; min-height: 0 !important; margin: 0; padding: 0 12px !important; border: 1px solid #E0DCD3 !important; border-radius: 5px !important; background: #fff !important; font-size: 14px !important; box-shadow: none !important; }
.wl-dialog .wl-picker-new input[type=text]:focus { border-color: #1E913D !important; box-shadow: 0 0 0 3px rgba(30, 145, 61, .15) !important; outline: none; }
.wl-dialog .wl-picker-new .btn { height: 45px; padding: 0 18px !important; border-radius: 5px; font: 700 13px/1.4 "Quicksand", sans-serif; }

/* The cart popup's two buttons: outlined secondary, filled primary. */
.wl-picker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; }
.wl-picker-secondary, .wl-picker-primary { display: flex; align-items: center; justify-content: center; min-height: 45px; margin: 0; padding: 10px 12px; border: 1px solid #1E913D; border-radius: 5px; font: 700 13px/1.4 "Quicksand", sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .16s, transform .16s; }
.wl-picker-secondary, .wl-picker-secondary:hover, .wl-picker-secondary:focus { background: #fff; color: #1E913D; text-decoration: none; }
.wl-picker-secondary:hover { background: #F3F7EF; }
.wl-picker-primary, .wl-picker-primary:hover, .wl-picker-primary:focus { background: #1E913D; color: #fff; text-decoration: none; }
.wl-picker-secondary:active, .wl-picker-primary:active { transform: translateY(1px); }
.wl-picker-secondary:focus-visible, .wl-picker-primary:focus-visible { outline: 2px solid #253D4E; outline-offset: 3px; }

.wl-picker-login p { line-height: 1.6; margin: 0 0 16px; font-size: 14px; }
.wl-picker-login p.wl-picker-msg { font-size: 13px; }
.wl-picker-login .wl-picker-actions { margin-top: 20px; }

/* Phones: the create/edit form is a bottom sheet that slides up; the picker stays a centred card. */
@media (max-width: 575px) {
  .wl-dialog, .wl-dialog--form, .wl-dialog--picker { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92vh; transform: translateY(48px); }
  @starting-style {
    .wl-dialog[open]:not([data-closing]) { opacity: 1; transform: translateY(100%); }
  }
  .wl-dialog[open]:not([data-closing]) { transition-timing-function: cubic-bezier(.2, .9, .3, 1); transition-duration: .4s; }
  .wl-dialog.wl-dialog--picker { width: calc(100% - 20px); margin: auto; border-radius: 12px; max-height: calc(100vh - 20px); }
  .wl-picker-head { margin: 0 18px; padding-top: 22px; }
  .wl-picker-head h2 { font-size: 20px; gap: 10px; }
  .wl-picker-product { margin: 16px 18px 0; gap: 14px; }
  .wl-picker-product__name { font-size: 14px; }
  .wl-dialog--picker .wl-dialog__body { padding: 16px 18px 18px; max-height: calc(100vh - 200px); }
  .wl-picker-lists { max-height: none; }
  .wl-pick__vis { padding: 4px 7px; }
  .wl-picker-actions { gap: 8px; }
  .wl-picker-secondary, .wl-picker-primary { padding: 10px 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-dialog, .wl-dialog[open]:not([data-closing]) { transform: none; transition-duration: .12s; }
  @starting-style {
    .wl-dialog[open]:not([data-closing]) { transform: none; }
  }
  .wl-dialog.wl-dialog--picker[open] { animation: wl-fade-in .12s; }
  .wl-dialog.wl-dialog--picker[data-closing] { animation: wl-fade-out .12s forwards; }
  .wl-picker-note { transform: none; transition: none; }
  .wl-picker-note .wl-picker-msg.is-new { animation: none; }
  .wl-dialog__close:hover, .wl-picker-secondary:active, .wl-picker-primary:active { transform: none; }
}

.wl-form .wl-field { margin: 0 0 18px; border: 0; padding: 0; }
.wl-form label, .wl-form legend { font-weight: 700; margin-bottom: 6px; display: block; font-size: 14px; }
.wl-form input[type=text], .wl-form textarea { width: 100%; border: 1px solid #ececec; border-radius: 6px; padding: 10px 12px; font-size: 15px; }
.wl-form input[type=text] { height: 44px; }
.wl-form input[type=text]:focus, .wl-form textarea:focus { border-color: #1E913D; outline: none; box-shadow: 0 0 0 3px rgba(30, 145, 61, .15); }
/* The theme sizes every input at 100% x 64px; checkboxes and radios opt out. */
.wl-dialog input[type=radio], .wl-dialog input[type=checkbox], .wl-main input[type=checkbox] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  flex: none;
  accent-color: #1E913D;
}
.wl-form textarea { min-height: 0; height: auto; }
.wl-choice span { flex: 1; }
.wl-choice { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; padding: 8px 0; cursor: pointer; }
.wl-choice input { margin-top: 3px; accent-color: #1E913D; }
.wl-choice small { display: block; color: #7E7E7E; font-size: 13px; margin-top: 2px; }
.wl-help { font-size: 13px; color: #7E7E7E; margin: 0 0 10px; line-height: 1.5; }
.wl-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.wl-cover-option { position: relative; display: flex !important; flex-direction: column; gap: 6px; font-weight: 400 !important; font-size: 12px !important; cursor: pointer; text-align: center; margin: 0 !important; }
.wl-cover-option input { position: absolute; opacity: 0; pointer-events: none; }
.wl-cover-option img, .wl-cover-option__box { width: 100%; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; background: #f2f3f4 center / cover no-repeat; color: #7E7E7E; font-size: 22px; }
.wl-cover-option input:checked ~ img, .wl-cover-option input:checked ~ .wl-cover-option__box { border-color: #1E913D; box-shadow: 0 0 0 3px rgba(30, 145, 61, .2); }
.wl-cover-option input:focus-visible ~ img, .wl-cover-option input:focus-visible ~ .wl-cover-option__box { outline: 2px solid #253D4E; outline-offset: 2px; }
/* Save errors sit in the footer, left of the buttons, where the eye already is. */
.wl-dialog__foot .wl-form__error { flex: 1; align-self: center; display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0 auto 0 0; color: #a12a2a; font-size: 14px; font-weight: 700; line-height: 1.4; }
/* Warning triangle with an exclamation mark, in the text colour. */
.wl-dialog__foot .wl-form__error::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 3.4a2 2 0 0 1 3.4 0l8.6 15a2 2 0 0 1-1.7 3H3.4a2 2 0 0 1-1.7-3zM11 9v5.5h2V9zm0 7.5v2h2v-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 3.4a2 2 0 0 1 3.4 0l8.6 15a2 2 0 0 1-1.7 3H3.4a2 2 0 0 1-1.7-3zM11 9v5.5h2V9zm0 7.5v2h2v-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wl-form input[aria-invalid="true"] { border-color: #a12a2a !important; box-shadow: 0 0 0 3px rgba(161, 42, 42, .14) !important; }
@media (max-width: 575px) {
  .wl-dialog__foot { flex-wrap: wrap; }
  .wl-dialog__foot .wl-form__error { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- hearts */
.wl-saved, .wl-saved i { color: #e0384f !important; }
.wl-saved .fi-rs-heart:before { font-weight: 700; }

.wl-pagination { margin-top: 30px; }