{"id":30084,"date":"2026-04-19T04:50:12","date_gmt":"2026-04-19T01:50:12","guid":{"rendered":"https:\/\/atheart.gr\/?page_id=30084"},"modified":"2026-04-26T17:53:31","modified_gmt":"2026-04-26T14:53:31","slug":"homepage-finallive","status":"publish","type":"page","link":"https:\/\/atheart.gr\/el\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30084\" class=\"elementor elementor-30084 elementor-28826\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-643abe2 e-con-full e-flex e-con e-parent\" data-id=\"643abe2\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4292b64 elementor-widget elementor-widget-html\" data-id=\"4292b64\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n\/* =============================================================\n   atheart.gr \u2014 Bag Slider (wheel carousel, layered)\n   Layer order (back \u2192 front):\n     1. BG wheel    (rotating background photos)\n     2. Ground      (static triangular overlay)\n     3. Model wheel (rotating bags \u2014 always above the triangles)\n     4. Card        (static title, text swaps on slide change)\n   ============================================================= *\/\n\n.bsgs-wrap,\n.bsgs-wrap *,\n.bsgs-wrap *::before,\n.bsgs-wrap *::after { box-sizing: border-box; }\n\n\/* ---------- Preloader ----------\n   Full-screen overlay (fixed, covers the whole viewport \u2014 not just the\n   slider) shown on first paint and faded out once every <img> inside the\n   wrap has finished loading (or after a 7s safety timeout). *\/\n.bsgs-preloader {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #ffffff;\n  z-index: 99999;\n  transition: opacity 0.5s ease, visibility 0s linear 0.5s;\n}\n.bsgs-preloader.is-hidden {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.bsgs-preloader__spinner {\n  width: 56px;\n  height: 56px;\n  border: 4px solid rgba(0, 0, 0, 0.12);\n  border-top-color: #459fff;\n  border-radius: 50%;\n  animation: bsgsPreloaderSpin 0.85s linear infinite;\n}\n@keyframes bsgsPreloaderSpin {\n  to { transform: rotate(360deg); }\n}\n\n\/* Outer container \u2014 breaks out of Elementor padding and provides an\n   overflow:visible context so the scroll-cue SVG can straddle the wrap's\n   bottom edge without being clipped by the wrap's overflow:hidden. *\/\n.bsgs-outer {\n  position: relative;\n  width: 100vw;\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  overflow: visible;\n}\n\n.bsgs-wrap {\n  --bsgs-wrap-h: 95vh;\n  --bsgs-card-w: 400px;\n  --bsgs-card-h: 200px;\n  \/* Image height = min(viewport-relative, card-relative cap).\n     - viewport-relative (70vh) lets it grow on tall screens\n     - card-relative cap (card-h * 4) prevents overflow on short screens\n       (so the bag head doesn't push up behind the logo)\n     - min() picks whichever is smaller, giving a balanced size at every viewport. *\/\n  --bsgs-img-h: min(70vh, calc(var(--bsgs-card-h) * 4));\n  --bsgs-img-overlap: 60px;   \/* how far the bag bottom dips into the card from its top edge *\/\n  --bsgs-ground-notch: 150px; \/* height of the inner notch where ground meets card edge *\/\n  position: relative;\n  width: 100%;\n  height: var(--bsgs-wrap-h);\n  overflow: hidden;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  color: #000;\n  \/* Matches the panel gradient so any rotation-corner gap blends invisibly *\/\n  background: linear-gradient(to bottom, #5e9bd9 0%, #9ec6f2 100%);\n  -webkit-font-smoothing: antialiased;\n  isolation: isolate;\n}\n\n\/* Shared frame dimensions for both wheels so they rotate through the same arc *\/\n.bsgs-frame {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 200vw;       \/* wider than viewport so slides overlap during rotation *\/\n  height: 500vh;\n  transform: translateX(-50%);\n  \/* Frame-level transform is used for the hover-arrow tilt. BG tilts first,\n     bag frames trail for an asynchronous parallax feel. *\/\n  transition: transform 0.45s ease;\n  pointer-events: none;\n}\n.bsgs-frame--model,\n.bsgs-frame--model-front,\n.bsgs-frame--model-back {\n  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\/* Hover preview \u2014 tilts the whole composition slightly in the direction\n   of the incoming slide when you hover an arrow.\n   Desktop-only: `(hover: hover)` excludes touch devices (mobile fires\n   :hover on tap, which caused an unwanted tilt). The min-width also\n   excludes tablets per product decision. *\/\n@media (hover: hover) and (min-width: 1025px) {\n  .bsgs-wrap:has(.bsgs-arrow--prev:hover) .bsgs-frame {\n    transform: translateX(-50%) rotate(5deg);\n  }\n  .bsgs-wrap:has(.bsgs-arrow--next:hover) .bsgs-frame {\n    transform: translateX(-50%) rotate(-5deg);\n  }\n}\n\n.bsgs-wheel {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \/* BG wheel leads \u2014 default timing. Bag wheels override below to trail. *\/\n  transition: transform 1.15s cubic-bezier(0.76, 0, 0.24, 1);\n  will-change: transform;\n}\n\/* Bag wheels take longer, creating an asynchronous parallax between\n   foreground bags and the background city scene during slide transitions. *\/\n.bsgs-frame--model .bsgs-wheel,\n.bsgs-frame--model-front .bsgs-wheel,\n.bsgs-frame--model-back .bsgs-wheel {\n  transition: transform 1.4s cubic-bezier(0.68, 0, 0.32, 1);\n}\n\n.bsgs-panel {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 50%;\n  transform-origin: 50% 100%;\n  \/* overflow visible so the slide can extend above\/beyond the panel\n     and cover the top-left gap when the panel rotates *\/\n  overflow: visible;\n}\n.bsgs-panel--0  { transform: rotate(0deg); }\n.bsgs-panel--1  { transform: rotate(30deg); }\n.bsgs-panel--2  { transform: rotate(60deg); }\n.bsgs-panel--3  { transform: rotate(90deg); }\n.bsgs-panel--4  { transform: rotate(120deg); }\n.bsgs-panel--5  { transform: rotate(150deg); }\n.bsgs-panel--6  { transform: rotate(180deg); }\n.bsgs-panel--7  { transform: rotate(210deg); }\n.bsgs-panel--8  { transform: rotate(240deg); }\n.bsgs-panel--9  { transform: rotate(270deg); }\n.bsgs-panel--10 { transform: rotate(300deg); }\n.bsgs-panel--11 { transform: rotate(330deg); }\n\n.bsgs-slide {\n  position: absolute;\n  top: -30vh;           \/* extend above viewport so rotation doesn't expose wrap bg *\/\n  left: -10%;\n  width: 120%;\n  height: 160vh;        \/* taller + wider than viewport for rotation coverage *\/\n  overflow: hidden;\n}\n\/* Model wheel slides keep the centered, viewport-sized area \u2014 the bag itself shouldn't drift *\/\n.bsgs-frame--model .bsgs-slide,\n.bsgs-frame--model-front .bsgs-slide {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--bsgs-wrap-h);\n}\n\n\/* ---------- Layer 1 \u2014 BG wheel ---------- *\/\n.bsgs-frame--bg { z-index: 1; }\n\n.bsgs-bg {\n  \/* Per-panel BG deprecated \u2014 replaced by cross-fading .bsgs-bg-layer below.\n     Rotating a per-panel background created a visible diagonal corner during\n     the transition, which the horizon line of the static ground couldn't mask.\n     Cross-fade preserves the ground horizon unchanged. *\/\n  display: none !important;\n}\n\n\/* Full-viewport BG layers \u2014 cross-fade driven by [data-bg] on .bsgs-wrap.\n   Add\/edit per-slide gradients here; change `data-bg` default in JS to pick\n   the starting slide. *\/\n.bsgs-bg-layer {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  opacity: 0;\n  transition: opacity 0.9s ease;\n  pointer-events: none;\n}\n.bsgs-wrap[data-bg=\"0\"] .bsgs-bg-layer--0,\n.bsgs-wrap[data-bg=\"1\"] .bsgs-bg-layer--1,\n.bsgs-wrap[data-bg=\"2\"] .bsgs-bg-layer--2,\n.bsgs-wrap[data-bg=\"3\"] .bsgs-bg-layer--3,\n.bsgs-wrap[data-bg=\"4\"] .bsgs-bg-layer--4,\n.bsgs-wrap[data-bg=\"5\"] .bsgs-bg-layer--5,\n.bsgs-wrap[data-bg=\"6\"] .bsgs-bg-layer--6,\n.bsgs-wrap[data-bg=\"7\"] .bsgs-bg-layer--7,\n.bsgs-wrap[data-bg=\"8\"] .bsgs-bg-layer--8,\n.bsgs-wrap[data-bg=\"9\"] .bsgs-bg-layer--9,\n.bsgs-wrap[data-bg=\"10\"] .bsgs-bg-layer--10,\n.bsgs-wrap[data-bg=\"11\"] .bsgs-bg-layer--11 { opacity: 1; }\n.bsgs-bg-layer--0 { background: linear-gradient(to bottom, #ff9a6b 0%, #ffd4a3 100%); } \/* Athens \u2014 sunset *\/\n.bsgs-bg-layer--1 { background: linear-gradient(to bottom, #c5bb6e 0%, #cec272 100%); } \/* Cherish \u2014 olive *\/\n.bsgs-bg-layer--2 { background: linear-gradient(to bottom, #ff8894 0%, #ffc1c9 100%); } \/* Click \u2014 rose (placeholder) *\/\n.bsgs-bg-layer--3 { background: linear-gradient(to bottom, #d4c19b 0%, #f0e6d2 100%); } \/* Doors \u2014 sand (placeholder) *\/\n.bsgs-bg-layer--4 { background: linear-gradient(to bottom, #ffd580 0%, #fff3db 100%); } \/* Free \u2014 warm cream (placeholder) *\/\n.bsgs-bg-layer--5 { background: linear-gradient(to bottom, #a290cf 0%, #d4c9e8 100%); } \/* Majestic \u2014 royal purple (placeholder) *\/\n.bsgs-bg-layer--6 { background: linear-gradient(to bottom, #4ba3a3 0%, #a5d6d6 100%); } \/* Mosaic \u2014 teal (placeholder) *\/\n.bsgs-bg-layer--7 { background: linear-gradient(to bottom, #8cc0db 0%, #cfe5ee 100%); } \/* Ocean \u2014 lighter blue *\/\n.bsgs-bg-layer--8 { background: linear-gradient(to bottom, #ffcbd4 0%, #c5e8ff 100%); } \/* Rainbow \u2014 pastel pink-to-blue (placeholder) *\/\n.bsgs-bg-layer--9 { background: linear-gradient(to bottom, #f5d568 0%, #ffe9a8 100%); } \/* Shine \u2014 golden yellow (placeholder) *\/\n.bsgs-bg-layer--10 { background: linear-gradient(to bottom, #c08bb5 0%, #e0bdd6 100%); } \/* Wrap \u2014 soft mauve (placeholder) *\/\n.bsgs-bg-layer--11 { background: linear-gradient(to bottom, #f59ab1 0%, #ffd1dc 100%); } \/* Zip \u2014 soft pink (placeholder) *\/\n\n\/* Drifting cloud \u2014 continuous loop with an off-screen pause between passes.\n   Note: the cloud lives inside a slide that extends from ~-70vw to ~170vw\n   in viewport coords (slide is 120% wide with left: -10%), so the\n   translateX values are offset accordingly. *\/\n.bsgs-cloud {\n  position: absolute !important;\n  top: 35%;\n  left: 0;\n  width: min(22vw, 260px) !important;\n  height: auto !important;\n  max-width: none !important;\n  max-height: none !important;\n  z-index: 2;\n  pointer-events: none;\n  user-select: none;\n  opacity: 0.92;\n  transform: translateX(170vw);   \/* parked just off-screen right *\/\n  will-change: transform;\n}\n.bsgs-cloud--drift-left {\n  animation: bsgsCloudDriftLeft 32s linear infinite;\n}\n.bsgs-cloud--drift-right {\n  animation: bsgsCloudDriftRight 32s linear infinite;\n}\n\/* Right \u2192 left visible drift (~75% of cycle), short off-screen pause. *\/\n@keyframes bsgsCloudDriftLeft {\n  0%     { transform: translateX(170vw); }   \/* just off-screen right \u2014 enters immediately *\/\n  75%    { transform: translateX(-30vw); }   \/* off-screen left *\/\n  75.001%{ transform: translateX(170vw); }\n  100%   { transform: translateX(170vw); }\n}\n\/* Left \u2192 right visible drift, short off-screen pause on the left. *\/\n@keyframes bsgsCloudDriftRight {\n  0%     { transform: translateX(-30vw); }\n  75%    { transform: translateX(170vw); }\n  75.001%{ transform: translateX(-30vw); }\n  100%   { transform: translateX(-30vw); }\n}\n\n\/* ---------- Decoration layers (parallax stack between BG and bag) ----------\n   Each decoration sits in its own wheel so it can rotate at an independent\n   speed for a true parallax feel.\n     z-2: sun circle        (farthest decoration)\n     z-3: heart SVG\n     z-4: alpha letter SVG\n     z-5: cloud             (closest decoration to bag)\n   The bag and card layers above all shifted +4 to make room. *\/\n.bsgs-frame--sun   { z-index: 2; }\n.bsgs-frame--heart { z-index: 3; }\n.bsgs-frame--alpha { z-index: 4; }\n.bsgs-frame--cloud { z-index: 3; }   \/* between sun (circle) z-2 and alpha (chain) z-4 *\/\n\n\/* Parallax: each decoration wheel has its own transition duration so they\n   trail the BG wheel by different amounts during slide transitions. *\/\n.bsgs-frame--sun   .bsgs-wheel { transition: transform 1.20s cubic-bezier(0.76, 0, 0.24, 1); }\n.bsgs-frame--heart .bsgs-wheel { transition: transform 1.25s cubic-bezier(0.76, 0, 0.24, 1); }\n.bsgs-frame--alpha .bsgs-wheel { transition: transform 1.30s cubic-bezier(0.76, 0, 0.24, 1); }\n.bsgs-frame--cloud .bsgs-wheel { transition: transform 1.35s cubic-bezier(0.76, 0, 0.24, 1); }\n\n\/* Decoration positioning \u2014 uses `left: 50%` (which maps to viewport center\n   because the slide is 120% wide with left:-10%) plus translateX offset to\n   place the element at a viewport-relative horizontal position. Slide\n   coord 50% = wrap horizontal center; slide 29% = wrap left edge, slide 71%\n   = wrap right edge, so `translateX(-50% \u00b1 Nvw)` is the easiest way to pin\n   decorations to a specific viewport column without tortured math. *\/\n\n\/* Sun \u2014 big solid yellow circle, left-of-center, partially behind bag. *\/\n\/* Athens sun \u2014 anchored from wrap bottom, sized\/positioned via --bsgs-img-h\n   fractions (same pattern as Free). Slight breath animation. *\/\n.bsgs-sun {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.285);\n  width:  calc(var(--bsgs-img-h) * 0.935);\n  height: calc(var(--bsgs-img-h) * 0.935);\n  background: #ffd84d;                    \/* yellow *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  \/* One-shot rise (~16s from below), then infinite breathing after a matching delay *\/\n  animation:\n    bsgsSunRise 16s cubic-bezier(0.16, 1, 0.3, 1) both,\n    bsgsSunBreath 5s ease-in-out 16s infinite alternate;\n}\n@keyframes bsgsSunRise {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.85)) scale(1); }\n  to   { transform: translate(-50%, 0)                              scale(1); }\n}\n@keyframes bsgsSunBreath {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.015))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.025)) scale(1.02); }\n}\n\n\/* Heart \u2014 small pink SVG, upper-left. *\/\n\/* Blue heart variant for Cherish \u2014 same size\/position\/animation as the\n   Athens heart (.bsgs-heart) but rendered as an inline SVG so the fill\n   can be any color (here: blue). *\/\n.bsgs-heart-blue {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.775);\n  width:  calc(var(--bsgs-img-h) * 0.12);\n  height: calc(var(--bsgs-img-h) * 0.12);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsHeartFloat 6.5s ease-in-out infinite alternate;\n}\n.bsgs-heart-blue svg { width: 100%; height: 100%; display: block; fill: #171985; }\n\n\/* Pink heart variant for Zip \u2014 same size\/position\/animation as Athens. *\/\n.bsgs-heart-pink {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.775);\n  width:  calc(var(--bsgs-img-h) * 0.12);\n  height: calc(var(--bsgs-img-h) * 0.12);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsHeartFloat 6.5s ease-in-out infinite alternate;\n}\n.bsgs-heart-pink svg { width: 100%; height: 100%; display: block; fill: #a83d6e; }\n\n\/* Majestic heart sits 20px lower than Athens. *\/\n.bsgs-panel--5 .bsgs-heart {\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.75);\n}\n\n\/* Athens small heart \u2014 img-h-relative. *\/\n.bsgs-heart {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.775);\n  width:  calc(var(--bsgs-img-h) * 0.12);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsHeartFloat 6.5s ease-in-out infinite alternate;\n}\n@keyframes bsgsHeartFloat {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.2),  calc(var(--bsgs-img-h) * 0.015))  rotate(-6deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.22), calc(var(--bsgs-img-h) * -0.045)) rotate(18deg); }\n}\n\n\/* Registered custom property so the heart's horizontal offset can animate\n   smoothly on hover even while the rise keyframes are running. *\/\n@property --bsgs-heart-x {\n  syntax: '<length>';\n  initial-value: 0px;\n  inherits: false;\n}\n\n\/* ---------- Cherish \u2014 huge purple heart rising from below the model ----------\n   img-h-relative sizing\/anchoring, same pattern as Athens\/Free. *\/\n.bsgs-cherish-heart {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.6);\n  width:  calc(var(--bsgs-img-h) * 1.2);\n  height: calc(var(--bsgs-img-h) * 1.2);\n  pointer-events: none;\n  user-select: none;\n  --bsgs-heart-x: 0px;\n  transition: --bsgs-heart-x 0.6s ease;\n  animation: bsgsHeartRise 3.2s ease-in-out infinite alternate;\n}\n.bsgs-cherish-heart svg { width: 100%; height: 100%; display: block; fill: #8725c5; }\n@keyframes bsgsHeartRise {\n  from { transform: translate(calc(-50% + var(--bsgs-heart-x)), calc(var(--bsgs-img-h) * 0.24)); }\n  to   { transform: translate(calc(-50% + var(--bsgs-heart-x)), calc(var(--bsgs-img-h) * -0.38)); }\n}\n\/* On card hover, shift the heart to the opposite side of the model so its shape is visible *\/\n.bsgs-wrap:has(.bsgs-card:hover) .bsgs-cherish-heart {\n  --bsgs-heart-x: calc(var(--bsgs-img-h) * -0.53);\n}\n\n\/* ---------- Click \u2014 huge blue circle, red heart, chain SVG ----------\n   img-h-relative sizing\/anchoring, same pattern as Athens\/Cherish\/Free. *\/\n.bsgs-click-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.46);\n  width:  calc(var(--bsgs-img-h) * 0.92);\n  height: calc(var(--bsgs-img-h) * 0.92);\n  background: #2a63d6;\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsClickCircle 7.4s ease-in-out infinite alternate;\n}\n@keyframes bsgsClickCircle {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.012))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.024)) scale(1.025); }\n}\n.bsgs-click-heart {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.05);\n  width:  calc(var(--bsgs-img-h) * 0.68);\n  height: calc(var(--bsgs-img-h) * 0.68);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsClickHeart 4.5s ease-in-out infinite alternate;\n}\n@keyframes bsgsClickHeart {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.28), calc(var(--bsgs-img-h) * 0.026))  rotate(-22deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.13), calc(var(--bsgs-img-h) * -0.068)) rotate(10deg); }\n}\n.bsgs-click-heart svg { width: 100%; height: 100%; display: block; fill: #e73a3e; }\n.bsgs-click-chain {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.41);\n  width:  calc(var(--bsgs-img-h) * 0.56);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsClickChain 5.3s ease-in-out infinite alternate;\n}\n@keyframes bsgsClickChain {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.07), calc(var(--bsgs-img-h) * 0.012))  rotate(-3deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.11), calc(var(--bsgs-img-h) * -0.012)) rotate(3deg); }\n}\n\/* Show only the active panel's cloud (matches data-bg on the wrap). *\/\n.bsgs-wrap[data-bg=\"0\"] .bsgs-panel--0 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"1\"] .bsgs-panel--1 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"2\"] .bsgs-panel--2 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"3\"] .bsgs-panel--3 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"4\"] .bsgs-panel--4 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"5\"] .bsgs-panel--5 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"6\"] .bsgs-panel--6 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"7\"] .bsgs-panel--7 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"8\"] .bsgs-panel--8 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"9\"] .bsgs-panel--9 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"10\"] .bsgs-panel--10 .bsgs-cloud-v2,\n.bsgs-wrap[data-bg=\"11\"] .bsgs-panel--11 .bsgs-cloud-v2 { opacity: 1; }\n\n\/* Cloud on the Athens slide \u2014 peach shade of the sunset gradient *\/\n.bsgs-frame--cloud .bsgs-panel--0 .bsgs-cloud-v2 {\n  background: #ffb98c;\n}\n\/* Cloud on the Cherish slide \u2014 olive shade of the green\/khaki gradient *\/\n.bsgs-frame--cloud .bsgs-panel--1 .bsgs-cloud-v2 {\n  background: #a8ad6a;\n}\n\/* Cloud on the Click slide \u2014 bigger than the default (another 20% smaller) *\/\n.bsgs-frame--cloud .bsgs-panel--2 .bsgs-cloud-v2 {\n  width: min(21.6vw, 269px);\n}\n\/* Cloud on the Free slide \u2014 50% bigger + yellow shade of the bg *\/\n.bsgs-frame--cloud .bsgs-panel--4 .bsgs-cloud-v2 {\n  width: min(27vw, 330px);\n  background: #f0c96a;\n}\n\/* Cloud on the Majestic slide \u2014 lavender shade of the royal-purple gradient *\/\n.bsgs-frame--cloud .bsgs-panel--5 .bsgs-cloud-v2 {\n  background: #b8a5d6;\n}\n\/* Cloud on the Mosaic slide \u2014 darker teal shade of the gradient bg *\/\n.bsgs-frame--cloud .bsgs-panel--6 .bsgs-cloud-v2,\n.bsgs-frame--sun   .bsgs-panel--6 .bsgs-cloud-v2 {\n  background: #4a8e8e;\n}\n\/* Cloud on the Ocean slide \u2014 mid-blue shade matching the lightened ocean gradient *\/\n.bsgs-frame--sun   .bsgs-panel--7 .bsgs-cloud-v2 {\n  background: #6ea8c2;\n}\n\/* Cloud on the Rainbow slide \u2014 pink shade of the pastel bg *\/\n.bsgs-frame--cloud .bsgs-panel--8 .bsgs-cloud-v2 {\n  background: #e8a5b8;\n}\n\/* Cloud on the Shine slide \u2014 light gold shade of the yellow gradient *\/\n.bsgs-frame--cloud .bsgs-panel--9 .bsgs-cloud-v2,\n.bsgs-frame--sun   .bsgs-panel--9 .bsgs-cloud-v2 {\n  background: #f4cc7a;\n}\n\/* Cloud on the Zip slide \u2014 pink shade of the soft-pink gradient *\/\n.bsgs-frame--cloud .bsgs-panel--11 .bsgs-cloud-v2 {\n  background: #f08aa5;\n}\n\n\/* ---------- Doors \u2014 circle, heart (doors.svg), mirrored pair (doors2.svg) ----------\n   img-h-relative sizing\/anchoring, same pattern as Athens\/Cherish\/Click\/Free. *\/\n.bsgs-doors-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.62);\n  width:  calc(var(--bsgs-img-h) * 0.95);\n  height: calc(var(--bsgs-img-h) * 0.95);\n  background: #99b6a5;\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsDoorsCircle 8.2s ease-in-out infinite alternate;\n}\n@keyframes bsgsDoorsCircle {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.013))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.027)) scale(1.025); }\n}\n.bsgs-doors-heart {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.76);\n  width:  calc(var(--bsgs-img-h) * 0.22);\n  height: calc(var(--bsgs-img-h) * 0.22);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsDoorsHeart 5s ease-in-out infinite alternate;\n}\n.bsgs-doors-heart img { width: 100%; height: 100%; display: block; object-fit: contain; }\n@keyframes bsgsDoorsHeart {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.125), calc(var(--bsgs-img-h) * 0.027))  rotate(-8deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.125), calc(var(--bsgs-img-h) * -0.027)) rotate(8deg); }\n}\n\/* Mirrored pair of doors2.svg flanking the model \u2014 two independent motions.\n   Each lollipop is flipped horizontally: left gets scaleX(-1), right stays\n   non-flipped (reverse of the prior setup). *\/\n.bsgs-door-mirror {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.005);\n  width:  calc(var(--bsgs-img-h) * 0.34);\n  height: calc(var(--bsgs-img-h) * 0.34);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-door-mirror--left  { animation: bsgsDoorMirrorL 6.4s ease-in-out infinite alternate; }\n.bsgs-door-mirror--right {\n  animation: bsgsDoorMirrorR 4.9s ease-in-out infinite alternate;\n  animation-delay: -1.2s;\n}\n@keyframes bsgsDoorMirrorL {\n  from { transform: translate(calc(-130% + var(--bsgs-img-h) * 0.0375), calc(var(--bsgs-img-h) * -0.36)) rotate(-48deg); }\n  to   { transform: translate(calc(-120% + var(--bsgs-img-h) * 0.0375), calc(var(--bsgs-img-h) * -0.4))  rotate(-42deg); }\n}\n@keyframes bsgsDoorMirrorR {\n  from { transform: translate(calc(30% - var(--bsgs-img-h) * 0.0875), calc(var(--bsgs-img-h) * -0.24))  rotate(48deg)  scaleX(-1); }\n  to   { transform: translate(calc(20% - var(--bsgs-img-h) * 0.0875), calc(var(--bsgs-img-h) * -0.28)) rotate(42deg)  scaleX(-1); }\n}\n\n\/* ---------- Zip \u2014 rising circle + left\/right belts ---------- *\/\n.bsgs-zip-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.3);\n  width:  calc(var(--bsgs-img-h) * 1.0);\n  height: calc(var(--bsgs-img-h) * 1.0);\n  background: #d4548a;                   \/* deeper pink *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation:\n    bsgsZipRise   16s cubic-bezier(0.16, 1, 0.3, 1) both,\n    bsgsZipBreath  6s ease-in-out 16s infinite alternate;\n}\n@keyframes bsgsZipRise {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.85)) scale(1); }\n  to   { transform: translate(-50%, 0)                              scale(1); }\n}\n@keyframes bsgsZipBreath {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.015))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.025)) scale(1.02); }\n}\n\n\/* Belts pivot at their bottom and the tops lean *inward* (toward each other)\n   in a small range \u2014 preserving the motion where their inner sides reach\n   together but with a much subtler swing. *\/\n.bsgs-zip-belt {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.19);\n  width:  calc(var(--bsgs-img-h) * 0.6);\n  height: calc(var(--bsgs-img-h) * 0.6);\n  object-fit: contain;\n  pointer-events: none;\n  user-select: none;\n  z-index: 2;\n  will-change: transform;\n  transform-origin: 50% 100%;\n}\n.bsgs-zip-belt--left  { animation: bsgsZipBeltL 3s ease-in-out infinite alternate; }\n.bsgs-zip-belt--right { animation: bsgsZipBeltR 3s ease-in-out infinite alternate; }\n@keyframes bsgsZipBeltL {\n  from { transform: translate(calc(-104% - var(--bsgs-img-h) * 0.0625), calc(var(--bsgs-img-h) * -0.0375)) rotate(0deg); }\n  to   { transform: translate(calc(-104% - var(--bsgs-img-h) * 0.0625), calc(var(--bsgs-img-h) * -0.0375)) rotate(5deg); }\n}\n@keyframes bsgsZipBeltR {\n  from { transform: translate(calc(4% + var(--bsgs-img-h) * 0.0375), 0) rotate(0deg); }\n  to   { transform: translate(calc(4% + var(--bsgs-img-h) * 0.0375), 0) rotate(-5deg); }\n}\n\n\/* ---------- Wrap \u2014 rising circle + left\/right keys ---------- *\/\n.bsgs-wrap-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.3);\n  width:  calc(var(--bsgs-img-h) * 1.0);\n  height: calc(var(--bsgs-img-h) * 1.0);\n  background: #c8a5d8;                   \/* placeholder \u2014 adjust *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation:\n    bsgsWrapRise   16s cubic-bezier(0.16, 1, 0.3, 1) both,\n    bsgsWrapBreath  6s ease-in-out 16s infinite alternate;\n}\n@keyframes bsgsWrapRise {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.85)) scale(1); }\n  to   { transform: translate(-50%, 0)                              scale(1); }\n}\n@keyframes bsgsWrapBreath {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.015))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.025)) scale(1.02); }\n}\n\n.bsgs-wrap-keys {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.35);\n  width:  calc(var(--bsgs-img-h) * 0.4);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-wrap-keys--left  { animation: bsgsWrapKeysL 6.4s ease-in-out infinite alternate; }\n.bsgs-wrap-keys--right {\n  animation: bsgsWrapKeysR 5.3s ease-in-out infinite alternate;\n  animation-delay: -1.3s;\n}\n@keyframes bsgsWrapKeysL {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.281), calc(var(--bsgs-img-h) * -0.054)) rotate(-6deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.261), calc(var(--bsgs-img-h) * -0.108)) rotate(6deg); }\n}\n@keyframes bsgsWrapKeysR {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.3), calc(var(--bsgs-img-h) * 0.015))  rotate(6deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.28), calc(var(--bsgs-img-h) * -0.04)) rotate(-6deg); }\n}\n\n\/* ---------- Shine \u2014 yellow circle, curve pair (like Mosaic), heart around head ---------- *\/\n.bsgs-shine-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.3);\n  width:  calc(var(--bsgs-img-h) * 1.0);\n  height: calc(var(--bsgs-img-h) * 1.0);\n  background: #ffd668;                   \/* yellow *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsShineCircle 6s ease-in-out infinite alternate;\n}\n@keyframes bsgsShineCircle {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.015))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.025)) scale(1.02); }\n}\n\n\/* Shine curves \u2014 same placement as the Mosaic curve pair *\/\n.bsgs-shine-curve {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.005);\n  width:  calc(var(--bsgs-img-h) * 0.45);\n  height: calc(var(--bsgs-img-h) * 0.45);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-shine-curve--left  {\n  width:  calc(var(--bsgs-img-h) * 0.324);\n  height: calc(var(--bsgs-img-h) * 0.324);\n  animation: bsgsShineCurveL 6.4s ease-in-out infinite alternate;\n}\n.bsgs-shine-curve--right {\n  width:  calc(var(--bsgs-img-h) * 0.306);\n  height: calc(var(--bsgs-img-h) * 0.306);\n  animation: bsgsShineCurveR 5.3s ease-in-out infinite alternate;\n  animation-delay: -1.3s;\n}\n@keyframes bsgsShineCurveL {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.15), calc(var(--bsgs-img-h) * -0.19)) rotate(-47deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.13), calc(var(--bsgs-img-h) * -0.23)) rotate(-41deg); }\n}\n@keyframes bsgsShineCurveR {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.219), calc(var(--bsgs-img-h) * -0.006)) rotate(-298deg) scaleX(-1); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.239), calc(var(--bsgs-img-h) * -0.046)) rotate(-304deg) scaleX(-1); }\n}\n\n\/* Shine heart \u2014 placed at the same spot as the Mosaic 3-circle ornament (above the head, slow rotation) *\/\n.bsgs-shine-heart {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.47);\n  width:  calc(var(--bsgs-img-h) * 0.33);\n  height: calc(var(--bsgs-img-h) * 0.33);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsShineHeart 12s linear infinite;\n}\n@keyframes bsgsShineHeart {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.125), 0) rotate(0deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.125), 0) rotate(360deg); }\n}\n\n\/* ---------- Rainbow \u2014 heart on right of head + rainbow arc on left. ---------- *\/\n.bsgs-rainbow-heart {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.775);\n  width:  calc(var(--bsgs-img-h) * 0.14);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsRainbowHeart 6s ease-in-out infinite alternate;\n}\n@keyframes bsgsRainbowHeart {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.18), calc(var(--bsgs-img-h) * 0.02))  rotate(-6deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.2),  calc(var(--bsgs-img-h) * -0.04)) rotate(12deg); }\n}\n\n.bsgs-rainbow-arc {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.39);\n  width:  calc(var(--bsgs-img-h) * 0.55);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-rainbow-arc--left  { animation: bsgsRainbowArcL 7.2s ease-in-out infinite alternate; }\n.bsgs-rainbow-arc--right { animation: bsgsRainbowArcR 6.3s ease-in-out infinite alternate; animation-delay: -1s; }\n@keyframes bsgsRainbowArcL {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.24),  calc(var(--bsgs-img-h) * -0.06)) rotate(-24deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.22),  calc(var(--bsgs-img-h) * -0.11)) rotate(-16deg); }\n}\n@keyframes bsgsRainbowArcR {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.26), calc(var(--bsgs-img-h) * 0.015)) rotate(6deg)  scaleX(-1); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.24), calc(var(--bsgs-img-h) * -0.03)) rotate(14deg) scaleX(-1); }\n}\n\n\/* ---------- Ocean \u2014 rising circle + heart-rope, chain, boat. ----------\n   Circle uses the same sunrise pattern as Athens\/Majestic. *\/\n.bsgs-ocean-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.3);\n  width:  calc(var(--bsgs-img-h) * 1.0);\n  height: calc(var(--bsgs-img-h) * 1.0);\n  background: #ffd668;                   \/* warm yellow *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation:\n    bsgsOceanRise   16s cubic-bezier(0.16, 1, 0.3, 1) both,\n    bsgsOceanBreath  6s ease-in-out 16s infinite alternate;\n}\n@keyframes bsgsOceanRise {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.85)) scale(1); }\n  to   { transform: translate(-50%, 0)                              scale(1); }\n}\n@keyframes bsgsOceanBreath {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.015))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.025)) scale(1.02); }\n}\n\n.bsgs-ocean-heart-rope {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.5);\n  width:  calc(var(--bsgs-img-h) * 0.5);\n  height: calc(var(--bsgs-img-h) * 0.5);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsOceanHeartRope 5.5s ease-in-out infinite alternate;\n}\n@keyframes bsgsOceanHeartRope {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.03), calc(var(--bsgs-img-h) * 0.02))  rotate(-8deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.06), calc(var(--bsgs-img-h) * -0.03)) rotate(8deg); }\n}\n\n.bsgs-ocean-chain {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.35);\n  width:  calc(var(--bsgs-img-h) * 0.06);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-ocean-chain--right { animation: bsgsOceanChainR 7s ease-in-out infinite alternate; }\n.bsgs-ocean-chain--left  { animation: bsgsOceanChainL 7s ease-in-out infinite alternate; animation-delay: -1s; }\n@keyframes bsgsOceanChainR {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.325), calc(var(--bsgs-img-h) * 0.57)) rotate(-49deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.345), calc(var(--bsgs-img-h) * 0.54)) rotate(-41deg); }\n}\n@keyframes bsgsOceanChainL {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.475), calc(var(--bsgs-img-h) * 0.5075)) rotate(61deg) scaleX(-1); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.495), calc(var(--bsgs-img-h) * 0.4775)) rotate(69deg) scaleX(-1); }\n}\n\n.bsgs-ocean-boat {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.42);\n  width:  calc(var(--bsgs-img-h) * 0.21);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsOceanBoat 4.5s ease-in-out infinite alternate;\n}\n@keyframes bsgsOceanBoat {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.2725), 0)                                rotate(-2deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.3025), calc(var(--bsgs-img-h) * -0.02)) rotate(2deg); }\n}\n\n\/* ---------- Mosaic \u2014 centered circle + flower (left), curve pair (mirrored),\n   3-circle ornament around the head. All img-h-relative. *\/\n.bsgs-mosaic-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.3);\n  width:  calc(var(--bsgs-img-h) * 1.0);\n  height: calc(var(--bsgs-img-h) * 1.0);\n  background: #3a8f8f;                   \/* placeholder teal \u2014 adjust *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsMosaicCircle 6s ease-in-out infinite alternate;\n}\n@keyframes bsgsMosaicCircle {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.015))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.025)) scale(1.02); }\n}\n\n.bsgs-mosaic-flower {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.19);\n  width:  calc(var(--bsgs-img-h) * 0.21);\n  height: calc(var(--bsgs-img-h) * 0.21);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsMosaicFlower 6.5s ease-in-out infinite alternate;\n}\n@keyframes bsgsMosaicFlower {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.3),  calc(var(--bsgs-img-h) * 0.02))  rotate(-23deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.27), calc(var(--bsgs-img-h) * -0.04)) rotate(-7deg); }\n}\n\n.bsgs-mosaic-curve {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.005);\n  width:  calc(var(--bsgs-img-h) * 0.45);\n  height: calc(var(--bsgs-img-h) * 0.45);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-mosaic-curve--left  { animation: bsgsMosaicCurveL 6.4s ease-in-out infinite alternate; }\n.bsgs-mosaic-curve--right {\n  animation: bsgsMosaicCurveR 5.3s ease-in-out infinite alternate;\n  animation-delay: -1.3s;\n}\n@keyframes bsgsMosaicCurveL {\n  from { transform: translate(calc(-130% + var(--bsgs-img-h) * 0.125), calc(var(--bsgs-img-h) * -0.375)) rotate(78deg); }\n  to   { transform: translate(calc(-120% + var(--bsgs-img-h) * 0.125), calc(var(--bsgs-img-h) * -0.415)) rotate(84deg); }\n}\n@keyframes bsgsMosaicCurveR {\n  from { transform: translate(calc(30% - var(--bsgs-img-h) * 0.15), calc(var(--bsgs-img-h) * -0.185))  rotate(-58deg) scaleX(-1); }\n  to   { transform: translate(calc(20% - var(--bsgs-img-h) * 0.15), calc(var(--bsgs-img-h) * -0.225))  rotate(-64deg) scaleX(-1); }\n}\n\n.bsgs-mosaic-rings {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.575);\n  width:  calc(var(--bsgs-img-h) * 0.41);\n  height: calc(var(--bsgs-img-h) * 0.41);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsMosaicRings 12s linear infinite;\n}\n@keyframes bsgsMosaicRings {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.075), 0) rotate(0deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.075), 0) rotate(360deg); }\n}\n\n\/* ---------- Majestic \u2014 single centered circle with a sunrise entry ----------\n   Centered behind the model, rises from below the wrap on page load (16s),\n   then settles into a slow breath. *\/\n.bsgs-majestic-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.3);\n  width:  calc(var(--bsgs-img-h) * 1.0);\n  height: calc(var(--bsgs-img-h) * 1.0);\n  background: #a54c96;                   \/* magenta-purple *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation:\n    bsgsMajesticRise  16s cubic-bezier(0.16, 1, 0.3, 1) both,\n    bsgsMajesticBreath 6s ease-in-out 16s infinite alternate;\n}\n@keyframes bsgsMajesticRise {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.85)) scale(1); }\n  to   { transform: translate(-50%, 0)                              scale(1); }\n}\n@keyframes bsgsMajesticBreath {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.015))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.025)) scale(1.02); }\n}\n\n\/* Majestic flanking pair \u2014 majestic1.svg on the left, majestic2.svg on the\n   right. Same placement pattern as the Doors lollipops (tilted, bottoms\n   tucked behind the model, independent motion). *\/\n.bsgs-majestic-item {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.005);\n  width:  calc(var(--bsgs-img-h) * 0.25);\n  height: calc(var(--bsgs-img-h) * 0.25);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-majestic-item--left  { animation: bsgsMajesticItemL 6.4s ease-in-out infinite alternate; }\n.bsgs-majestic-item--right {\n  animation: bsgsMajesticItemR 4.9s ease-in-out infinite alternate;\n  animation-delay: -1.2s;\n}\n@keyframes bsgsMajesticItemL {\n  from { transform: translate(-130%, calc(var(--bsgs-img-h) * -0.419)) rotate(-70deg); }\n  to   { transform: translate(-120%, calc(var(--bsgs-img-h) * -0.459)) rotate(-63deg); }\n}\n@keyframes bsgsMajesticItemR {\n  from { transform: translate(30%, calc(var(--bsgs-img-h) * -0.44))    rotate(70deg); }\n  to   { transform: translate(20%, calc(var(--bsgs-img-h) * -0.48))    rotate(63deg); }\n}\n\n\/* Majestic belts \u2014 majestic3.svg placed left + right, lower on the model\n   than the flanking pair. Left tilts clockwise, right counter-clockwise. *\/\n.bsgs-majestic-belt {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.005);\n  width:  calc(var(--bsgs-img-h) * 0.09);\n  height: calc(var(--bsgs-img-h) * 0.09);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-majestic-belt--left  { animation: bsgsMajesticBeltL 5.8s ease-in-out infinite alternate; }\n.bsgs-majestic-belt--right {\n  animation: bsgsMajesticBeltR 6.7s ease-in-out infinite alternate;\n  animation-delay: -1.5s;\n}\n@keyframes bsgsMajesticBeltL {\n  from { transform: translate(calc(-130% - var(--bsgs-img-h) * 0.294), calc(var(--bsgs-img-h) * 0.126))  rotate(50deg); }\n  to   { transform: translate(calc(-120% - var(--bsgs-img-h) * 0.294), calc(var(--bsgs-img-h) * 0.096)) rotate(56deg); }\n}\n@keyframes bsgsMajesticBeltR {\n  from { transform: translate(calc(30% + var(--bsgs-img-h) * 0.263), calc(var(--bsgs-img-h) * 0.163))   rotate(-50deg); }\n  to   { transform: translate(calc(20% + var(--bsgs-img-h) * 0.263), calc(var(--bsgs-img-h) * 0.133))   rotate(-56deg); }\n}\n\/* Portrait-mobile variants: left belt 40px up, right belt 30px left *\/\n@keyframes bsgsMajesticBeltLMobile {\n  from { transform: translate(calc(-130% - var(--bsgs-img-h) * 0.294), calc(var(--bsgs-img-h) * 0.076)) rotate(50deg); }\n  to   { transform: translate(calc(-120% - var(--bsgs-img-h) * 0.294), calc(var(--bsgs-img-h) * 0.046)) rotate(56deg); }\n}\n@keyframes bsgsMajesticBeltRMobile {\n  from { transform: translate(calc(30% + var(--bsgs-img-h) * 0.2255), calc(var(--bsgs-img-h) * 0.163))  rotate(-50deg); }\n  to   { transform: translate(calc(20% + var(--bsgs-img-h) * 0.2255), calc(var(--bsgs-img-h) * 0.133))  rotate(-56deg); }\n}\n\n\/* ---------- Free \u2014 circle, two flowers, two eyes ----------\n   Decorations anchor from the WRAP BOTTOM (same as the model), so they track\n   the model vertically when viewport height changes. To make that anchoring\n   work, the Free panel's decoration slides are resized to match the model\n   slide (full wrap height, top:0). Sizes are fixed px so nothing scales\n   continuously \u2014 one desktop size, one mobile size. *\/\n.bsgs-frame--sun   .bsgs-panel--0 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--0 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--0 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--1 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--1 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--2 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--2 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--2 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--3 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--3 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--3 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--4 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--4 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--4 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--5 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--5 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--5 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--6 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--6 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--6 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--7 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--7 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--7 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--8 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--8 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--8 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--9 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--9 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--9 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--10 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--10 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--10 .bsgs-slide,\n.bsgs-frame--sun   .bsgs-panel--11 .bsgs-slide,\n.bsgs-frame--heart .bsgs-panel--11 .bsgs-slide,\n.bsgs-frame--alpha .bsgs-panel--11 .bsgs-slide {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--bsgs-wrap-h);\n}\n\n\/* Decoration sizes\/offsets are expressed as fractions of --bsgs-img-h (the\n   same variable the model uses). --bsgs-img-h is min(70vh, 800px) on desktop,\n   min(60vh, ~476px) on mobile, min(75vh, ~378px) on landscape \u2014 so all three\n   breakpoints AND viewport-height scaling are handled in one place.\n   Vertical anchor: bottom of (model bottom + fraction of model height). *\/\n.bsgs-free-circle {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.25);\n  width:  calc(var(--bsgs-img-h) * 0.9);\n  height: calc(var(--bsgs-img-h) * 0.9);\n  background: #f4c29e;         \/* placeholder \u2014 adjust to taste *\/\n  border-radius: 50%;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsFreeCircle 3.5s ease-in-out infinite alternate;\n}\n@keyframes bsgsFreeCircle {\n  from { transform: translate(-50%, calc(var(--bsgs-img-h) * 0.02))  scale(1); }\n  to   { transform: translate(-50%, calc(var(--bsgs-img-h) * -0.05)) scale(1.025); }\n}\n\n.bsgs-free-flower {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.25);\n  width:  calc(var(--bsgs-img-h) * 0.4);\n  height: calc(var(--bsgs-img-h) * 0.4);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-free-flower--left  { animation: bsgsFreeFlowerL 6.8s ease-in-out infinite alternate; }\n.bsgs-free-flower--right {\n  animation: bsgsFreeFlowerR 5.4s ease-in-out infinite alternate;\n  animation-delay: -1.3s;\n}\n\/* X offsets also scale with --bsgs-img-h so each flower stays locked to the\n   same spot on the model regardless of viewport height. *\/\n\/* Left and right flowers use symmetric values (same magnitude, mirrored sign). *\/\n@keyframes bsgsFreeFlowerL {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.15),  calc(var(--bsgs-img-h) * 0.008))  rotate(-20deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.125), calc(var(--bsgs-img-h) * -0.028)) rotate(-10deg); }\n}\n@keyframes bsgsFreeFlowerR {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.25),  calc(var(--bsgs-img-h) * 0.008))  rotate(20deg)  scaleX(-1); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.225), calc(var(--bsgs-img-h) * -0.028)) rotate(10deg)  scaleX(-1); }\n}\n\n.bsgs-free-eye {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.15);\n  width:  calc(var(--bsgs-img-h) * 0.285);\n  height: calc(var(--bsgs-img-h) * 0.285);\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n}\n.bsgs-free-eye--left  { animation: bsgsFreeEyeL 4.5s ease-in-out infinite alternate; }\n.bsgs-free-eye--right {\n  animation: bsgsFreeEyeR 5.2s ease-in-out infinite alternate;\n  animation-delay: -0.8s;\n}\n@keyframes bsgsFreeEyeL {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.28),  calc(var(--bsgs-img-h) * -0.075)) rotate(-4deg); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.27),  calc(var(--bsgs-img-h) * -0.093)) rotate(4deg); }\n}\n@keyframes bsgsFreeEyeR {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.23),  calc(var(--bsgs-img-h) * 0.025)) rotate(4deg)  scaleX(-1); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.22),  calc(var(--bsgs-img-h) * 0.007)) rotate(-4deg)  scaleX(-1); }\n}\n\n\/* ---------- Cherish \u2014 two bird SVGs flying toward each other ----------\n   Synchronised, mirror-image motion \u2014 same duration, no delay, keyframes\n   are left\u2194right reflections of each other. *\/\n.bsgs-bird {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) - var(--bsgs-img-h) * 0.38);\n  width:  calc(var(--bsgs-img-h) * 0.51);\n  height: calc(var(--bsgs-img-h) * 0.51);\n  object-fit: contain;\n  pointer-events: none;\n  user-select: none;\n  z-index: 2;\n  will-change: transform;\n  \/* Pivot at the bottom edge so only the top of each bird swings *\/\n  transform-origin: 50% 100%;\n}\n.bsgs-bird--left  { animation: bsgsBirdL 3s ease-in-out infinite alternate; }\n.bsgs-bird--right { animation: bsgsBirdR 3s ease-in-out infinite alternate; }\n\/* Tops open outward (mirrored) from closed\/upright; bottoms stay fixed. *\/\n@keyframes bsgsBirdL {\n  from { transform: translate(-104%, 0) rotate(0deg); }\n  to   { transform: translate(-104%, 0) rotate(-22deg); }\n}\n@keyframes bsgsBirdR {\n  from { transform: translate(4%, 0)    rotate(0deg); }\n  to   { transform: translate(4%, 0)    rotate(22deg); }\n}\n\n\/* Athens \"pillar\" (Asset-1.svg) \u2014 one-shot entrance: arcs up from behind\n   the ground, flips, and settles at rest (140\u00b0, left of model, shoulder\n   height). `animation-fill-mode: both` holds the final pose forever. *\/\n.bsgs-athens-asset {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.4);\n  width:  calc(var(--bsgs-img-h) * 0.1);\n  height: calc(var(--bsgs-img-h) * 0.1);\n  object-fit: contain;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsAthensBounceOnce 2.2s cubic-bezier(0.18, 1, 0.3, 1) 0.4s both;\n}\n\/* Hiding-behind-bag reveal: starts tucked behind the model (centered, small,\n   near-vertical), slides out to the left with a slight overshoot, settles\n   at rest (140\u00b0). *\/\n\/* Single motion: emerge from behind the bag and settle at the peak pose. *\/\n@keyframes bsgsAthensBounceOnce {\n  0%   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.08), calc(var(--bsgs-img-h) * 0.05)) rotate(100deg) scale(0.7); }\n  100% { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.14), calc(var(--bsgs-img-h) * -0.04)) rotate(148deg) scale(1.08); }\n}\n\n\/* Athens alpha letter \u2014 img-h-relative. *\/\n.bsgs-alpha {\n  position: absolute;\n  left: 50%;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.026);\n  width:  calc(var(--bsgs-img-h) * 0.76);\n  height: auto;\n  pointer-events: none;\n  user-select: none;\n  will-change: transform;\n  animation: bsgsAlphaFloat 7.3s ease-in-out infinite alternate;\n}\n@keyframes bsgsAlphaFloat {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.285), calc(var(--bsgs-img-h) * -0.015)) rotate(-18deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.285), calc(var(--bsgs-img-h) * 0.035))  rotate(-22deg); }\n}\n\n\/* Cloud v2 \u2014 recolored to #a8cfee, fully opaque. Uses the existing SVG as a\n   CSS mask so we can set the fill via `background` regardless of what colors\n   are baked into the SVG file. The translateX uses a CSS variable so the\n   cloud-drift keyframes (which overwrite transform) still work from JS. *\/\n.bsgs-cloud-v2 {\n  position: absolute;\n  top: 32%;\n  left: 0;\n  width: min(18vw, 220px);\n  aspect-ratio: 260 \/ 160;\n  background: #a8cfee;\n  \/* Only the active slide's cloud is visible \u2014 prevents neighbor clouds from\n     peeking into the viewport on very wide screens. Fade matches bg cross-fade. *\/\n  opacity: 0;\n  transition: opacity 0.6s ease;\n  -webkit-mask: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/cloud.svg') no-repeat center \/ contain;\n          mask: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/cloud.svg') no-repeat center \/ contain;\n  pointer-events: none;\n  user-select: none;\n  transform: translateX(170vw);          \/* parked off-screen right until drift starts *\/\n  will-change: transform;\n}\n.bsgs-cloud-v2.bsgs-cloud--drift-left  { animation: bsgsCloudDriftLeft  32s linear infinite; }\n.bsgs-cloud-v2.bsgs-cloud--drift-right { animation: bsgsCloudDriftRight 32s linear infinite; }\n\n\/* ---------- Layer 1.5 \u2014 Back model overlay wheel (BEHIND triangles) ---------- *\/\n.bsgs-frame--model-back { z-index: 6; }\n\n.bsgs-model-back {\n  position: absolute;\n  left: 50%;\n  bottom: 15vh;           \/* same anchor as the other model images *\/\n  transform: translateX(-50%);\n  max-height: 85vh;\n  width: auto;\n  user-select: none;\n  pointer-events: none;\n}\n\n\/* ---------- Static ground (on top of everything except hidden overlays) ---------- *\/\n.bsgs-ground-layer {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  pointer-events: none;\n}\n.bsgs-ground {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 55%;\n  background: #ded6d7;\n  \/* Two quadrilaterals: diagonals from the top corners down to the card's top corners,\n     then straight down the card's sides, leaving a rectangular notch for the card. *\/\n  clip-path: polygon(\n    0 0,\n    calc(50% - var(--bsgs-card-w) \/ 2) calc(100% - var(--bsgs-ground-notch)),\n    calc(50% - var(--bsgs-card-w) \/ 2) 100%,\n    calc(50% + var(--bsgs-card-w) \/ 2) 100%,\n    calc(50% + var(--bsgs-card-w) \/ 2) calc(100% - var(--bsgs-ground-notch)),\n    100% 0,\n    100% 100%,\n    0 100%\n  );\n}\n\n\/* ---------- Layer 3 \u2014 Model wheel (behind card) ---------- *\/\n.bsgs-frame--model { z-index: 7; }\n\n\/* Both the full model (behind card) and the cut-out (in front of card) share\n   the same anchor and size so they register pixel-perfectly on top of each other.\n   Using `height` (not `max-height`) so both images scale proportionally\n   regardless of their natural pixel resolution \u2014 critical when one image\n   is higher-res than the other. *\/\n.bsgs-wrap .bsgs-frame--model .bsgs-model {\n  position: absolute !important;\n  left: 50% !important;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap)) !important;\n  top: auto !important;\n  transform: translateX(-50%) !important;\n  height: var(--bsgs-img-h) !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  width: auto !important;\n  min-width: 0 !important;\n  max-width: none !important;\n  user-select: none;\n  pointer-events: none;\n}\n\n\/* Front cut-out \u2014 rendered as a CSS background to bypass WordPress\n   WebP\/picture-tag plugins that swap srcset and break sizing.\n   Per-slide image set via modifier classes below. *\/\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front {\n  position: absolute !important;\n  left: 50% !important;\n  bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap)) !important;\n  top: auto !important;\n  transform: translateX(-50%) !important;\n  height: var(--bsgs-img-h) !important;\n  width: var(--bsgs-img-h) !important;\n  background-repeat: no-repeat !important;\n  background-position: center bottom !important;\n  background-size: contain !important;\n  user-select: none;\n  pointer-events: none;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--athens {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_athens1_front-2-1_cut.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--cherish {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_cherish_front-model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--click {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_click_model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--doors {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_doors_model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--free {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_free_model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--majestic {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_majestic_mode_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--mosaic {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_mosaic_model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--ocean {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_ocean_model_cutout_new.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--rainbow {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_rainbow_model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--shine {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_shine_model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--wrap {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_wrap_model_cutout.png') !important;\n}\n.bsgs-wrap .bsgs-frame--model-front .bsgs-model-front--zip {\n  background-image: url('https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_zip_model_cutout.png') !important;\n}\n\n\/* ---------- Model overlay wheel (cut-out, in front of card, behind triangles) ---------- *\/\n.bsgs-frame--model-front { z-index: 9; }\n\n\/* ---------- Layer 4 \u2014 Static title card ---------- *\/\n.bsgs-card {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n  width: 400px;\n  height: 200px;\n  background: #459fff;\n  color: #fff;\n  padding: 1em;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  \/* space-evenly distributes equal space above title, between title+button,\n     and below button \u2014 which puts the button center exactly at the midpoint\n     between the title's bottom edge and the card's bottom edge. *\/\n  justify-content: space-evenly;\n  gap: 0;\n  border-radius: 40px 40px 0 0;\n  overflow: hidden;           \/* contain the sliding title + button inside the card *\/\n  z-index: 8;\n  pointer-events: auto;\n}\n.bsgs-card__title {\n  display: block;\n  margin: 20px 0 0;   \/* nudges the title 20px down inside the card *\/\n  font-size: 2em;\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: 0.03em;\n  color: #fff;\n  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n  will-change: transform, opacity;\n}\n.bsgs-card__btn {\n  display: inline-block;\n  padding: 0;\n  background: transparent;\n  color: #fff;\n  font-size: 20px;\n  letter-spacing: 0.12em;\n  font-weight: 400;\n  text-transform: uppercase;\n  text-decoration: none;\n  \/* Hidden by default \u2014 whole card is clickable via .bsgs-card__hit; the btn\n     is a pure visual reveal that fades in on card hover. *\/\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n  will-change: transform, opacity;\n}\n.bsgs-card:hover .bsgs-card__btn,\n.bsgs-card:focus-within .bsgs-card__btn {\n  opacity: 1;\n}\n\/* Full-card invisible link overlay \u2014 catches clicks across the whole card. *\/\n.bsgs-card__hit {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  text-decoration: none;\n  \/* High specificity so Konte\/Elementor can't add underlines *\/\n}\n.bsgs-card__hit:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: -4px;\n}\n\n\/* ---------- Scroll cue (bouncing SVG, bottom-center) ---------- *\/\n.bsgs-scroll-cue {\n  position: absolute;\n  left: 50%;\n  bottom: 0;                 \/* anchor to slider bottom edge (works at every breakpoint vh) *\/\n  width: 40px;\n  height: auto;\n  z-index: 20;\n  pointer-events: none;\n  opacity: 0.85;\n  \/* Transform handles both the horizontal centering and the 50% overlap\n     below the slider edge \u2014 animated in @keyframes so the bounce stays\n     anchored to the overlap position. *\/\n  animation: bsgsScrollBounce 1.6s ease-in-out infinite;\n}\n.bsgs-scroll-cue path { fill: #fff; }\n@keyframes bsgsScrollBounce {\n  0%, 100% { transform: translate(-50%, 50%); }\n  50%      { transform: translate(-50%, calc(50% + 14px)); }\n}\n\n\/* ---------- Arrows ---------- *\/\n.bsgs-arrow {\n  position: absolute;\n  bottom: 7vh;\n  width: 4em;\n  height: 4em;\n  border: 0;\n  background: #fff;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 20;\n  color: #d35066;\n  padding: 0;\n  transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;\n  box-shadow: 0 10px 20px rgba(0,0,0,0.15);\n}\n.bsgs-arrow svg { width: 1.5em; height: 1.5em; fill: currentColor; }\n.bsgs-arrow--prev {\n  right: calc(50% + var(--bsgs-card-w) \/ 2 + 100px);\n  left: auto;\n}\n.bsgs-arrow--next {\n  left: calc(50% + var(--bsgs-card-w) \/ 2 + 100px);\n  right: auto;\n}\n.bsgs-arrow--prev:hover { transform: translateX(-6px); color: #000; }\n.bsgs-arrow--next:hover { transform: translateX(6px); color: #000; }\n.bsgs-arrow:focus-visible { outline: 2px solid #d35066; outline-offset: 4px; }\n\n\/* Small desktop (1025\u20131200px) \u2014 slight scale-down from full desktop *\/\n@media (min-width: 1025px) and (max-width: 1200px) {\n  .bsgs-wrap {\n    \/* Model \u22123% (67.9vh \u2248 70vh \u00d7 0.97). Decorations shrink 3% too. *\/\n    --bsgs-img-h: min(67.9vh, calc(var(--bsgs-card-h) * 3.88));\n  }\n  \/* Flowers 15px lower *\/\n  .bsgs-free-flower {\n    bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.25 - 15px);\n  }\n  \/* Cloud 20% smaller on Free slide *\/\n  .bsgs-frame--cloud .bsgs-panel--4 .bsgs-cloud-v2 {\n    width: min(21.6vw, 264px);\n  }\n}\n\n\/* Tablet \u2014 only adjusts wrap height, everything else inherits desktop *\/\n@media (max-width: 64em) {\n  .bsgs-wrap {\n    --bsgs-wrap-h: 90vh;\n    \/* Model \u22123% on tablet (67.9vh \u2248 70vh \u00d7 0.97). Decorations shrink 3% too\n       since they're all derived from --bsgs-img-h. *\/\n    --bsgs-img-h: min(67.9vh, calc(var(--bsgs-card-h) * 3.88));\n  }\n  \/* Flowers 10px lower on tablet *\/\n  .bsgs-free-flower {\n    bottom: calc(var(--bsgs-card-h) - var(--bsgs-img-overlap) + var(--bsgs-img-h) * 0.25 - 10px);\n  }\n}\n\n\/* Mobile sub-breakpoint: 640-767px wrap (overrides tablet) *\/\n@media (max-width: 767px) {\n  .bsgs-wrap { --bsgs-wrap-h: 92vh; }\n}\n\n\/* Mobile \u2014 card sizing kicks in at 640px and below *\/\n@media (max-width: 40em) {\n  .bsgs-wrap {\n    --bsgs-card-w: 280px;\n    --bsgs-card-h: 140px;\n    \/* Same min() pattern, smaller numbers for mobile.\n       60vh is relative to the FULL viewport (not the 75vh wrap),\n       so on a 800px tall mobile this gives 480px \u2014 comfortably inside the 600px wrap. *\/\n    --bsgs-img-h: min(60vh, calc(var(--bsgs-card-h) * 3.4));\n    --bsgs-img-overlap: 30px;\n    --bsgs-ground-notch: 90px;    \/* inner top corner another 30px down *\/\n  }\n  .bsgs-ground { height: 40%; }\n  \/* Mobile portrait: tall-narrow viewport means rotation pivot is far below\n     visible, which can leave brief gaps mid-rotation regardless of slide bleed.\n     Two-part mitigation:\n     a) Generous bleed on BG slide.\n     b) Wrap background is sky-blue so any residual rotation gap blends with\n        the blue sky at the top of both the Athens and Cherish BG images. *\/\n  .bsgs-wrap { background: linear-gradient(to bottom, #5e9bd9 0%, #9ec6f2 100%); }\n  .bsgs-frame--bg .bsgs-slide {\n    top: -60vh;\n    left: -50%;\n    width: 200%;\n    height: 220vh;\n  }\n  .bsgs-card { width: 280px; height: 140px; padding: 0.75em; gap: 0; }\n  .bsgs-card__title { font-size: 1.2em; }\n  .bsgs-card__btn { letter-spacing: 0.12em; padding: 0; }\n  .bsgs-arrow { width: 2.5em; height: 2.5em; bottom: 2vh; }\n  \/* Reset the desktop calc() positioning so both arrows pin to the viewport edges *\/\n  .bsgs-arrow--prev { left: 3vw; right: auto; }\n  .bsgs-arrow--next { right: 3vw; left: auto; }\n  \/* Cherish heart \u2014 bumped up on mobile (was min(180vh, 180vw) \u2014 now a\n     bigger img-h fraction so it scales with the model at this breakpoint). *\/\n  .bsgs-cherish-heart { width: calc(var(--bsgs-img-h) * 1.5); height: calc(var(--bsgs-img-h) * 1.5); }\n  \/* Athens sun scales via --bsgs-img-h already \u2014 no override needed. *\/\n  \/* Athens cloud \u2014 bigger on mobile (\u224850% larger than current) *\/\n  .bsgs-frame--cloud .bsgs-panel--0 .bsgs-cloud-v2 { width: min(40vw, 495px); }\n  \/* Cherish cloud \u2014 100% bigger (double) on mobile *\/\n  .bsgs-frame--cloud .bsgs-panel--1 .bsgs-cloud-v2 { width: min(36vw, 440px); }\n  \/* Click cloud \u2014 100% bigger (double) on mobile, 50px up from default *\/\n  .bsgs-frame--cloud .bsgs-panel--2 .bsgs-cloud-v2 { width: min(43.2vw, 538px); top: calc(32% - 50px); }\n  \/* Click decorations scale via --bsgs-img-h \u2014 no other overrides needed *\/\n  \/* Doors decorations scale via --bsgs-img-h \u2014 no overrides needed *\/\n  \/* Majestic belts \u2014 on portrait mobile use adjusted keyframes *\/\n  .bsgs-majestic-belt--left  { animation-name: bsgsMajesticBeltLMobile; }\n  .bsgs-majestic-belt--right { animation-name: bsgsMajesticBeltRMobile; }\n  \/* Free decorations scale with --bsgs-img-h, which already drops on this\n     breakpoint (card-h 140 \u2192 img-h caps at 476px). No per-decoration override\n     needed. *\/\n}\n\n\/* Mobile sub-breakpoint: 580-639px \u2014 wrap 85vh, image 10% bigger (card unchanged) *\/\n@media (max-width: 639px) {\n  .bsgs-wrap {\n    --bsgs-wrap-h: 85vh;\n    --bsgs-img-h: min(66vh, calc(var(--bsgs-card-h) * 3.74));   \/* 60vh*1.1, 3.4*1.1 *\/\n  }\n}\n\n\/* Mobile sub-breakpoint: 320-579px \u2014 wrap 87vh, image 10% bigger (card unchanged) *\/\n@media (max-width: 579px) {\n  .bsgs-wrap {\n    --bsgs-wrap-h: 87vh;\n    --bsgs-img-h: min(66vh, calc(var(--bsgs-card-h) * 3.74));\n  }\n}\n\n\/* Landscape phones \u2014 viewport is wide but very short.\n   Catches ALL landscape phones (even iPhone Max\/Plus at 900px+ width,\n   which don't hit the width-based mobile breakpoint).\n   Card ~30% smaller than desktop; image overlap bumped so the bag bottom\n   dips further into the card (moves the image visually lower). *\/\n@media (orientation: landscape) and (max-height: 500px) {\n  .bsgs-wrap {\n    --bsgs-wrap-h: 100vh;\n    --bsgs-card-w: 252px;         \/* 280 * 0.9 \u2014 10% smaller *\/\n    --bsgs-card-h: 126px;         \/* 140 * 0.9 *\/\n    --bsgs-img-h: min(75vh, calc(var(--bsgs-card-h) * 3));\n    --bsgs-img-overlap: 45px;     \/* deeper dip = image sits lower *\/\n    --bsgs-ground-notch: 75px;    \/* inner top corner another 15px down from portrait *\/\n  }\n  .bsgs-card { width: 252px; height: 126px; padding: 0.6em; gap: 0; }\n  .bsgs-card__title { font-size: 1.1em; }\n  .bsgs-card__btn { letter-spacing: 0.12em; padding: 0; }\n  .bsgs-arrow { width: 2.25em; height: 2.25em; bottom: 2vh; }\n  \/* Arrows hug the card's sides on landscape (same pattern as desktop) instead of the viewport edges *\/\n  .bsgs-arrow--prev { right: calc(50% + var(--bsgs-card-w) \/ 2 + 16px); left: auto; }\n  .bsgs-arrow--next { left:  calc(50% + var(--bsgs-card-w) \/ 2 + 16px); right: auto; }\n  .bsgs-ground { height: 45%; }\n  \/* Cherish birds are img-h-relative now \u2014 no landscape override needed. *\/\n  \/* Free decorations derive from --bsgs-img-h (which caps at ~378px here), so\n     landscape gets the correct smaller sizes automatically. *\/\n  \/* Majestic model uses the same size as every other slider on landscape. *\/\n  \/* Ocean chains \u2014 20% bigger on landscape, right rotated -25\u00b0 extra, left shifted 70px down *\/\n  .bsgs-ocean-chain { width: calc(var(--bsgs-img-h) * 0.072); }\n  .bsgs-ocean-chain--right { animation-name: bsgsOceanChainRLandscape; }\n  .bsgs-ocean-chain--left  { animation-name: bsgsOceanChainLLandscape; }\n  \/* Majestic right belt \u2014 rotated counter-clockwise 10\u00b0 on landscape *\/\n  .bsgs-majestic-belt--right { animation-name: bsgsMajesticBeltRLandscape; }\n}\n@keyframes bsgsOceanChainRLandscape {\n  from { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.325), calc(var(--bsgs-img-h) * 0.57)) rotate(-59deg); }\n  to   { transform: translate(calc(-50% + var(--bsgs-img-h) * 0.345), calc(var(--bsgs-img-h) * 0.54)) rotate(-51deg); }\n}\n@keyframes bsgsOceanChainLLandscape {\n  from { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.3875), calc(var(--bsgs-img-h) * 0.5075)) rotate(61deg) scaleX(-1); }\n  to   { transform: translate(calc(-50% - var(--bsgs-img-h) * 0.4075), calc(var(--bsgs-img-h) * 0.4775)) rotate(69deg) scaleX(-1); }\n}\n@keyframes bsgsMajesticBeltRLandscape {\n  from { transform: translate(calc(30% + var(--bsgs-img-h) * 0.263), calc(var(--bsgs-img-h) * 0.163))  rotate(-60deg); }\n  to   { transform: translate(calc(20% + var(--bsgs-img-h) * 0.263), calc(var(--bsgs-img-h) * 0.133))  rotate(-66deg); }\n}\n<\/style>\n\n<div class=\"bsgs-outer\">\n<!-- Preloader: full-screen overlay shown on first paint, fades once all\n     slider <img> children have loaded (or after a 7s safety timeout). -->\n<div class=\"bsgs-preloader\" data-bsgs-preloader aria-hidden=\"true\">\n  <div class=\"bsgs-preloader__spinner\"><\/div>\n<\/div>\n\n<div class=\"bsgs-wrap\" data-bg=\"0\">\n\n\n  <!-- LAYER 0: Cross-fade BG layers (one per slide). Sit behind the BG wheel. -->\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--0\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--1\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--2\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--3\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--4\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--5\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--6\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--7\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--8\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--9\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--10\"><\/div>\n  <div class=\"bsgs-bg-layer bsgs-bg-layer--11\"><\/div>\n\n  <!-- LAYER 1: BG wheel -->\n  <div class=\"bsgs-frame bsgs-frame--bg\">\n    <div class=\"bsgs-wheel\" data-wheel=\"bg\">\n      <div class=\"bsgs-panel bsgs-panel--0\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-bg\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- DECORATION LAYER 1.2: Sun circle wheel (Athens only for now) -->\n  <div class=\"bsgs-frame bsgs-frame--sun\">\n    <div class=\"bsgs-wheel\" data-wheel=\"sun\">\n      <div class=\"bsgs-panel bsgs-panel--0\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-sun\"><\/div>\n        <img decoding=\"async\" class=\"bsgs-athens-asset no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/Asset-1.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-click-circle\" aria-hidden=\"true\"><\/div>\n        <img decoding=\"async\" class=\"bsgs-click-chain no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/click.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-doors-circle\" aria-hidden=\"true\"><\/div>\n        <div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-free-circle\" aria-hidden=\"true\"><\/div>\n        <img decoding=\"async\" class=\"bsgs-free-eye bsgs-free-eye--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/free2.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-free-eye bsgs-free-eye--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/free2.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-majestic-circle\" aria-hidden=\"true\"><\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-mosaic-circle\" aria-hidden=\"true\"><\/div>\n        <div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-ocean-circle\" aria-hidden=\"true\"><\/div>\n        <div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-shine-circle\" aria-hidden=\"true\"><\/div>\n        <div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-wrap-circle\" aria-hidden=\"true\"><\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\"><div class=\"bsgs-slide\"><\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- DECORATION LAYER 1.3: Heart wheel \u2014 small Athens heart on panels 0\/2,\n       huge Cherish heart on panels 1\/3. -->\n  <div class=\"bsgs-frame bsgs-frame--heart\">\n    <div class=\"bsgs-wheel\" data-wheel=\"heart\">\n      <div class=\"bsgs-panel bsgs-panel--0\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-cherish-heart\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M50,88 C 18,62 8,42 22,24 C 36,8 50,22 50,34 C 50,22 64,8 78,24 C 92,42 82,62 50,88 Z\"\/><\/svg>\n        <\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-doors-heart\" aria-hidden=\"true\">\n          <img decoding=\"async\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/doors.svg\" alt=\"\" aria-hidden=\"true\" loading=\"eager\" data-no-lazy=\"1\" class=\"no-lazyload skip-lazy\">\n        <\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-free-flower bsgs-free-flower--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/free.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-mosaic-rings no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/mosaic3.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-ocean-heart-rope no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/ocean1.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-rainbow-arc bsgs-rainbow-arc--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/rainbow2.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-rainbow-arc bsgs-rainbow-arc--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/rainbow2.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-shine-heart no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/shine2.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-zip-circle\" aria-hidden=\"true\"><\/div>\n      <\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- DECORATION LAYER 1.4: Alpha\/bird wheel \u2014 alpha letter on Athens (0\/2),\n       two birds flying toward each other on Cherish (1\/3). -->\n  <div class=\"bsgs-frame bsgs-frame--alpha\">\n    <div class=\"bsgs-wheel\" data-wheel=\"alpha\">\n      <div class=\"bsgs-panel bsgs-panel--0\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-alpha no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/alpha.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-heart no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/heart.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-bird bsgs-bird--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/cherish1.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-bird bsgs-bird--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/cherish2.svg\" alt=\"\" aria-hidden=\"true\">\n        <div class=\"bsgs-heart-blue\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M50,88 C 18,62 8,42 22,24 C 36,8 50,22 50,34 C 50,22 64,8 78,24 C 92,42 82,62 50,88 Z\"\/><\/svg>\n        <\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\"><div class=\"bsgs-slide\">\n        <div class=\"bsgs-click-heart\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M50,88 C 18,62 8,42 22,24 C 36,8 50,22 50,34 C 50,22 64,8 78,24 C 92,42 82,62 50,88 Z\"\/><\/svg>\n        <\/div>\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-door-mirror bsgs-door-mirror--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/doors2.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-door-mirror bsgs-door-mirror--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/doors2.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-free-flower bsgs-free-flower--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/free.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-majestic-item bsgs-majestic-item--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/majestic1.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-majestic-item bsgs-majestic-item--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/majestic2.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-majestic-belt bsgs-majestic-belt--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/majestic3.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-majestic-belt bsgs-majestic-belt--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/majestic3.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-heart no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/heart.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-mosaic-flower no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/mosaic1.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-mosaic-curve bsgs-mosaic-curve--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/mosaic2.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-mosaic-curve bsgs-mosaic-curve--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/mosaic2.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-ocean-chain bsgs-ocean-chain--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/ocean2.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-ocean-chain bsgs-ocean-chain--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/ocean2.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-ocean-boat  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/ocean3.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-rainbow-heart no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/heart.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-shine-curve bsgs-shine-curve--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/shine1.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-shine-curve bsgs-shine-curve--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/shine1.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-wrap-keys bsgs-wrap-keys--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/WRAP1.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-wrap-keys bsgs-wrap-keys--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/WRAP2.svg\" alt=\"\" aria-hidden=\"true\">\n      <\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\"><div class=\"bsgs-slide\">\n        <img decoding=\"async\" class=\"bsgs-zip-belt bsgs-zip-belt--left  no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/zip1.svg\" alt=\"\" aria-hidden=\"true\">\n        <img decoding=\"async\" class=\"bsgs-zip-belt bsgs-zip-belt--right no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/zip2.svg\" alt=\"\" aria-hidden=\"true\">\n        <div class=\"bsgs-heart-pink\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M50,88 C 18,62 8,42 22,24 C 36,8 50,22 50,34 C 50,22 64,8 78,24 C 92,42 82,62 50,88 Z\"\/><\/svg>\n        <\/div>\n      <\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- DECORATION LAYER 1.5: Cloud wheel \u2014 #a8cfee opaque, now on top of SVG decorations -->\n  <div class=\"bsgs-frame bsgs-frame--cloud\">\n    <div class=\"bsgs-wheel\" data-wheel=\"cloud\">\n      <div class=\"bsgs-panel bsgs-panel--0\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\"><div class=\"bsgs-slide\"><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\"><div class=\"bsgs-slide\"><div class=\"bsgs-cloud-v2\" aria-hidden=\"true\"><\/div><\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- LAYER 1.5: Back overlay wheel (BEHIND triangles) \u2014 drop legs\/lower cut-out here -->\n  <div class=\"bsgs-frame bsgs-frame--model-back\">\n    <div class=\"bsgs-wheel\" data-wheel=\"model-back\">\n      <div class=\"bsgs-panel bsgs-panel--0\">\n        <div class=\"bsgs-slide\">\n          <!-- <img decoding=\"async\" class=\"bsgs-model-back\" src=\"ATHENS_LEGS_CUT.png\" alt=\"\"> -->\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\">\n        <div class=\"bsgs-slide\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- LAYER 2: Static ground triangles -->\n  <div class=\"bsgs-ground-layer\">\n    <div class=\"bsgs-ground\"><\/div>\n  <\/div>\n\n  <!-- LAYER 3: Model wheel (bags above the triangles) -->\n  <div class=\"bsgs-frame bsgs-frame--model\">\n    <div class=\"bsgs-wheel\" data-wheel=\"model\">\n      <div class=\"bsgs-panel bsgs-panel--0\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--athens no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/08\/bag_athens1_front-2-1.png\" alt=\"Athens at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--cherish no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_cherish_front-model.png\" alt=\"Cherish at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--click no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_click_model.png\" alt=\"Click at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--doors no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_doors_model.png\" alt=\"Doors at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--free no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_free_model.png\" alt=\"Free at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--majestic no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_majestic_model.png\" alt=\"Majestic at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--mosaic no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_mosaic_model.png\" alt=\"Mosaic at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--ocean no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_ocean_model_new.png\" alt=\"Ocean at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--rainbow no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_rainbow_model.png\" alt=\"Rainbow at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--shine no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_shine_model.png\" alt=\"Shine at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--wrap no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_wrap_model.png\" alt=\"Wrap at Heart\">\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\">\n        <div class=\"bsgs-slide\">\n          <img decoding=\"async\" class=\"bsgs-model bsgs-model--zip no-lazyload skip-lazy\" loading=\"eager\" data-no-lazy=\"1\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/bag_zip_model.png\" alt=\"Zip at Heart\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- LAYER 4: Static title card -->\n  <div class=\"bsgs-card\">\n    <a class=\"bsgs-card__hit\" data-link-hit href=\"https:\/\/atheart.gr\/shop\/bags\/athens-at-heart\/\" aria-label=\"View more\"><\/a>\n    <span class=\"bsgs-card__title\" data-title>Athens at Heart<\/span>\n    <a class=\"bsgs-card__btn\" data-link href=\"https:\/\/atheart.gr\/shop\/bags\/athens-at-heart\/\" tabindex=\"-1\" aria-hidden=\"true\">View More<\/a>\n  <\/div>\n\n  <!-- LAYER 5: Model overlay wheel (bag cut-out IN FRONT of card) -->\n  <div class=\"bsgs-frame bsgs-frame--model-front\">\n    <div class=\"bsgs-wheel\" data-wheel=\"model-front\">\n      <div class=\"bsgs-panel bsgs-panel--0\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--athens\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--1\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--cherish\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--2\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--click\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--3\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--doors\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--4\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--free\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--5\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--majestic\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--6\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--mosaic\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--7\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--ocean\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--8\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--rainbow\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--9\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--shine\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--10\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--wrap\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"bsgs-panel bsgs-panel--11\">\n        <div class=\"bsgs-slide\">\n          <div class=\"bsgs-model-front bsgs-model-front--zip\" aria-hidden=\"true\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Arrows -->\n  <button class=\"bsgs-arrow bsgs-arrow--prev\" type=\"button\" aria-label=\"Previous slide\">\n    <svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\n  <\/button>\n  <button class=\"bsgs-arrow bsgs-arrow--next\" type=\"button\" aria-label=\"Next slide\">\n    <svg viewBox=\"0 0 24 24\"><path d=\"M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z\"\/><\/svg>\n  <\/button>\n<\/div>\n\n<!-- Scroll cue \u2014 bouncing SVG, straddles the wrap's bottom edge (50% in, 50% out). -->\n<svg class=\"bsgs-scroll-cue\" viewBox=\"0 0 208.339 408.282\" aria-hidden=\"true\" focusable=\"false\">\n  <path d=\"M199.231,179.44c.231-.244.45-.517.65-.828,12.513-19.467-1.887-43.224-12.86-59.836-4.816-7.291-10.026-14.33-14.348-21.937-4.527-7.969-7.696-16.38-9.864-25.196.405-.377.769-.855,1.068-1.457,7.297-14.685,14.678-31.364,7.815-47.651-7.211-17.115-26.306-18.643-42.493-20.461C108.849-.21,88.291-.612,67.868.891c-15.958,1.174-33.17,3.691-37.306,21.946-2.926,12.913-3.182,40.429,13.937,42.883,1.514,5.151-2.317,10.99-5.151,15.143-3.959,5.801-8.427,11.214-12.263,17.112-7.01,10.781-12.858,22.275-17.567,34.239C-.117,156.692-3.444,183.428,4.273,208.911c5.948,19.642,17.662,37.005,33.377,49.97,1.253,41.489,4.197,83.516,11.196,124.465,1.442,8.438,4.433,16.849,11.84,21.825,6.479,4.352,14.672,4.147,20.83-.67,7.215-5.643,9.181-14.58,9.822-23.267.766-10.375.976-20.827,1.318-31.224.712-21.694,1.007-43.398.953-65.104,4.546,4.924,10.825,8.196,17.748,8.618,11.924.728,23.225-7.293,26.884-18.547.984-3.025,1.447-6.131,1.518-9.271,7.445,3.876,16.352,4.745,24.385,1.619,10.828-4.213,18.331-14.787,18.95-26.346.133-2.485-.046-4.957-.462-7.406,11.89,1.708,22.676-7.294,25.089-19.64,2.313-11.833-2.168-23.986-8.49-34.494ZM39.368,34.432c.075-7.316,1.06-15.648,8.052-19.642,7.228-4.129,17.292-3.751,25.314-4.222,9.734-.572,19.494-.713,29.24-.424,9.747.289,19.481,1.008,29.164,2.156,8.229.976,18.713,1.395,25.649,6.571,13.719,10.238,6.517,29.437.285,42.522-.179-.102-.367-.198-.572-.286-33.947-14.545-72.242-16.595-107.38-5.125-.387-.075-.802-.111-1.252-.092-9.592.394-8.564-15.132-8.499-21.457ZM83.154,332.253c-.213,9.208-.496,18.415-.848,27.619-.331,8.654-.006,17.772-1.542,26.31-1.268,7.044-7.212,16.144-15.084,10.284-6.544-4.871-7.074-14.691-8.137-22.097-2.619-18.251-4.715-36.578-6.335-54.945-1.557-17.655-2.645-35.346-3.305-53.055,9.078,5.835,19.907,11.245,30.6,12.658,1.76.232,3.46.247,5.098.101.098,17.71-.038,35.42-.448,53.126ZM86.413,268.43c-4.827,2.495-11.391-.202-16.062-1.94-5.551-2.065-10.879-4.735-15.925-7.833-20.151-12.372-34.965-32.08-41.231-54.885-6.89-25.076-2.045-50.898,8.228-74.336,5.68-12.96,12.918-25.229,21.391-36.555,6.047-8.084,13.527-17.929,11.709-28.121,31.714-9.63,66.339-8.125,96.928,4.981.248.106.494.186.739.253,3.789,18.166,12.207,33.292,22.596,48.497,5.104,7.469,9.863,15.088,13.973,23.157,4.485,8.805,8.128,19.235,4.232,28.584-.483-.643-.967-1.278-1.451-1.898-9.096-11.659-23.36-26.199-39.447-25.418-12.573.61-19.317,9.785-19.64,20.305-8.464-2.165-18.057.9-24.033,7.995-3.674,4.361-6.282,9.736-6.416,15.453-3.595-2.934-7.607-5.14-11.805-5.99,14.198-21.396,19.261-47.708,16.235-74.101-.724-6.32-10.733-6.393-10,0,1.876,16.363,1.037,32.924-4.314,48.597-3.778,11.068-9.83,20.952-17.542,29.497-.463.373-.819.771-1.081,1.185-2.861,3.063-5.935,5.95-9.202,8.646-.299.247-.552.504-.766.769-6.28,6.261-5.129,16.02.704,22.709,3.494,4.007,8.241,6.556,12.277,9.935,4.341,3.634,7.856,8.049,10.503,13.045,3.564,6.729,8.739,22.641-.599,27.469ZM121.57,280.983c-9.575,5.864-20.942.708-24.39-9.268,1.823-2.451,3.128-5.434,3.761-8.865,2.16-11.715-2.569-24.277-9.538-33.572-3.869-5.159-8.512-9.133-13.692-12.898-2.461-1.789-5.26-3.642-6.999-6.214-1.287-1.903-2.718-6.066-.356-7.81.168-.124.324-.255.471-.389.182-.118.363-.246.541-.393,3.722-3.072,7.133-6.359,10.256-9.826.037-.028.076-.05.113-.079,10.773-8.345,22.608,12.425,26.866,19.261,7.207,11.573,13.133,23.928,17.49,36.851,3.644,10.808,7.238,26-4.521,33.202ZM164.05,256.219c-8.041,5.248-18.528,3.303-25.067-3.361-.323-.329-.66-.592-1.003-.807-1.677-6.527-4.278-12.899-6.679-18.681-4.12-9.918-9.012-19.584-14.776-28.676-2.627-7.488-6.84-16.329-2.723-23.796,4.322-7.838,14.545-11.663,21.379-4.92.363.656.809,1.149,1.309,1.498,6.526,7.922,12.871,15.995,18.762,24.405,6.148,8.777,12.717,18.26,16.156,28.493,3.212,9.557,1.58,20.013-7.357,25.846ZM181.73,223.192c-.831-.376-1.646-.516-2.417-.483-2.96-6.942-7.186-13.521-11.048-19.424-7.51-11.48-15.995-22.323-24.717-32.903-1.951-4.447-2.267-10.99,1.466-14.699,3.661-3.637,9.826-3.237,14.319-1.668,10.213,3.566,19.162,13.406,25.472,21.859,6.319,8.464,12.777,19.151,13.487,29.928.563,8.53-5.775,22.27-16.563,17.391Z\"\/>\n<\/svg>\n<\/div><!-- \/.bsgs-outer -->\n\n<script>\nwindow.addEventListener('DOMContentLoaded', function () {\n  if (!document.getElementById('hide-header')) { window.onscroll = null; }\n});\n<\/script>\n\n<script>\n(function () {\n  var wrap = document.querySelector('.bsgs-wrap');\n  if (!wrap || wrap.dataset.bsgsInit) return;\n  wrap.dataset.bsgsInit = '1';\n\n  var bgWheel = wrap.querySelector('[data-wheel=\"bg\"]');\n  var sunWheel = wrap.querySelector('[data-wheel=\"sun\"]');\n  var heartWheel = wrap.querySelector('[data-wheel=\"heart\"]');\n  var alphaWheel = wrap.querySelector('[data-wheel=\"alpha\"]');\n  var cloudWheel = wrap.querySelector('[data-wheel=\"cloud\"]');\n  var modelWheel = wrap.querySelector('[data-wheel=\"model\"]');\n  var modelBackWheel = wrap.querySelector('[data-wheel=\"model-back\"]');\n  var modelFrontWheel = wrap.querySelector('[data-wheel=\"model-front\"]');\n  var modelFrontFrame = wrap.querySelector('.bsgs-frame--model-front');\n  var prev = wrap.querySelector('.bsgs-arrow--prev');\n  var next = wrap.querySelector('.bsgs-arrow--next');\n  var cardTitle = wrap.querySelector('[data-title]');\n  var cardLink = wrap.querySelector('[data-link]');\n  var cardHit = wrap.querySelector('[data-link-hit]');\n  var cardEl = wrap.querySelector('.bsgs-card');\n\n  var titles = ['Athens at Heart', 'Cherish at Heart', 'Click at Heart', 'Doors at Heart', 'Free at Heart', 'Majestic at Heart', 'Mosaic at Heart', 'Ocean at Heart', 'Rainbow at Heart', 'Shine at Heart', 'Wrap at Heart', 'Zip at Heart'];\n  var urls = [\n    'https:\/\/atheart.gr\/shop\/bags\/athens-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/cherish-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/click-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/doors-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/free-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/majestic-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/mosaic-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/ocean-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/rainbow-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/shine-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/wrap-at-heart\/',\n    'https:\/\/atheart.gr\/shop\/bags\/zip-at-heart\/'\n  ];\n  var count = titles.length;\n\n  var rotation = 0;\n  var current = 0;\n  var isAnimating = false;\n\n  function driftClouds(dir) {\n    \/\/ dir: 'left' = move right\u2192left ; 'right' = move left\u2192right\n    var clouds = wrap.querySelectorAll('.bsgs-cloud, .bsgs-cloud-v2');\n    for (var i = 0; i < clouds.length; i++) {\n      var c = clouds[i];\n      c.classList.remove('bsgs-cloud--drift-left', 'bsgs-cloud--drift-right');\n      \/\/ force reflow so the animation restarts\n      void c.offsetWidth;\n      c.classList.add('bsgs-cloud--drift-' + dir);\n    }\n  }\n\n  function rotate(direction) {\n    if (isAnimating) return;\n    isAnimating = true;\n\n    rotation += direction * -30;\n    var t = 'rotate(' + rotation + 'deg)';\n    bgWheel.style.transform = t;\n    if (sunWheel) sunWheel.style.transform = t;\n    if (heartWheel) heartWheel.style.transform = t;\n    if (alphaWheel) alphaWheel.style.transform = t;\n    if (cloudWheel) cloudWheel.style.transform = t;\n    modelWheel.style.transform = t;\n    if (modelBackWheel) modelBackWheel.style.transform = t;\n    if (modelFrontWheel) modelFrontWheel.style.transform = t;\n    current = (current + direction + count) % count;\n    wrap.setAttribute('data-bg', String(current));\n    if (cardHit) cardHit.setAttribute('href', urls[current]);\n\n    \/* Retrigger the Athens pillar reveal whenever Athens (panel 0) is active *\/\n    if (current === 0) {\n      var pillar = wrap.querySelector('.bsgs-athens-asset');\n      if (pillar) {\n        pillar.style.animation = 'none';\n        void pillar.offsetWidth;   \/* force reflow so the animation restarts *\/\n        pillar.style.animation = '';\n      }\n    }\n    \/* Retrigger the Majestic circle sunrise whenever panel 5 is active *\/\n    if (current === 5) {\n      var majestic = wrap.querySelector('.bsgs-majestic-circle');\n      if (majestic) {\n        majestic.style.animation = 'none';\n        void majestic.offsetWidth;\n        majestic.style.animation = '';\n      }\n    }\n    \/* Retrigger the Ocean circle sunrise whenever panel 7 is active *\/\n    if (current === 7) {\n      var ocean = wrap.querySelector('.bsgs-ocean-circle');\n      if (ocean) {\n        ocean.style.animation = 'none';\n        void ocean.offsetWidth;\n        ocean.style.animation = '';\n      }\n    }\n    \/* Retrigger the Wrap circle sunrise whenever panel 10 is active *\/\n    if (current === 10) {\n      var wrapC = wrap.querySelector('.bsgs-wrap-circle');\n      if (wrapC) {\n        wrapC.style.animation = 'none';\n        void wrapC.offsetWidth;\n        wrapC.style.animation = '';\n      }\n    }\n    \/* Retrigger the Zip circle sunrise whenever panel 11 is active *\/\n    if (current === 11) {\n      var zipC = wrap.querySelector('.bsgs-zip-circle');\n      if (zipC) {\n        zipC.style.animation = 'none';\n        void zipC.offsetWidth;\n        zipC.style.animation = '';\n      }\n    }\n\n    \/\/ Slide card content matching rotation direction \u2014 no fade, opacity stays at 1.\n    \/\/ Title leads; button trails by `stagger` ms (GSAP-style staggered timeline).\n    \/\/ direction > 0 (next): old exits LEFT past the card edge, new enters FROM RIGHT.\n    \/\/ direction < 0 (prev): old exits RIGHT past the card edge, new enters FROM LEFT.\n    \/\/ Slide distance = full card width so content fully disappears behind overflow:hidden\n    \/\/ before the new content appears from the opposite edge.\n    var cardW = (cardEl ? cardEl.clientWidth : 400) + 40;   \/* +40px safety buffer *\/\n    var stagger = 110;   \/* ms \u2014 button follows the title *\/\n    var exitX  = (-direction * cardW) + 'px';\n    var enterX = ( direction * cardW) + 'px';\n\n    \/\/ Title exits immediately\n    cardTitle.style.transform = 'translateX(' + exitX + ')';\n\n    \/\/ Button exits slightly after the title\n    if (cardLink) {\n      setTimeout(function () {\n        cardLink.style.transform = 'translateX(' + exitX + ')';\n      }, stagger);\n    }\n\n    \/\/ Helper: swap content and animate element back in from enterX\n    function swapAndEnter(el, newText, newHref) {\n      if (typeof newText === 'string') el.textContent = newText;\n      if (newHref) el.setAttribute('href', newHref);\n      el.style.transition = 'none';\n      el.style.transform = 'translateX(' + enterX + ')';\n      void el.offsetWidth;           \/* reflow so the snap doesn't animate *\/\n      el.style.transition = '';\n      el.style.transform = 'translateX(0)';\n    }\n\n    \/\/ Title enters right when its exit completes (350ms == CSS transition duration)\n    setTimeout(function () {\n      swapAndEnter(cardTitle, titles[current]);\n    }, 350);\n\n    \/\/ Button enters stagger ms later (its exit also took 350ms but started `stagger` ms late)\n    if (cardLink) {\n      setTimeout(function () {\n        swapAndEnter(cardLink, null, urls[current]);\n      }, 350 + stagger);\n    }\n\n    setTimeout(function () { isAnimating = false; }, 1450);\n  }\n\n  prev.addEventListener('click', function () { rotate(-1); });\n  next.addEventListener('click', function () { rotate(1); });\n\n  document.addEventListener('keydown', function (e) {\n    if (e.key === 'ArrowLeft') rotate(-1);\n    else if (e.key === 'ArrowRight') rotate(1);\n  });\n\n  \/* ----- Swipe \/ drag support (Pointer Events: works for mouse, touch, pen) -----\n     Threshold-based: only commits a slide change if the horizontal distance\n     beats SWIPE_THRESHOLD AND beats the vertical distance (so a vertical\n     scroll\/swipe doesn't accidentally flip the slider). Clicks on the arrows\n     and the card link are ignored so they keep working as before. *\/\n  var SWIPE_THRESHOLD = 50;\n  var swipeStartX = 0, swipeStartY = 0;\n  var swipeActive = false;\n  var swipePointerId = null;\n\n  wrap.addEventListener('pointerdown', function (e) {\n    \/* Don't start a swipe from the arrows or the card hit-link *\/\n    if (e.target.closest('.bsgs-arrow') || e.target.closest('.bsgs-card__hit') || e.target.closest('.bsgs-card__btn')) return;\n    \/* Only primary mouse button *\/\n    if (e.pointerType === 'mouse' && e.button !== 0) return;\n    swipeStartX = e.clientX;\n    swipeStartY = e.clientY;\n    swipeActive = true;\n    swipePointerId = e.pointerId;\n    wrap.style.cursor = 'grabbing';\n  });\n\n  function endSwipe(e) {\n    if (!swipeActive || (swipePointerId !== null && e.pointerId !== swipePointerId)) return;\n    swipeActive = false;\n    swipePointerId = null;\n    wrap.style.cursor = '';\n    var dx = e.clientX - swipeStartX;\n    var dy = e.clientY - swipeStartY;\n    if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > SWIPE_THRESHOLD) {\n      \/* Swipe right \u2192 previous slide; swipe left \u2192 next slide *\/\n      rotate(dx > 0 ? -1 : 1);\n    }\n  }\n  wrap.addEventListener('pointerup', endSwipe);\n  wrap.addEventListener('pointercancel', function () {\n    swipeActive = false;\n    swipePointerId = null;\n    wrap.style.cursor = '';\n  });\n  \/* Prevent ghost image \/ native drag behaviour on images during swipe *\/\n  wrap.addEventListener('dragstart', function (e) { e.preventDefault(); });\n\n  \/* ----- Auto-rotate -----\n     Advances to the next slide on a timer. Pauses on hover, when the tab\n     is hidden, and when the user is mid-swipe. Resets the countdown after\n     any manual rotate (arrow click, key press, swipe) so the next auto-flip\n     happens AUTO_INTERVAL ms after the user's last action \u2014 never on top\n     of it. *\/\n  var AUTO_INTERVAL = 3500;   \/* 3.5s per slide \u2014 adjust to taste *\/\n  var autoTimer = null;\n  function startAuto() {\n    if (autoTimer || document.hidden) return;\n    autoTimer = setInterval(function () { rotate(1); }, AUTO_INTERVAL);\n  }\n  function stopAuto() {\n    if (autoTimer) { clearInterval(autoTimer); autoTimer = null; }\n  }\n  function restartAuto() { stopAuto(); startAuto(); }\n\n  \/* Pause when tab is hidden (saves battery and keeps slides in sync) *\/\n  document.addEventListener('visibilitychange', function () {\n    if (document.hidden) stopAuto();\n    else startAuto();\n  });\n  \/* Pause during a swipe; restart afterwards *\/\n  wrap.addEventListener('pointerdown', stopAuto);\n\n  \/* Reset the timer after any manual interaction so the user isn't jarred\n     by an auto-flip the moment they finish clicking\/swiping *\/\n  prev.addEventListener('click', restartAuto);\n  next.addEventListener('click', restartAuto);\n  document.addEventListener('keydown', function (e) {\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') restartAuto();\n  });\n  \/* Restart after a successful swipe *\/\n  wrap.addEventListener('pointerup', function () { setTimeout(restartAuto, 50); });\n  wrap.addEventListener('pointercancel', restartAuto);\n\n  startAuto();\n\n  \/* ----- Preloader -----\n     Wait for every <img> inside the wrap to either load or error, then\n     fade the overlay out. Safety timeout at 7s so the preloader can never\n     stick on a flaky network. *\/\n  (function () {\n    var preloader = document.querySelector('[data-bsgs-preloader]');\n    if (!preloader) return;\n    var images = wrap.querySelectorAll('img');\n    var done = false;\n    function hide() {\n      if (done) return;\n      done = true;\n      preloader.classList.add('is-hidden');\n      setTimeout(function () { if (preloader.parentNode) preloader.parentNode.removeChild(preloader); }, 600);\n    }\n    if (!images.length) { hide(); return; }\n    var remaining = images.length;\n    function tick() { remaining--; if (remaining <= 0) hide(); }\n    for (var i = 0; i < images.length; i++) {\n      var im = images[i];\n      if (im.complete && im.naturalWidth > 0) { tick(); continue; }\n      im.addEventListener('load',  tick, { once: true });\n      im.addEventListener('error', tick, { once: true });\n    }\n    setTimeout(hide, 7000);\n  })();\n\n  \/\/ Kick off the cloud only when the page is actually visible,\n  \/\/ so the animation doesn't silently progress while the page is still loading.\n  function startClouds() { driftClouds('left'); }\n  if (document.readyState === 'complete') {\n    startClouds();\n  } else {\n    window.addEventListener('load', startClouds, { once: true });\n  }\n})();\n<\/script>\n\n<!-- GSAP for independent decoration motion. 3.12 is free for most uses. -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script>\n(function () {\n  function start() {\n    if (typeof gsap === 'undefined') return;\n\n    var wrap = document.querySelector('.bsgs-wrap');\n    if (!wrap || wrap.dataset.bsgsGsap) return;\n    wrap.dataset.bsgsGsap = '1';\n\n    \/* Each decoration gets its own timeline \u2014 different durations, eases,\n       and target positions so they never move in sync. GSAP manages the\n       transform so the CSS `transform: translateX(...)` positioning offsets\n       are reset and driven from here instead. *\/\n\n    \/* Athens decorations (sun, heart, alpha) are now fully CSS-keyframed\n       and img-h-relative \u2014 they match the Free-slider pattern and track the\n       model across viewport changes. No GSAP positioning here. *\/\n  }\n\n  \/* Start as soon as DOM is parsed (don't wait for full `load` event which\n     blocks until all images finish downloading \u2014 that's why the sun looked\n     \"late\"). DOMContentLoaded fires much earlier. *\/\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', start);\n  } else {\n    start();\n  }\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-83727f5 e-con-full e-flex e-con e-parent\" data-id=\"83727f5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-960edaf elementor-widget elementor-widget-html\" data-id=\"960edaf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Widget 1 \/ 5 \u00b7 HERO (sun, wordmark, tagline, card)\n     Standalone Elementor Custom HTML widget. Unique CSS prefix\n     `.ath-hero-*` \u2014 no collision with the rest of the page.\n     ============================================================= -->\n<style>\n.ath-hero,\n.ath-hero *,\n.ath-hero *::before,\n.ath-hero *::after { box-sizing: border-box; }\n\n.ath-hero {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  \/* Top padding deliberately matches `.ath-hero__card` margin-top so\n     the wordmark + tagline block sits VERTICALLY CENTERED between\n     the section top and the card. Changing one without the other\n     will break that balance. *\/\n  padding: clamp(120px, 16vw, 200px) clamp(1rem, 4vw, 3rem) clamp(100px, 14vw, 160px);\n  background: #459fff;\n  color: #fff;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n\/* Sun wrapper \u2014 centres the sun on the widget itself (the widget IS\n   the \"hero block\"). Horizontally anchored near the right edge of\n   the 760px card column so it sits on the card's right side. *\/\n.ath-hero__sun-wrap {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(calc(min(380px, 42vw) - 50%), -50%);\n  z-index: 1;\n  pointer-events: none;\n  line-height: 0;\n}\n.ath-hero__sun {\n  display: block;\n  width: min(34vw, 380px);\n  height: auto;\n  opacity: 0.9;\n  user-select: none;\n  will-change: transform;\n}\n\n.ath-hero__wordmark {\n  position: relative;\n  z-index: 2;\n  margin: 0 auto;\n  max-width: 1400px;\n  text-align: center;\n  \/* Desktop: fluid clamp. Tablet and mobile overrides below lock\n     the wordmark to fixed pixel sizes (144px \/ 80px) so it never\n     scales below those thresholds.\n     `!important` on font-size only \u2014 Konte sets global h2 font-size\n     with higher specificity. font-weight is intentionally NOT\n     !important so the theme's heading weight still applies (forcing\n     900 here looks too heavy against the brand). *\/\n  font-size: clamp(3.2rem, 14vw, 11.5rem) !important;\n  font-weight: 900;\n  letter-spacing: 0.03em;\n  line-height: 0.92;\n  color: #fff;\n  text-shadow: 0 2px 0 rgba(0,0,0,0.04);\n  will-change: transform;\n}\n\n.ath-hero__tagline {\n  position: relative;\n  z-index: 2;\n  margin: clamp(2em, 5vh, 4em) auto 0;\n  text-align: center;\n  font-size: 24px;\n  letter-spacing: 0.04em;\n  text-transform: none;\n  color: rgba(255,255,255,0.9);\n  font-weight: 500;\n  will-change: transform;\n}\n\n.ath-hero__card {\n  position: relative;\n  z-index: 3;\n  max-width: 760px;\n  margin: clamp(120px, 16vw, 200px) auto 0;\n  padding: clamp(2em, 5vw, 3.5em) clamp(1.5em, 4vw, 3em);\n  background: #fff;\n  color: #1a1a1a;\n  border-radius: 60px 60px 24px 24px;\n  box-shadow: 0 30px 70px rgba(0,0,0,0.18), 0 10px 20px rgba(0,0,0,0.08);\n  text-align: center;\n  will-change: transform;\n}\n\n.ath-hero__heading {\n  margin: 0 0 0.9em;\n  font-size: clamp(1.35rem, 2.6vw, 1.9rem);\n  font-weight: 800;\n  line-height: 1.5;\n  letter-spacing: 0.005em;\n  color: #1a1a1a;\n}\n.ath-hero__text {\n  margin: 0 auto;\n  max-width: 58ch;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.75;\n  color: #3a3a3a;\n}\n\/* Pill CTA \u2014 same SHAPE as the \"View specifications\" button in the\n   features widget, but inverted colours: blue background, white\n   text (features CTA is white-on-blue; this one is blue-on-white\n   card \u2192 so the button reads as blue). *\/\n.ath-hero__cta {\n  display: inline-block;\n  margin-top: 1.8em;\n  padding: 1em 2em;\n  background: #459fff;\n  color: #fff;\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  border-radius: 999px;\n  text-decoration: none;\n  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;\n}\n.ath-hero__cta:hover,\n.ath-hero__cta:focus-visible {\n  background: #000;\n  color: #fff;\n  text-decoration: none;\n  transform: translateY(-1px);\n}\n.ath-hero__cta:focus-visible {\n  outline: 2px solid #459fff;\n  outline-offset: 3px;\n}\n\n\/* Tablet (768px\u20131024px) \u2014 wordmark 144px, tagline 20px. *\/\n@media (max-width: 64em) {\n  .ath-hero__card { border-radius: 48px 48px 20px 20px; }\n  .ath-hero__wordmark { font-size: 144px !important; }\n  .ath-hero__tagline { font-size: 20px; }\n}\n\n\/* Mobile (\u2264767px) \u2014 wordmark 60px, tagline 18px, and the\n   padding-top \/ card margin-top are KEPT EQUAL (80px) so the\n   title + subtitle block stays vertically centered between the\n   section top and the card. *\/\n@media (max-width: 767px) {\n  .ath-hero { padding: 80px 1em 140px; }\n  .ath-hero__wordmark { font-size: 60px !important; }\n  .ath-hero__tagline {\n    font-size: 18px;\n    margin-top: 0.8em;\n  }\n  .ath-hero__sun { width: min(46vw, 240px); }\n  .ath-hero__card {\n    border-radius: 40px 40px 18px 18px;\n    margin-top: 80px;   \/* equal to section's top padding *\/\n  }\n  .ath-hero__text { font-size: 1rem; line-height: 1.7; }\n}\n\n\/* Short landscape \u2014 same equalization (70 \/ 70). *\/\n@media (orientation: landscape) and (max-height: 500px) {\n  .ath-hero { padding: 70px 1em 100px; }\n  .ath-hero__card { margin-top: 70px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ath-hero__sun,\n  .ath-hero__wordmark,\n  .ath-hero__tagline,\n  .ath-hero__card { transform: none !important; }\n  .ath-hero__sun-wrap {\n    transform: translate(calc(min(380px, 42vw) - 50%), -50%) !important;\n  }\n}\n<\/style>\n\n<section class=\"ath-hero\" data-ath-hero-parallax aria-labelledby=\"ath-hero-heading\">\n  <div class=\"ath-hero__sun-wrap\" aria-hidden=\"true\">\n    <img decoding=\"async\" class=\"ath-hero__sun\"\n         src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/SUN.svg\"\n         alt=\"\"\n         data-parallax-speed=\"-0.22\">\n  <\/div>\n  <h2 class=\"ath-hero__wordmark\" id=\"ath-hero-heading\"\n      data-parallax-speed=\"-0.80\"\n      data-parallax-mode=\"exit\">ATHEART<\/h2>\n  <div class=\"ath-hero__tagline\"\n       data-parallax-speed=\"-0.70\"\n       data-parallax-mode=\"exit\">\u0391\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03b5\u03c2 \u03c4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03b1\u03b8\u03b7\u03bc\u03b5\u03c1\u03b9\u03bd\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7<\/div>\n  <div class=\"ath-hero__card\" data-parallax-speed=\"0.08\">\n    <h3 class=\"ath-hero__heading\">\u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1.<br>\u03a6\u03c4\u03b9\u03b1\u03b3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03bc\u03ad\u03c1\u03b1.<\/h3>\n    <p class=\"ath-hero__text\">\n      \u0397 ATHEART \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc studio  \u03bc\u03b5 \u03ad\u03b4\u03c1\u03b1 \u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1,\n      \u03c0\u03bf\u03c5 \u03c0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03be\u03b5\u03c7\u03c9\u03c1\u03b9\u03c3\u03c4\u03ae \u03c3\u03b5\u03b9\u03c1\u03ac \u03b1\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03c9\u03bd \u03c4\u03c3\u03b1\u03bd\u03c4\u03ce\u03bd \u03b3\u03b9\u03b1 \u03ba\u03b1\u03b8\u03b7\u03bc\u03b5\u03c1\u03b9\u03bd\u03ae\n      \u03c7\u03c1\u03ae\u03c3\u03b7 \u03ba\u03b1\u03b9 \u03c0\u03b1\u03c1\u03b5\u03cc \u03ba\u03b1\u03b9 \u03c6\u03bf\u03c5\u03bb\u03ac\u03c1\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b7\u03c2 \u03ad\u03ba\u03b4\u03bf\u03c3\u03b7\u03c2. \u039f\u03b9 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b5\u03c2 \u03bc\u03b1\u03c2\n      \u03b5\u03bd\u03c3\u03b1\u03c1\u03ba\u03ce\u03bd\u03bf\u03c5\u03bd \u03c4\u03b7\u03bd \u03b1\u03b9\u03c3\u03b9\u03bf\u03b4\u03bf\u03be\u03af\u03b1, \u03c4\u03b7\u03bd \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03b4\u03cd\u03bd\u03b1\u03bc\u03b7 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03c0\u03c1\u03bf\u03c3\u03c9\u03c0\u03b9\u03ba\u03ae\n      \u03ad\u03ba\u03c6\u03c1\u03b1\u03c3\u03b7, \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03cc\u03c3\u03bf\u03c5\u03c2 \u03b5\u03ba\u03c4\u03b9\u03bc\u03bf\u03cd\u03bd \u03c4\u03cc\u03c3\u03bf \u03c4\u03b7\u03bd \u03c0\u03c1\u03b1\u03ba\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1 \u03cc\u03c3\u03bf\n      \u03ba\u03b1\u03b9 \u03c4\u03bf \u03c3\u03c4\u03c5\u03bb.\n    <\/p>\n    <a class=\"ath-hero__cta\" href=\"https:\/\/atheart.gr\/el\/about\/\">\u03a0\u0395\u03a1\u0399\u03a3\u03a3\u039f\u03a4\u0395\u03a1\u0391<\/a>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var section = document.querySelector('[data-ath-hero-parallax]');\n  if (!section) return;\n  var layers = section.querySelectorAll('[data-parallax-speed]');\n  if (!layers.length) return;\n\n  var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if (mqReduce && mqReduce.matches) return;\n\n  var rafId = null, inView = false;\n  var vh = window.innerHeight || document.documentElement.clientHeight;\n\n  function update() {\n    rafId = null;\n    if (!inView) return;\n    var rect = section.getBoundingClientRect();\n    var progress = ((vh \/ 2) - (rect.top + rect.height \/ 2)) \/ vh;\n\n    for (var i = 0; i < layers.length; i++) {\n      var el = layers[i];\n      var speed = parseFloat(el.dataset.parallaxSpeed) || 0;\n      var p = progress;\n      var mode = el.dataset.parallaxMode;\n      if (mode === 'exit')       p = Math.max(0, p);\n      else if (mode === 'enter') p = Math.min(0, p);\n      var y = p * vh * speed;\n      el.style.transform = 'translate3d(0,' + y.toFixed(2) + 'px,0)';\n    }\n  }\n\n  function onScroll() {\n    if (rafId !== null) return;\n    rafId = window.requestAnimationFrame(update);\n  }\n  function onResize() {\n    vh = window.innerHeight || document.documentElement.clientHeight;\n    onScroll();\n  }\n\n  if ('IntersectionObserver' in window) {\n    var io = new IntersectionObserver(function (entries) {\n      entries.forEach(function (e) { inView = e.isIntersecting; if (inView) onScroll(); });\n    }, { rootMargin: '25% 0px 25% 0px' });\n    io.observe(section);\n  } else { inView = true; }\n\n  window.addEventListener('scroll', onScroll, { passive: true });\n  window.addEventListener('resize', onResize, { passive: true });\n  inView = true;\n  update();\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e4f56d9 e-con-full e-flex e-con e-parent\" data-id=\"e4f56d9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80eecd4 elementor-widget elementor-widget-html\" data-id=\"80eecd4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Widget 2 \/ 5 \u00b7 FEATURES\n     \"Made for every day.\" \u2014 6 bag advantages, each tile sliding in\n     from the right on first reveal. Unique CSS prefix `.ath-feat-*`.\n     ============================================================= -->\n<style>\n.ath-feat,\n.ath-feat *,\n.ath-feat *::before,\n.ath-feat *::after { box-sizing: border-box; }\n\n.ath-feat {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  padding: clamp(80px, 10vw, 140px) clamp(1rem, 4vw, 3rem);\n  background: #459fff;\n  color: #fff;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n.ath-feat__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: minmax(260px, 5fr) 7fr;\n  gap: clamp(2em, 6vw, 5em);\n  align-items: start;\n}\n\n.ath-feat__head { color: #fff; }\n\n.ath-feat__title {\n  \/* Tight bottom margin so the CTA sits close to the title at every\n     width (not the 1.2em\u20131.8em it used to be). *\/\n  margin: 0 0 0.6em;\n  \/* Fixed title size for ALL widths (mobile override is 44px). *\/\n  font-size: 3rem !important;\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: -0.005em;\n  color: #fff;\n}\n\n.ath-feat__cta {\n  display: inline-block;\n  padding: 1em 2em;\n  background: #fff;\n  color: #459fff;\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  border-radius: 999px;\n  text-decoration: none;\n  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;\n}\n.ath-feat__cta:hover,\n.ath-feat__cta:focus-visible {\n  background: #000;\n  color: #fff;\n  text-decoration: none;\n  transform: translateY(-1px);\n}\n.ath-feat__cta:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n.ath-feat__list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: clamp(1.5em, 3vw, 2.5em) clamp(1em, 2.5vw, 2em);\n}\n\n.ath-feat__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 0.9em;\n  opacity: 0;\n  transform: translateX(60px);\n  transition:\n    opacity 0.7s cubic-bezier(.22,.61,.36,1),\n    transform 0.7s cubic-bezier(.22,.61,.36,1);\n  transition-delay: calc(var(--i, 0) * 90ms);\n  will-change: opacity, transform;\n}\n.ath-feat__item.is-visible {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.ath-feat__icon {\n  width: clamp(56px, 6vw, 72px);\n  height: auto;\n}\n\n.ath-feat__label {\n  font-size: clamp(0.95rem, 1.15vw, 1.05rem);\n  line-height: 1.35;\n  font-weight: 600;\n  color: #fff;\n}\n\n\/* Tablet + Mobile (\u22641024px) \u2014 stack head over grid, narrow the block\n   to 760px so the title lines up with the story card above, and\n   centre the head so the title sits above the grid's centre. *\/\n@media (max-width: 64em) {\n  .ath-feat__inner {\n    grid-template-columns: 1fr;\n    max-width: 760px;\n    gap: clamp(2em, 6vw, 4em);\n  }\n  .ath-feat__head { text-align: center; }\n}\n\/* Mobile (\u2264767px) \u2014 title 44px, and the head centers so the title\n   sits above the grid's centre (aligned with where the icons read\n   visually). Grid columns stay at 3 down to 480px. *\/\n@media (max-width: 767px) {\n  .ath-feat__title { font-size: 44px !important; }\n  .ath-feat__head { text-align: center; }\n}\n\n\/* 3 columns stay down to 480px. Below 480px, drop to 2 columns. *\/\n@media (max-width: 479px) {\n  .ath-feat__list { grid-template-columns: repeat(2, 1fr); gap: 1.8em 1em; }\n  .ath-feat__icon { width: 54px; }\n  .ath-feat__label { font-size: 0.95rem; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ath-feat__item {\n    opacity: 1 !important;\n    transform: none !important;\n    transition: none !important;\n  }\n}\n\n\/* ---------- Specifications modal (side panel, slides in from the right) ---------- *\/\n.ath-feat__backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 9998;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n}\n.ath-feat__backdrop.is-open {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity 0.3s ease, visibility 0s;\n}\n\n.ath-feat__modal {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: min(720px, 92vw);\n  height: 100vh;\n  height: 100dvh;\n  background: #fff;\n  color: #1a1a1a;\n  z-index: 9999;\n  transform: translateX(100%);\n  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);\n  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n}\n.ath-feat__modal.is-open { transform: translateX(0); }\n\n.ath-feat__modal-top {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);\n}\n.ath-feat__modal-tag {\n  font-size: 1rem;\n  font-weight: 400;\n  letter-spacing: 0;\n}\n.ath-feat__modal-close {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4em;\n  background: none;\n  border: 0;\n  padding: 0.5em 0.25em;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: 400;\n  color: #1a1a1a;\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n}\n.ath-feat__modal-close:hover { opacity: 0.6; }\n.ath-feat__modal-close svg { width: 1.1em; height: 1.1em; }\n\n.ath-feat__modal h2 {\n  font-size: clamp(2.2rem, 4.5vw, 3.5rem);\n  font-weight: 400;\n  line-height: 1.1;\n  margin: 0 0 clamp(1.4rem, 3vw, 2rem);\n  letter-spacing: -0.01em;\n}\n.ath-feat__modal h3 {\n  font-size: clamp(1.4rem, 2.4vw, 1.9rem);\n  font-weight: 400;\n  line-height: 1.2;\n  margin: clamp(1.4rem, 2.5vw, 1.8rem) 0 0.55em;\n}\n.ath-feat__modal p {\n  font-size: clamp(1rem, 1.15vw, 1.1rem);\n  line-height: 1.6;\n  margin: 0 0 0.4em;\n}\n.ath-feat__modal ul {\n  list-style: none;\n  margin: 0 0 0.4em;\n  padding: 0;\n}\n.ath-feat__modal li {\n  position: relative;\n  padding-left: 1em;\n  font-size: clamp(1rem, 1.15vw, 1.1rem);\n  line-height: 1.55;\n}\n.ath-feat__modal li::before {\n  content: \"\u2022\";\n  position: absolute;\n  left: 0;\n}\n.ath-feat__modal__sub {\n  font-size: clamp(1rem, 1.15vw, 1.1rem);\n  line-height: 1.55;\n  margin: 0 0 0.25em;\n}\n\n\/* Lock background scroll when the modal is open *\/\nbody.ath-feat-locked { overflow: hidden; }\n<\/style>\n\n<section class=\"ath-feat\" aria-labelledby=\"ath-feat-heading\">\n  <div class=\"ath-feat__inner\">\n    <div class=\"ath-feat__head\">\n      <h3 class=\"ath-feat__title\" id=\"ath-feat-heading\">\u03a4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1<br>\u03ba\u03ac\u03b8\u03b5&nbsp;\u03bc\u03ad\u03c1\u03b1.<\/h3>\n      <a class=\"ath-feat__cta\" href=\"https:\/\/atheart.gr\/specifications\/\" data-ath-feat-open aria-controls=\"ath-feat-spec\" aria-expanded=\"false\">\u0394\u0395\u0399\u03a4\u0395 \u03a4\u0399\u03a3 \u03a0\u03a1\u039f\u0394\u0399\u0391\u0393\u03a1\u0391\u03a6\u0395\u03a3<\/a>\n    <\/div>\n    <ul class=\"ath-feat__list\">\n      <li class=\"ath-feat__item\" style=\"--i:0\">\n        <img decoding=\"async\" class=\"ath-feat__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_05_advantages.svg\" alt=\"\" aria-hidden=\"true\">\n        <span class=\"ath-feat__label\">\u0394\u03b9\u03c0\u03bb\u03ae\u03c2<br>\u03cc\u03c8\u03b7\u03c2<\/span>\n      <\/li>\n      <li class=\"ath-feat__item\" style=\"--i:1\">\n        <img decoding=\"async\" class=\"ath-feat__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_05_advantages.svg\" alt=\"\" aria-hidden=\"true\">\n        <span class=\"ath-feat__label\">\u03a3\u03b7\u03ba\u03ce\u03bd\u03b5\u03b9<br>\u03ad\u03c9\u03c2 30kg<\/span>\n      <\/li>\n      <li class=\"ath-feat__item\" style=\"--i:2\">\n        <img decoding=\"async\" class=\"ath-feat__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_05_advantages.svg\" alt=\"\" aria-hidden=\"true\">\n        <span class=\"ath-feat__label\">\u0386\u03bd\u03b5\u03c4\u03b1<br>\u03c7\u03b5\u03c1\u03bf\u03cd\u03bb\u03b9\u03b1<\/span>\n      <\/li>\n      <li class=\"ath-feat__item\" style=\"--i:3\">\n        <img decoding=\"async\" class=\"ath-feat__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_05_advantages.svg\" alt=\"\" aria-hidden=\"true\">\n        <span class=\"ath-feat__label\">\u039c\u03b1\u03bb\u03b1\u03ba\u03cc<br>\u03cd\u03c6\u03b1\u03c3\u03bc\u03b1<\/span>\n      <\/li>\n      <li class=\"ath-feat__item\" style=\"--i:4\">\n        <img decoding=\"async\" class=\"ath-feat__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_05_advantages.svg\" alt=\"\" aria-hidden=\"true\">\n        <span class=\"ath-feat__label\">\u03a0\u03c1\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae<br>\u03c4\u03c3\u03ad\u03c0\u03b7<\/span>\n      <\/li>\n      <li class=\"ath-feat__item\" style=\"--i:5\">\n        <img decoding=\"async\" class=\"ath-feat__icon\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_05_advantages.svg\" alt=\"\" aria-hidden=\"true\">\n        <span class=\"ath-feat__label\">\u03a5\u03b4\u03c1\u03cc\u03c6\u03bf\u03b2\u03b7<br>\u03b5\u03c0\u03ad\u03bd\u03b4\u03c5\u03c3\u03b7<\/span>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n<!-- Specifications side-panel modal -->\n<div class=\"ath-feat__backdrop\" data-ath-feat-backdrop hidden><\/div>\n<aside class=\"ath-feat__modal\" id=\"ath-feat-spec\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"ath-feat-spec-title\" hidden>\n  <div class=\"ath-feat__modal-top\">\n    <button type=\"button\" class=\"ath-feat__modal-close\" data-ath-feat-close aria-label=\"\u039a\u03bb\u03b5\u03af\u03c3\u03b9\u03bc\u03bf \u03c0\u03c1\u03bf\u03b4\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ce\u03bd\">\n      <span>\u039a\u03bb\u03b5\u03af\u03c3\u03b9\u03bc\u03bf<\/span>\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z\" fill=\"currentColor\"\/><\/svg>\n    <\/button>\n  <\/div>\n\n  <h2 id=\"ath-feat-spec-title\">+ \u03a0\u03c1\u03bf\u03b4\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ad\u03c2<\/h2>\n\n  <h3>\u0394\u03b9\u03b1\u03c3\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2<\/h3>\n  <ul>\n    <li>47cm x 41cm (\u03c7\u03c9\u03c1\u03af\u03c2 \u03c7\u03b5\u03c1\u03bf\u03cd\u03bb\u03b9\u03b1)<\/li>\n    <li>47cm x 65cm (\u03bc\u03b5 \u03c7\u03b5\u03c1\u03bf\u03cd\u03bb\u03b9\u03b1)<\/li>\n  <\/ul>\n  <p class=\"ath-feat__modal__sub\">\u0394\u03b9\u03b1\u03c3\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c4\u03c3\u03ad\u03c0\u03b7\u03c2:<\/p>\n  <ul>\n    <li>23cm x 12cm<\/li>\n  <\/ul>\n\n  <h3>\u0392\u03ac\u03c1\u03bf\u03c2<\/h3>\n  <ul>\n    <li>215 gr<\/li>\n  <\/ul>\n\n  <h3>\u0391\u03bd\u03c4\u03bf\u03c7\u03ae<\/h3>\n  <ul>\n    <li>\u03a3\u03b7\u03ba\u03ce\u03bd\u03b5\u03b9 \u03ad\u03c9\u03c2 30kg<\/li>\n  <\/ul>\n\n  <h3>\u03a5\u03bb\u03b9\u03ba\u03cc<\/h3>\n  <ul>\n    <li>100% \u03a0\u03bf\u03bb\u03c5\u03ad\u03c3\u03c4\u03b5\u03c1 (\u0395\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03cc \u038e\u03c6\u03b1\u03c3\u03bc\u03b1)<\/li>\n    <li>100% \u03a0\u03bf\u03bb\u03c5\u03ad\u03c3\u03c4\u03b5\u03c1, \u0391\u03b4\u03b9\u03ac\u03b2\u03c1\u03bf\u03c7\u03bf (\u0395\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03cc \u038e\u03c6\u03b1\u03c3\u03bc\u03b1)<\/li>\n  <\/ul>\n\n  <h3>\u039f\u03b4\u03b7\u03b3\u03af\u03b5\u03c2 \u03a0\u03bb\u03cd\u03c3\u03b7\u03c2<\/h3>\n  <ul>\n    <li>\u03a0\u03bb\u03cd\u03c3\u03b9\u03bc\u03bf \u03c3\u03c4\u03bf\u03c5\u03c2 30\u00b0<\/li>\n    <li>\u03a3\u03b9\u03b4\u03ad\u03c1\u03c9\u03bc\u03b1 \u03c3\u03b5 \u03c7\u03b1\u03bc\u03b7\u03bb\u03ae \u03b8\u03b5\u03c1\u03bc\u03bf\u03ba\u03c1\u03b1\u03c3\u03af\u03b1 \u03c7\u03c9\u03c1\u03af\u03c2 \u03b1\u03c4\u03bc\u03cc<\/li>\n    <li>\u038c\u03c7\u03b9 \u03bb\u03b5\u03c5\u03ba\u03b1\u03bd\u03c4\u03b9\u03ba\u03ac<\/li>\n    <li>\u038c\u03c7\u03b9 \u03c3\u03c4\u03b5\u03b3\u03bd\u03c9\u03c4\u03ae\u03c1\u03b9\u03bf<\/li>\n    <li>\u03a3\u03c4\u03b5\u03b3\u03bd\u03cc \u03ba\u03b1\u03b8\u03ac\u03c1\u03b9\u03c3\u03bc\u03b1<\/li>\n  <\/ul>\n\n  <h3>\u03a7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1<\/h3>\n  <p>\u03a3\u03b7\u03bc\u03b5\u03b9\u03ce\u03c3\u03c4\u03b5 \u03cc\u03c4\u03b9 \u03c4\u03b1 \u03c7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af \u03bd\u03b1 \u03b4\u03b9\u03b1\u03c6\u03ad\u03c1\u03bf\u03c5\u03bd \u03b5\u03bb\u03b1\u03c6\u03c1\u03ce\u03c2 \u03b1\u03c0\u03cc \u03b1\u03c5\u03c4\u03ac \u03c0\u03bf\u03c5 \u03b5\u03bc\u03c6\u03b1\u03bd\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c3\u03c4\u03b7\u03bd \u03bf\u03b8\u03cc\u03bd\u03b7 \u03c3\u03b1\u03c2 \u03c3\u03b5 \u03c3\u03c7\u03ad\u03c3\u03b7 \u03bc\u03b5 \u03c4\u03bf \u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd.<\/p>\n  <p class=\"ath-feat__modal__sub\">\u03a7\u03c1\u03ce\u03bc\u03b1 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03bf\u03cd \u03c5\u03c6\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2:<\/p>\n  <ul>\n    <li>\u03a3\u03ba\u03bf\u03cd\u03c1\u03bf \u03b3\u03ba\u03c1\u03b9<\/li>\n  <\/ul>\n<\/aside>\n\n<script>\n(function () {\n  var trigger  = document.querySelector('[data-ath-feat-open]');\n  var modal    = document.getElementById('ath-feat-spec');\n  var backdrop = document.querySelector('[data-ath-feat-backdrop]');\n  var closeBtn = document.querySelector('[data-ath-feat-close]');\n  if (!trigger || !modal || !backdrop || !closeBtn) return;\n\n  function openModal() {\n    modal.hidden = false;\n    backdrop.hidden = false;\n    \/* Force reflow so transition triggers from translateX(100%) \u2192 0 *\/\n    void modal.offsetWidth;\n    modal.classList.add('is-open');\n    backdrop.classList.add('is-open');\n    document.body.classList.add('ath-feat-locked');\n    trigger.setAttribute('aria-expanded', 'true');\n    closeBtn.focus();\n  }\n  function closeModal() {\n    modal.classList.remove('is-open');\n    backdrop.classList.remove('is-open');\n    document.body.classList.remove('ath-feat-locked');\n    trigger.setAttribute('aria-expanded', 'false');\n    \/* Hide after the transition ends so it stays out of the tab order *\/\n    setTimeout(function () {\n      modal.hidden = true;\n      backdrop.hidden = true;\n    }, 450);\n    trigger.focus();\n  }\n\n  trigger.addEventListener('click', function (e) { e.preventDefault(); openModal(); });\n  closeBtn.addEventListener('click', closeModal);\n  backdrop.addEventListener('click', closeModal);\n  document.addEventListener('keydown', function (e) {\n    if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal();\n  });\n})();\n<\/script>\n\n<script>\n(function () {\n  var section = document.querySelector('.ath-feat');\n  if (!section) return;\n  var items = section.querySelectorAll('.ath-feat__item');\n  if (!items.length) return;\n\n  var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if (mqReduce && mqReduce.matches) {\n    items.forEach(function (el) { el.classList.add('is-visible'); });\n    return;\n  }\n\n  if (!('IntersectionObserver' in window)) {\n    items.forEach(function (el) { el.classList.add('is-visible'); });\n    return;\n  }\n\n  var io = new IntersectionObserver(function (entries) {\n    entries.forEach(function (entry) {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        io.unobserve(entry.target);\n      }\n    });\n  }, { rootMargin: '0px 0px -10% 0px', threshold: 0.15 });\n  items.forEach(function (el) { io.observe(el); });\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36f0d03 e-con-full e-flex e-con e-parent\" data-id=\"36f0d03\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b952dea elementor-widget elementor-widget-html\" data-id=\"b952dea\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Widget 3 \/ 5 \u00b7 REVIEWS\n     \"Loved, carried, cherished.\" \u2014 horizontal drag-scroll strip of\n     customer review cards. Mouse + pen drag; touch uses native\n     scroll; no wheel hijack; no vertical-scroll blocking.\n     Unique CSS prefix `.ath-rev-*`.\n     ============================================================= -->\n<style>\n.ath-rev,\n.ath-rev *,\n.ath-rev *::before,\n.ath-rev *::after { box-sizing: border-box; }\n\n.ath-rev {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  padding: clamp(80px, 10vw, 140px) clamp(1rem, 4vw, 3rem);\n  background: #459fff;\n  color: #fff;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n.ath-rev__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.ath-rev__head {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 1.5em;\n  margin-bottom: clamp(1.2em, 2.4vw, 2em);\n  color: #fff;\n}\n.ath-rev__title {\n  margin: 0;\n  \/* Matches `.ath-feat__title` \u2014 3rem desktop\/tablet, 44px mobile.\n     `!important` needed to beat Konte's global h3 font-size. *\/\n  font-size: 3rem !important;\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: -0.005em;\n  color: #fff;\n}\n@media (max-width: 767px) {\n  .ath-rev__title { font-size: 44px !important; }\n}\n.ath-rev__hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n  font-size: 0.7rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  color: rgba(255,255,255,0.75);\n  white-space: nowrap;\n}\n.ath-rev__hint::after {\n  content: \"\";\n  display: inline-block;\n  width: 1.6em;\n  height: 1px;\n  background: currentColor;\n  opacity: 0.6;\n}\n\n\/* Track breaks out to BOTH viewport edges so neither the first card's\n   left shadow nor the last card's right shadow is clipped by the\n   reviews column boundaries. *\/\n.ath-rev__track {\n  position: relative;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n}\n\n.ath-rev__strip {\n  display: flex;\n  gap: clamp(1em, 2vw, 1.5em);\n  overflow-x: auto;\n  overflow-y: hidden;\n  \/* pan-x pan-y \u2014 browser picks based on the gesture's initial\n     direction: horizontal swipe scrolls the strip natively on\n     tablet\/mobile; vertical swipe scrolls the page. *\/\n  touch-action: pan-x pan-y;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  \/* Vertical padding clears shadows that `overflow-y: hidden` would\n     otherwise clip. Horizontal padding aligns the first card with\n     the title column on wide screens while respecting the widget's\n     side padding on narrower ones. *\/\n  padding: 48px max(clamp(1rem, 4vw, 3rem), calc((100vw - 1200px) \/ 2)) 64px;\n  margin: -48px 0 -64px;\n  cursor: grab;\n  user-select: none;\n}\n.ath-rev__strip.is-dragging { cursor: grabbing; }\n.ath-rev__strip::-webkit-scrollbar { display: none; }\n\n.ath-rev__card {\n  flex: 0 0 clamp(280px, 72vw, 440px);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  min-height: clamp(260px, 34vw, 320px);\n  padding: clamp(1.8em, 3vw, 2.4em);\n  background: #fff;\n  color: #1a1a1a;\n  border-radius: 28px;\n  box-shadow: 0 20px 50px rgba(0,0,0,0.14), 0 6px 14px rgba(0,0,0,0.06);\n}\n\n.ath-rev__mark {\n  position: absolute;\n  top: 0.15em;\n  right: 0.25em;\n  font-family: Georgia, \"Playfair Display\", \"Times New Roman\", serif;\n  font-size: 7rem;\n  line-height: 1;\n  color: #459fff;\n  opacity: 0.12;\n  pointer-events: none;\n  user-select: none;\n}\n\n.ath-rev__text {\n  position: relative;\n  margin: 0;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.6;\n  font-style: italic;\n  color: #2a2a2a;\n}\n\n.ath-rev__attr {\n  margin-top: 1.6em;\n  padding-top: 1.1em;\n  border-top: 1px solid rgba(0,0,0,0.08);\n  display: flex;\n  flex-direction: column;\n  gap: 0.15em;\n}\n.ath-rev__name {\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: #1a1a1a;\n  letter-spacing: 0.01em;\n}\n.ath-rev__loc {\n  font-size: 0.8rem;\n  color: #6a6a6a;\n  letter-spacing: 0.04em;\n  font-weight: 600;\n}\n\n@media (max-width: 40em) {\n  .ath-rev__head {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.8em;\n  }\n  .ath-rev__card {\n    flex-basis: 82vw;\n    min-height: 240px;\n    border-radius: 22px;\n  }\n  .ath-rev__mark { font-size: 5.5rem; }\n}\n\n<\/style>\n\n<section class=\"ath-rev\" aria-labelledby=\"ath-rev-heading\">\n  <div class=\"ath-rev__inner\">\n    <div class=\"ath-rev__head\">\n      <h3 class=\"ath-rev__title\" id=\"ath-rev-heading\">\u0391\u03b3\u03b1\u03c0\u03b7\u03bc\u03ad\u03bd\u03b5\u03c2, \u03c3\u03c4\u03bf \u03c0\u03bb\u03ac\u03b9 \u03c3\u03b1\u03c2.<\/h3>\n      <span class=\"ath-rev__hint\" aria-hidden=\"true\">\u03a3\u03a5\u03a1\u0395\u03a4\u0395 \u0393\u0399\u0391 \u03a0\u0395\u03a1\u0399\u03a3\u03a3\u039f\u03a4\u0395\u03a1\u0391<\/span>\n    <\/div>\n\n    <div class=\"ath-rev__track\">\n      <div class=\"ath-rev__strip\"\n           role=\"region\"\n           aria-label=\"\u039a\u03c1\u03b9\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c0\u03b5\u03bb\u03b1\u03c4\u03ce\u03bd, \u03bc\u03b5 \u03bf\u03c1\u03b9\u03b6\u03cc\u03bd\u03c4\u03b9\u03bf \u03ba\u03c5\u03bb\u03af\u03c3\u03b9\u03bc\u03bf\"\n           tabindex=\"0\">\n\n        <article class=\"ath-rev__card\">\n          <span class=\"ath-rev__mark\" aria-hidden=\"true\">&ldquo;<\/span>\n          <p class=\"ath-rev__text\">\n            The Mosaic at Heart bag is absolutely stunning. The design is a\n            beautiful reflection of diversity, with every detail coming\n            together like a work of art. It feels like carrying a piece of\n            culture and creativity with me wherever I go.\n          <\/p>\n          <footer class=\"ath-rev__attr\">\n            <span class=\"ath-rev__name\">Elisa S.<\/span>\n            <span class=\"ath-rev__loc\">BERLIN<\/span>\n          <\/footer>\n        <\/article>\n\n        <article class=\"ath-rev__card\">\n          <span class=\"ath-rev__mark\" aria-hidden=\"true\">&ldquo;<\/span>\n          <p class=\"ath-rev__text\">\n            I received the Cherish at Heart bag as a gift, I was immediately\n            captivated by its beauty and thoughtful design. Whether I&rsquo;m\n            heading to work or spending time with friends, it goes with me\n            everywhere!\n          <\/p>\n          <footer class=\"ath-rev__attr\">\n            <span class=\"ath-rev__name\">Maria K.<\/span>\n            <span class=\"ath-rev__loc\">ATHENS<\/span>\n          <\/footer>\n        <\/article>\n\n        <article class=\"ath-rev__card\">\n          <span class=\"ath-rev__mark\" aria-hidden=\"true\">&ldquo;<\/span>\n          <p class=\"ath-rev__text\">\n            \u0397 Athens at Heart \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03b1\u03bb\u03b7\u03b8\u03b9\u03bd\u03ae \u03ad\u03bc\u03c0\u03bd\u03b5\u03c5\u03c3\u03b7. \u039d\u03b9\u03ce\u03b8\u03c9 \u03c4\u03b7\u03bd \u03c8\u03c5\u03c7\u03ae\n            \u03c4\u03b7\u03c2 \u03c0\u03cc\u03bb\u03b7\u03c2 \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03bb\u03b5\u03c0\u03c4\u03bf\u03bc\u03ad\u03c1\u03b5\u03b9\u03b1. \u0395\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03bd\u03b1 \u03ba\u03bf\u03c5\u03b2\u03b1\u03bb\u03ac\u03c9 \u03ad\u03bd\u03b1\n            \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1 \u03bc\u03b1\u03b6\u03af \u03bc\u03bf\u03c5, \u03cc\u03c0\u03bf\u03c5 \u03ba\u03b9 \u03b1\u03bd \u03c0\u03ac\u03c9.\n          <\/p>\n          <footer class=\"ath-rev__attr\">\n            <span class=\"ath-rev__name\">\u0394\u03ae\u03bc\u03b7\u03c4\u03c1\u03b1 \u03a0.<\/span>\n            <span class=\"ath-rev__loc\">\u0398\u0395\u03a3\u03a3\u0391\u039b\u039f\u039d\u0399\u039a\u0397<\/span>\n          <\/footer>\n        <\/article>\n\n        <article class=\"ath-rev__card\">\n          <span class=\"ath-rev__mark\" aria-hidden=\"true\">&ldquo;<\/span>\n          <p class=\"ath-rev__text\">\n            \u039c\u03b5 \u03c4\u03b7 Free at Heart \u03ba\u03ac\u03b8\u03b5 \u03bc\u03ad\u03c1\u03b1 \u03bc\u03bf\u03b9\u03ac\u03b6\u03b5\u03b9 \u03c0\u03b9\u03bf \u03b1\u03bd\u03ac\u03bb\u03b1\u03c6\u03c1\u03b7. \u0395\u03af\u03bd\u03b1\u03b9 \u03bf\n            \u03c4\u03ad\u03bb\u03b5\u03b9\u03bf\u03c2 \u03c3\u03c5\u03bd\u03b4\u03c5\u03b1\u03c3\u03bc\u03cc\u03c2 \u03ba\u03bf\u03bc\u03c8\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2 \u03ba\u03b1\u03b9 \u03b5\u03bb\u03b5\u03c5\u03b8\u03b5\u03c1\u03af\u03b1\u03c2. \u03a4\u03b7 \u03c3\u03c5\u03bd\u03c4\u03c1\u03bf\u03c6\u03b5\u03cd\u03c9\n            \u03b1\u03c0\u03cc \u03c4\u03bf \u03c0\u03c1\u03c9\u03af \u03bc\u03ad\u03c7\u03c1\u03b9 \u03b1\u03c1\u03b3\u03ac \u03c4\u03bf \u03b2\u03c1\u03ac\u03b4\u03c5 \u03c7\u03c9\u03c1\u03af\u03c2 \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03b7 \u03c3\u03ba\u03ad\u03c8\u03b7.\n          <\/p>\n          <footer class=\"ath-rev__attr\">\n            <span class=\"ath-rev__name\">\u0386\u03bd\u03bd\u03b1 \u0392.<\/span>\n            <span class=\"ath-rev__loc\">\u03a0\u0391\u03a4\u03a1\u0391<\/span>\n          <\/footer>\n        <\/article>\n\n        <article class=\"ath-rev__card\">\n          <span class=\"ath-rev__mark\" aria-hidden=\"true\">&ldquo;<\/span>\n          <p class=\"ath-rev__text\">\n            \u0397 Ocean at Heart \u03bc\u03b5 \u03c4\u03b1\u03be\u03b9\u03b4\u03b5\u03cd\u03b5\u03b9 \u03c3\u03c4\u03b7 \u03b8\u03ac\u03bb\u03b1\u03c3\u03c3\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03c6\u03bf\u03c1\u03ac \u03c0\u03bf\u03c5 \u03c4\u03b7\n            \u03b2\u03bb\u03ad\u03c0\u03c9. \u03a4\u03b1 \u03c7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1 \u03ba\u03b1\u03b9 \u03b7 \u03b1\u03af\u03c3\u03b8\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf\u03bd\u03b5\u03b9\u03c1\u03b9\u03ba\u03ac, \u03c3\u03c7\u03b5\u03b4\u03cc\u03bd\n            \u03c0\u03bf\u03b9\u03b7\u03c4\u03b9\u03ba\u03ac. \u0394\u03b5\u03bd \u03c0\u03b5\u03c1\u03bd\u03ac\u03b5\u03b9 \u03b1\u03c0\u03b1\u03c1\u03b1\u03c4\u03ae\u03c1\u03b7\u03c4\u03b7.\n          <\/p>\n          <footer class=\"ath-rev__attr\">\n            <span class=\"ath-rev__name\">\u0395\u03bb\u03ad\u03bd\u03b7 \u039c.<\/span>\n            <span class=\"ath-rev__loc\">\u03a7\u0391\u039d\u0399\u0391<\/span>\n          <\/footer>\n        <\/article>\n\n        <article class=\"ath-rev__card\">\n          <span class=\"ath-rev__mark\" aria-hidden=\"true\">&ldquo;<\/span>\n          <p class=\"ath-rev__text\">\n            \u039b\u03ac\u03c4\u03c1\u03b5\u03c8\u03b1 \u03c4\u03b7 Doors at Heart \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03c0\u03c1\u03ce\u03c4\u03b7 \u03c3\u03c4\u03b9\u03b3\u03bc\u03ae. \u0388\u03c7\u03b5\u03b9 \u03ad\u03bd\u03b1\u03bd\n            \u03b4\u03b9\u03ba\u03cc \u03c4\u03b7\u03c2 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b1, \u03bc\u03b9\u03b1 \u03b1\u03af\u03c3\u03b8\u03b7\u03c3\u03b7 \u03bc\u03c5\u03c3\u03c4\u03b7\u03c1\u03af\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03b6\u03b5\u03c3\u03c4\u03b1\u03c3\u03b9\u03ac\u03c2\n            \u03c4\u03b1\u03c5\u03c4\u03cc\u03c7\u03c1\u03bf\u03bd\u03b1. \u03a4\u03bf \u03b1\u03b3\u03b1\u03c0\u03b7\u03bc\u03ad\u03bd\u03bf \u03bc\u03bf\u03c5 \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1.\n          <\/p>\n          <footer class=\"ath-rev__attr\">\n            <span class=\"ath-rev__name\">\u039a\u03b1\u03c4\u03b5\u03c1\u03af\u03bd\u03b1 \u039b.<\/span>\n            <span class=\"ath-rev__loc\">\u0397\u03a1\u0391\u039a\u039b\u0395\u0399\u039f<\/span>\n          <\/footer>\n        <\/article>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var section = document.querySelector('.ath-rev');\n  if (!section) return;\n\n  \/\/ Mouse + pen drag-scroll. Touch uses native horizontal scroll via\n  \/\/ `touch-action: pan-x pan-y`. Wheel is NOT hijacked, so vertical\n  \/\/ page scroll always passes through the strip.\n  var strip = section.querySelector('.ath-rev__strip');\n  if (!strip) return;\n\n  var isDown = false, startX = 0, startScroll = 0, moved = false, activePtr = null;\n\n  strip.addEventListener('pointerdown', function (e) {\n    if (e.pointerType === 'touch') return;\n    if (e.button !== 0) return;\n    isDown = true;\n    moved = false;\n    activePtr = e.pointerId;\n    startX = e.clientX;\n    startScroll = strip.scrollLeft;\n    strip.classList.add('is-dragging');\n    e.preventDefault();   \/\/ kill native text-selection \/ image-drag\n    try { strip.setPointerCapture(e.pointerId); } catch (_) {}\n  });\n\n  \/\/ Window listeners (rather than strip) so the drag stays fluid\n  \/\/ when the cursor exits the strip's bounds \u2014 and they also cover\n  \/\/ the case where `setPointerCapture` silently fails.\n  function onMove(e) {\n    if (!isDown || e.pointerId !== activePtr) return;\n    var dx = e.clientX - startX;\n    if (Math.abs(dx) > 4) moved = true;\n    strip.scrollLeft = startScroll - dx;\n  }\n  function endDrag(e) {\n    if (!isDown || e.pointerId !== activePtr) return;\n    isDown = false;\n    strip.classList.remove('is-dragging');\n    try { strip.releasePointerCapture(activePtr); } catch (_) {}\n    activePtr = null;\n  }\n  window.addEventListener('pointermove', onMove);\n  window.addEventListener('pointerup', endDrag);\n  window.addEventListener('pointercancel', endDrag);\n\n  \/\/ Suppress native text-selection between pointerdown and first move\n  \/\/ (Firefox + older Chrome) and the ghost click fired at drag-end.\n  strip.addEventListener('selectstart', function (e) { if (isDown) e.preventDefault(); });\n  strip.addEventListener('click', function (e) {\n    if (moved) { e.preventDefault(); e.stopPropagation(); moved = false; }\n  }, true);\n  strip.addEventListener('dragstart', function (e) { e.preventDefault(); });\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afef2a8 e-con-full e-flex e-con e-parent\" data-id=\"afef2a8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48fb8be elementor-widget elementor-widget-html\" data-id=\"48fb8be\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Widget 4 \/ 5 \u00b7 MADE IN ATHENS\n     Full-bleed photo with a white \"Made in Athens\" badge centred\n     over it. Badge drifts gently upward ONLY as the block exits\n     past a configurable anchor line (TRIGGER_RATIO below).\n     Unique CSS prefix `.ath-made-*`.\n     ============================================================= -->\n<style>\n.ath-made,\n.ath-made *,\n.ath-made *::before,\n.ath-made *::after { box-sizing: border-box; }\n\n.ath-made {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  background: #459fff;\n  overflow: hidden;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n\/* Frame has NO explicit height \u2014 its height is determined by the\n   photo's actual rendered height (photo is in flow, see below), so\n   there is never a gap above or below the image.\n   `contain: paint` enforces strict clipping of the transformed\n   badge (fixes the iOS Safari bug where `will-change: transform`\n   children escape a plain `overflow: hidden` parent). *\/\n.ath-made__frame {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  contain: paint;\n  background: transparent;\n}\n\n\/* Photo is placed IN FLOW (not absolute) with a FIXED pixel width,\n   so the frame inherits its height automatically and the image keeps\n   the same physical size from desktop through tablet. It overflows\n   the viewport horizontally on narrower screens; `overflow: hidden`\n   on the frame crops L\/R. `left: 50% + translateX(-50%)` centres\n   the overflowing image on the frame.\n   `max-width: none !important` is REQUIRED to override the global\n   WordPress \/ Elementor \/ Konte `img { max-width: 100% }` rule that\n   would otherwise clamp the image back to 100% of the viewport\n   (which is exactly what made it \"still scale proportionally\"). *\/\n.ath-made__photo {\n  display: block;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n  width: max(1920px, 100vw);\n  max-width: none !important;\n  height: auto !important;\n  user-select: none;\n  pointer-events: none;\n}\n\/* Mobile \u2014 image is 30% smaller (fixed 1344\u00d7506) on all widths \u2264 767px. *\/\n@media (max-width: 767px) {\n  .ath-made__photo { width: 1344px; }\n}\n\n\/* Wrapper owns the centring translate; parallax JS only rewrites the\n   inner <img>'s transform, so the wrapper's position is never lost. *\/\n.ath-made__badge-wrap {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n  pointer-events: none;\n  line-height: 0;\n}\n.ath-made__badge {\n  display: block;\n  width: min(92vw, 880px);\n  \/* `max-width: none !important` \u2014 same story as .ath-made__photo:\n     WordPress \/ Elementor \/ Konte sets `img { max-width: 100% }`\n     globally, which would clamp the badge back to its parent's\n     width and make it look tiny on mobile regardless of what we\n     set in `width`. *\/\n  max-width: none !important;\n  height: auto !important;\n  will-change: transform;\n  \/* Source SVG is solid blue \u2014 brightness(0)+invert(1) forces it to\n     pure white. Drop-shadow chained after for legibility on bright\n     photo areas. *\/\n  filter:\n    brightness(0) invert(1)\n    drop-shadow(0 8px 24px rgba(0,0,0,0.45));\n}\n\n\/* Mobile \u2014 badge at 70% of viewport width. *\/\n@media (max-width: 767px) {\n  .ath-made__badge { width: 70vw; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ath-made__badge { transform: none !important; }\n  .ath-made__badge-wrap { transform: translate(-50%, -50%) !important; }\n}\n<\/style>\n\n<section class=\"ath-made\" data-ath-made-parallax>\n  <div class=\"ath-made__frame\" role=\"img\" aria-label=\"Made in Athens\">\n    <img decoding=\"async\" class=\"ath-made__photo\"\n         src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/02parallax.png\"\n         alt=\"\"\n         aria-hidden=\"true\">\n    <div class=\"ath-made__badge-wrap\" aria-hidden=\"true\">\n      <img decoding=\"async\" class=\"ath-made__badge\"\n           src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/madeinAthens.svg\"\n           alt=\"\"\n           data-ath-made-speed=\"-0.08\"\n           data-ath-made-mode=\"exit\">\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var section = document.querySelector('[data-ath-made-parallax]');\n  if (!section) return;\n  var badge = section.querySelector('[data-ath-made-speed]');\n  if (!badge) return;\n\n  var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n  if (mqReduce && mqReduce.matches) return;\n\n  \/\/ TRIGGER_RATIO \u2014 where on the viewport (0 = top, 1 = bottom) the\n  \/\/ parallax \"rest point\" sits. Motion engages as the anchor crosses\n  \/\/ this line on its way upward. 0.5 = centre; higher values push\n  \/\/ the trigger toward the bottom so the SVG starts moving \"from\n  \/\/ more down\" in the viewport.\n  var TRIGGER_RATIO = 0.72;\n\n  var speed = parseFloat(badge.dataset.athMadeSpeed) || 0;\n  var mode = badge.dataset.athMadeMode;\n  var anchor = badge.parentElement;\n\n  var rafId = null, inView = false;\n  var vh = window.innerHeight || document.documentElement.clientHeight;\n\n  function update() {\n    rafId = null;\n    if (!inView) return;\n    var rect = anchor.getBoundingClientRect();\n    var anchorY = rect.top + rect.height \/ 2;\n    var p = (vh * TRIGGER_RATIO - anchorY) \/ vh;\n    if      (mode === 'exit')  p = Math.max(0, p);\n    else if (mode === 'enter') p = Math.min(0, p);\n    badge.style.transform = 'translate3d(0,' + (p * vh * speed).toFixed(2) + 'px,0)';\n  }\n\n  function onScroll() {\n    if (rafId === null) rafId = window.requestAnimationFrame(update);\n  }\n  function onResize() {\n    vh = window.innerHeight || document.documentElement.clientHeight;\n    onScroll();\n  }\n\n  if ('IntersectionObserver' in window) {\n    new IntersectionObserver(function (entries) {\n      inView = entries[0].isIntersecting;\n      if (inView) onScroll();\n    }, { rootMargin: '25% 0px 25% 0px' }).observe(section);\n  } else {\n    inView = true;\n  }\n\n  window.addEventListener('scroll', onScroll, { passive: true });\n  window.addEventListener('resize', onResize, { passive: true });\n  inView = true;\n  update();\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-003a781 e-con-full e-flex e-con e-parent\" data-id=\"003a781\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f031e50 elementor-widget elementor-widget-html\" data-id=\"f031e50\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Widget 5 \/ 5 \u00b7 CLOSING\n     \"Foldable bags for everyday use, made in Athens\" \u2014 title on the\n     left, descriptive paragraph on the right. No JS, no parallax,\n     no reveal. Unique CSS prefix `.ath-close-*`.\n     ============================================================= -->\n<style>\n.ath-close,\n.ath-close *,\n.ath-close *::before,\n.ath-close *::after { box-sizing: border-box; }\n\n.ath-close {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  padding: clamp(80px, 10vw, 140px) clamp(1rem, 4vw, 3rem);\n  background: #459fff;\n  color: #fff;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n.ath-close__inner {\n  max-width: 1100px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: minmax(260px, 5fr) 7fr;\n  gap: clamp(2em, 6vw, 5em);\n  align-items: start;\n}\n\n.ath-close__title {\n  margin: 0;\n  \/* Matches `.ath-feat__title` \/ `.ath-rev__title` \u2014 3rem desktop &\n     tablet, 44px mobile. `!important` needed to beat Konte's global\n     h3 font-size. *\/\n  font-size: 3rem !important;\n  font-weight: 800;\n  line-height: 1.15;\n  letter-spacing: -0.005em;\n  color: #fff;\n}\n@media (max-width: 767px) {\n  .ath-close__title { font-size: 44px !important; }\n}\n\n.ath-close__text {\n  margin: 0;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.75;\n  color: rgba(255,255,255,0.92);\n  max-width: 62ch;\n}\n\n@media (max-width: 40em) {\n  .ath-close__inner {\n    grid-template-columns: 1fr;\n    gap: 1.2em;\n  }\n  .ath-close__text { font-size: 1rem; line-height: 1.7; }\n}\n<\/style>\n\n<section class=\"ath-close\" aria-labelledby=\"ath-close-heading\">\n  <div class=\"ath-close__inner\">\n    <h3 class=\"ath-close__title\" id=\"ath-close-heading\">\n      \u03a4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03b4\u03b9\u03c0\u03bb\u03ae\u03c2 \u03cc\u03c8\u03b7\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03bc\u03ad\u03c1\u03b1.\n    <\/h3>\n    <p class=\"ath-close__text\">\n      \u039f\u03b9 \u03b1\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03b5\u03c2 \u03c4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03bc\u03b1\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03b1\u03b8\u03b7\u03bc\u03b5\u03c1\u03b9\u03bd\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 \u03c0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03bf\u03c5\u03bd\n      \u03bc\u03b9\u03b1 \u03b5\u03cd\u03ba\u03bf\u03bb\u03b7 \u03bb\u03cd\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03ba\u03bf\u03c5\u03b2\u03b1\u03bb\u03ac\u03c4\u03b5 \u03cc\u03bb\u03b1 \u03cc\u03c3\u03b1 \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c3\u03c4\u03b5 \u03bc\u03ad\u03c3\u03b1 \u03c3\u03c4\u03b7\n      \u03bc\u03ad\u03c1\u03b1. \u03a3\u03c5\u03bd\u03b4\u03c5\u03ac\u03b6\u03bf\u03c5\u03bd \u03c3\u03c4\u03c5\u03bb \u03ba\u03b1\u03b9 \u03c0\u03c1\u03b1\u03ba\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1, \u03bc\u03b5 \u03b1\u03b4\u03b9\u03ac\u03b2\u03c1\u03bf\u03c7\u03b7 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae\n      \u03b5\u03c0\u03ad\u03bd\u03b4\u03c5\u03c3\u03b7, \u03ac\u03bd\u03b5\u03c4\u03b1 \u03c7\u03b5\u03c1\u03bf\u03cd\u03bb\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03ac\u03c0\u03bb\u03b5\u03c4\u03bf \u03c7\u03ce\u03c1\u03bf, \u03b9\u03b4\u03b1\u03bd\u03b9\u03ba\u03ad\u03c2 \u03b3\u03b9\u03b1 \u03bc\u03b9\u03b1\n      \u03bc\u03ad\u03c1\u03b1 \u03c3\u03c4\u03b7\u03bd \u03c0\u03b1\u03c1\u03b1\u03bb\u03af\u03b1 \u03ae \u03b3\u03b9\u03b1 \u03c4\u03b7 \u03b6\u03c9\u03ae \u03c3\u03c4\u03b7\u03bd \u03c0\u03cc\u03bb\u03b7. \u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u03c4\u03ad\u03bb\u03b5\u03b9\u03b1\n      \u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ae \u03b3\u03b9\u03b1 \u03cc\u03c3\u03bf\u03c5\u03c2 \u03b1\u03bd\u03b1\u03b6\u03b7\u03c4\u03bf\u03cd\u03bd \u03ad\u03bd\u03b1 \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc \u03b1\u03bb\u03bb\u03ac \u03ba\u03bf\u03bc\u03c8\u03cc\n      \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1 \u03c0\u03bf\u03c5 \u03b1\u03bd\u03c4\u03ad\u03c7\u03b5\u03b9 \u03c3\u03c4\u03b9\u03c2 \u03b1\u03c0\u03b1\u03b9\u03c4\u03ae\u03c3\u03b5\u03b9\u03c2 \u03c4\u03b7\u03c2 \u03ba\u03b1\u03b8\u03b7\u03bc\u03b5\u03c1\u03b9\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2 \u03ba\u03b1\u03b9\n      \u03be\u03b5\u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03b9.\n    <\/p>\n  <\/div>\n<\/section>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-839d08c e-con-full e-flex e-con e-parent\" data-id=\"839d08c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f654039 elementor-widget elementor-widget-html\" data-id=\"f654039\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;600;800&display=swap');\n\n\/* ============================================================\n   atheart.gr \u2014 Featured Bags Grid (GSAP Flip expanding tile)\n   Namespace: .ahbg-*\n   ============================================================ *\/\n\n.ahbg-wrap,\n.ahbg-wrap *,\n.ahbg-wrap *::before,\n.ahbg-wrap *::after,\n.ahbg-details,\n.ahbg-details *,\n.ahbg-details *::before,\n.ahbg-details *::after { box-sizing: border-box; }\n\n.ahbg-wrap {\n  \/* Background flipped white \u2192 blue to match the other atheart.gr\n     sections (hero \/ features \/ reviews \/ made \/ closing). Grid-card\n     title colour flipped black \u2192 white for contrast. Tile and the\n     details overlay's white surface are unchanged. *\/\n  --ahbg-bg: #459fff;\n  --ahbg-tile: #f5f0ef;\n  --ahbg-accent: #d35066;\n  --ahbg-text: #fff;\n  --ahbg-muted: #a09897;\n  --ahbg-cols: 3;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  color: var(--ahbg-text);\n  background: var(--ahbg-bg);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  position: relative;\n}\n\n.ahbg-grid {\n  margin: 0 auto;\n  position: relative;\n  \/* Bottom padding leaves room for the parallax Y translation on\n     the last row \u2014 without it, cards drift downward as the user\n     scrolls past and their titles get covered by the next widget. *\/\n  padding: 0 1em 6em;\n  width: 100%;\n  max-width: 1200px;\n  display: grid;\n  grid-template-columns: repeat(var(--ahbg-cols), 1fr);\n}\n\n.ahbg-item {\n  padding: 0 1em;\n  margin: 0;\n}\n\/* 3-col zigzag: middle column of each row sits lower *\/\n.ahbg-item:nth-child(3n+2) .ahbg-product { margin-top: 2em; }\n\n.ahbg-product {\n  height: 100%;\n  \/* Top padding was 6em as a buffer for the absolutely-positioned bag\n     image that can extend above `.ahbg-product__bg`. Reduced because\n     the actual bag PNGs don't hit the 24em max-height, so most of the\n     buffer was dead space between the section above and the first row. *\/\n  padding-top: 2em;\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0,0,0,0);\n}\n.ahbg-product__bg {\n  height: 18em;\n  \/* Transparent \u2014 the grey tile is gone. The element is kept because\n     the GSAP Flip animation uses it as the geometry anchor when the\n     details overlay opens\/closes. The details overlay's own `--down`\n     band (still #f5f0ef) fills in as the grey surface there. *\/\n  background: transparent;\n  position: relative;\n}\n.ahbg-product__img {\n  max-height: 24em;\n  max-width: 100%;\n  width: auto;\n  margin: 0 auto;\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  pointer-events: none;\n  transform: translate3d(-50%, 0, 0);\n}\n.ahbg-product__title {\n  position: relative;\n  margin: 0.5em 0 0;\n  font-size: 25px !important;\n  color: var(--ahbg-text);\n  font-family: \"Open Sans\", Helvetica, Arial, sans-serif;\n  \/* 900 (Black) for extra-bold read on the blue background.\n     `!important` beats any Konte h2 weight override. *\/\n  font-weight: 900 !important;\n  font-style: normal;\n  line-height: 1.1;\n  letter-spacing: 0.01em;\n  \/* Centered so every title sits directly below its bag (bag is\n     centred in the card, so this aligns title with bag visually).\n     Previously left-aligned, which left the title flush to the\n     card's left edge, well off to the side of its bag. *\/\n  text-align: center;\n}\n.ahbg-product__subtitle { display: none; }\n\n\/* Hidden until the details panel animates in *\/\n.ahbg-product__description,\n.ahbg-product__price {\n  opacity: 0;\n  position: absolute;\n  pointer-events: none;\n}\n.ahbg-details__price,\n.ahbg-product__price { display: none !important; }\n\n\/* ------------------------------------------------------------\n   Fullscreen details overlay (appended to <body> by the JS)\n   ------------------------------------------------------------ *\/\n.ahbg-details {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  padding: 66vh 2em 5vh 2em;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  text-align: center;\n  pointer-events: none;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  color: #000;\n}\n.ahbg-details--open { pointer-events: auto; }\n.ahbg-details > * { position: relative; opacity: 0; }\n\n.ahbg-details__bg {\n  width: 100%;\n  position: fixed;\n  left: 0;\n  transform-origin: 0 0;\n}\n.ahbg-details__bg--up {\n  top: 0;\n  height: 100vh;\n  \/* Matches the rest of the atheart.gr sections. The grey\n     `--down` band is kept so the bag photo still reads on a\n     neutral surface at the bottom of the overlay. *\/\n  background: #459fff;\n}\n.ahbg-details__bg--down {\n  top: 58vh;\n  height: 42vh;\n  background: #f5f0ef;\n}\n.ahbg-details__img-wrap {\n  position: absolute;\n  top: 4vh;\n  left: 0;\n  right: 0;\n  height: 60vh;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  pointer-events: none;\n  opacity: 1;\n}\n.ahbg-details__img {\n  position: relative;\n  height: 100%;\n  width: auto;\n  max-width: 100%;\n  transform-origin: 50% 50%;\n  pointer-events: none;\n  display: block;\n}\n.ahbg-details__title {\n  margin: 0 0 0.15em 0;\n  font-size: 2.6em;\n  font-family: \"Open Sans\", Helvetica, Arial, sans-serif;\n  font-weight: 800;\n  font-style: normal;\n  line-height: 1.05;\n  letter-spacing: 0.01em;\n}\n.ahbg-details__deco { display: none; }\n.ahbg-details__subtitle { display: none; }\n.ahbg-details__description {\n  line-height: 1.5;\n  font-weight: 400;\n  max-width: 40em;\n  margin: 1em auto 0 auto;\n}\n.ahbg-details__cta {\n  display: inline-block;\n  margin: 1.5em auto 0 auto;\n  background: #000;\n  color: #fff;\n  padding: 0.9em 2em;\n  font-weight: bold;\n  letter-spacing: 0.1em;\n  font-size: 0.8em;\n  text-decoration: none;\n  border: 0;\n  cursor: pointer;\n  transition: background 0.2s, color 0.2s;\n}\n.ahbg-details__cta:hover { background: #d35066; color: #fff; }\n\n.ahbg-details__close {\n  position: fixed;\n  top: 1.5em;\n  right: 1.5em;\n  width: 3em;\n  height: 3em;\n  border: 0;\n  background: #000;\n  border-radius: 50%;\n  cursor: pointer;\n  color: #fff;\n  z-index: 10001;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  transition: background 0.2s;\n}\n.ahbg-details__close:hover { background: #d35066; }\n.ahbg-details__close svg {\n  width: 1em; height: 1em; fill: currentColor; display: block;\n}\n\n.ahbg-details__nav {\n  position: fixed;\n  top: 50%;\n  width: 5em;\n  height: 5em;\n  margin-top: -2.5em;\n  border: 0;\n  background: transparent;\n  color: #000;\n  cursor: pointer;\n  z-index: 10001;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: color 0.2s, opacity 0.3s, transform 0.2s;\n}\n.ahbg-details__nav:hover { color: #d35066; }\n.ahbg-details__nav--prev:hover { transform: translateX(-4px); }\n.ahbg-details__nav--next:hover { transform: translateX(4px); }\n.ahbg-details--open .ahbg-details__nav { opacity: 1; pointer-events: auto; }\n.ahbg-details__nav--prev { left: 1em; }\n.ahbg-details__nav--next { right: 1em; }\n.ahbg-details__nav svg { width: 4em; height: 4em; fill: currentColor; display: block; }\n\n\/* Tablet \u2014 2 cols, slightly smaller *\/\n@media (max-width: 64em) {\n  .ahbg-wrap { --ahbg-cols: 2; }\n  .ahbg-grid { max-width: 800px; margin: 0 auto; }\n  .ahbg-item { padding: 0 1em; margin-bottom: 2vh; }\n  .ahbg-item:nth-child(3n+2) .ahbg-product { margin-top: 0; }\n  .ahbg-item:nth-child(odd) .ahbg-product { margin-top: -2em; }\n  .ahbg-product { padding-top: 5em; }\n  .ahbg-product__bg { height: 16em; }\n  .ahbg-product__img { max-height: 20em; }\n  .ahbg-details__nav { width: 4em; height: 4em; margin-top: -2em; }\n  .ahbg-details__nav svg { width: 3em; height: 3em; }\n}\n\n\/* Mobile \u2014 1 col, stacked cleanly *\/\n@media (max-width: 40em) {\n  .ahbg-wrap { --ahbg-cols: 1; }\n  .ahbg-grid { padding: 0 1.5em; margin: 0 auto; max-width: 440px; }\n  .ahbg-item { padding: 0; margin-bottom: 1vh; }\n  .ahbg-item:nth-child(odd) .ahbg-product,\n  .ahbg-item:nth-child(3n+2) .ahbg-product { margin-top: 0; }\n  .ahbg-product { padding-top: 4.5em; }\n  .ahbg-product__bg { height: 14em; }\n  .ahbg-product__img { max-height: 18em; }\n  .ahbg-details { padding: 52vh 1em 4vh 1em; }\n  .ahbg-details__bg--down { top: 42vh; height: 58vh; }\n  .ahbg-details__img-wrap { top: 3vh; height: 45vh; }\n  .ahbg-details__title { font-size: 1.6em; }\n  .ahbg-details__price { font-size: 1.4em; }\n  .ahbg-details__description { font-size: 0.85em; margin: 0.75em auto 0 auto; }\n  .ahbg-details__close { width: 2.4em; height: 2.4em; top: 1em; right: 1em; }\n  .ahbg-details__nav { width: 2.5em; height: 2.5em; margin-top: -1.25em; }\n  .ahbg-details__nav svg { width: 2em; height: 2em; }\n  .ahbg-details__nav--prev { left: 0.25em; }\n  .ahbg-details__nav--next { right: 0.25em; }\n  .ahbg-details__cta { padding: 0.75em 1.5em; font-size: 0.75em; }\n}\n<\/style>\n\n<div class=\"ahbg-wrap\">\n  <div class=\"ahbg-grid\">\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/athens-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/08\/bag_athens1_front.png\" alt=\"Athens at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Athens at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cAthens at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1, \u03cc\u03c0\u03bf\u03c5 \u03b7 \u03b9\u03c3\u03c4\u03bf\u03c1\u03af\u03b1 \u03ba\u03b1\u03b9 \u03b7 \u03c3\u03cd\u03b3\u03c7\u03c1\u03bf\u03bd\u03b7 \u03b5\u03c0\u03bf\u03c7\u03ae \u03c3\u03c5\u03bd\u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03b1\u03c1\u03bc\u03bf\u03bd\u03b9\u03ba\u03ac \u03bc\u03ad\u03c3\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf\u03c5\u03c2 \u03b5\u03bc\u03b2\u03bb\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03ba\u03af\u03bf\u03bd\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03b1 \u03ba\u03c4\u03af\u03c1\u03b9\u03ac \u03c4\u03b7\u03c2, \u03c3\u03c5\u03bc\u03b2\u03bf\u03bb\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7\u03bd \u03c0\u03bb\u03bf\u03cd\u03c3\u03b9\u03b1 \u03ba\u03bb\u03b7\u03c1\u03bf\u03bd\u03bf\u03bc\u03b9\u03ac \u03c4\u03b7\u03c2 \u03c0\u03cc\u03bb\u03b7\u03c2.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/cherish-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_cherish1_front.png\" alt=\"Cherish at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Cherish at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cCherish at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b9\u03c2 \u03b4\u03b9\u03b1\u03c7\u03c1\u03bf\u03bd\u03b9\u03ba\u03ad\u03c2 \u03b1\u03be\u03af\u03b5\u03c2 \u03c4\u03b7\u03c2 \u03b1\u03b3\u03ac\u03c0\u03b7\u03c2, \u03c4\u03b7\u03c2 \u03bf\u03b9\u03ba\u03bf\u03b3\u03ad\u03bd\u03b5\u03b9\u03b1\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03c2 \u03c6\u03b9\u03bb\u03af\u03b1\u03c2, \u03cc\u03c0\u03bf\u03c5 \u03b7 \u03b6\u03b5\u03c3\u03c4\u03b1\u03c3\u03b9\u03ac \u03ba\u03b1\u03b9 \u03b7 \u03c6\u03c1\u03bf\u03bd\u03c4\u03af\u03b4\u03b1 \u03c3\u03c5\u03bd\u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03b1\u03c1\u03bc\u03bf\u03bd\u03b9\u03ba\u03ac \u03bc\u03b5 \u03c4\u03b9\u03c2 \u03b1\u03c0\u03bb\u03ad\u03c2 \u03c7\u03b1\u03c1\u03ad\u03c2 \u03c0\u03bf\u03c5 \u03b4\u03af\u03bd\u03bf\u03c5\u03bd \u03bd\u03cc\u03b7\u03bc\u03b1 \u03c3\u03c4\u03b7 \u03b6\u03c9\u03ae.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/click-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_click1_front.png\" alt=\"Click at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Click at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cClick at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03b5 \u03b5\u03ba\u03b5\u03af\u03bd\u03b5\u03c2 \u03c4\u03b9\u03c2 \u03b1\u03c0\u03bb\u03ad\u03c2 \u03b1\u03bb\u03bb\u03ac \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03c4\u03b9\u03b3\u03bc\u03ad\u03c2 \u03cc\u03c0\u03bf\u03c5 \u03b7 \u03c0\u03c1\u03b1\u03ba\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c3\u03c5\u03bd\u03b1\u03bd\u03c4\u03ac \u03c4\u03b7\u03bd \u03ba\u03bf\u03bc\u03c8\u03cc\u03c4\u03b7\u03c4\u03b1, \u03cc\u03c0\u03bf\u03c5 \u03ad\u03bd\u03b1 \u03bc\u03cc\u03bd\u03bf \u03ba\u03bb\u03b9\u03ba \u03b1\u03c3\u03c6\u03b1\u03bb\u03af\u03b6\u03b5\u03b9 \u03b1\u03c5\u03c4\u03cc \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03c3\u03b7\u03bc\u03b1\u03c3\u03af\u03b1.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/doors-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_doors1_front.png\" alt=\"Doors at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Doors at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cDoors at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03c1\u03cc\u03bc\u03bf\u03c5\u03c2 \u03c0\u03bf\u03c5 \u03b5\u03c0\u03b9\u03bb\u03ad\u03b3\u03bf\u03c5\u03bc\u03b5, \u03c3\u03c4\u03bf \u03c6\u03c9\u03c2 \u03c0\u03bf\u03c5 \u03bc\u03b1\u03c2 \u03bf\u03b4\u03b7\u03b3\u03b5\u03af \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b7\u03bd \u03b5\u03c0\u03cc\u03bc\u03b5\u03bd\u03b7 \u03c0\u03b5\u03c1\u03b9\u03c0\u03ad\u03c4\u03b5\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03c3\u03c4\u03b9\u03c2 \u03bd\u03ad\u03b5\u03c2 \u03b1\u03c1\u03c7\u03ad\u03c2 \u03c0\u03bf\u03c5 \u03ad\u03c1\u03c7\u03bf\u03bd\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03b1\u03bd\u03bf\u03b9\u03c7\u03c4\u03ae \u03c0\u03cc\u03c1\u03c4\u03b1.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/free-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_free1_front.png\" alt=\"Free at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Free at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cFree at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03bf \u03b1\u03bd\u03b8\u03b5\u03ba\u03c4\u03b9\u03ba\u03cc \u03c0\u03bd\u03b5\u03cd\u03bc\u03b1 \u03c4\u03bf\u03c5 \u03bc\u03bf\u03c5\u03bb\u03b1\u03c1\u03b9\u03bf\u03cd, \u03b5\u03bd\u03cc\u03c2 \u03c0\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2 \u03c0\u03bf\u03c5 \u03b5\u03bd\u03c3\u03b1\u03c1\u03ba\u03ce\u03bd\u03b5\u03b9 \u03c4\u03b7 \u03b4\u03cd\u03bd\u03b1\u03bc\u03b7 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03b1\u03bd\u03c4\u03bf\u03c7\u03ae, \u03ba\u03b1\u03b9 \u03c3\u03c4\u03bf \u03b4\u03b9\u03ba\u03b1\u03af\u03c9\u03bc\u03ac \u03c4\u03bf\u03c5 \u03bd\u03b1 \u03b6\u03b5\u03b9 \u03b5\u03bb\u03b5\u03cd\u03b8\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc \u03ba\u03b1\u03ba\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/majestic-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_majestic1_front-1.png\" alt=\"Majestic at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Majestic at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cMajestic at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b9\u03c2 \u03c3\u03c4\u03b9\u03b3\u03bc\u03ad\u03c2 \u03b4\u03ad\u03bf\u03c5\u03c2 \u03ba\u03b1\u03b9 \u03b8\u03b1\u03c5\u03bc\u03b1\u03c3\u03bc\u03bf\u03cd \u03c0\u03bf\u03c5 \u03b1\u03c6\u03ae\u03bd\u03bf\u03c5\u03bd \u03b4\u03b9\u03b1\u03c1\u03ba\u03ae \u03b1\u03c0\u03bf\u03c4\u03cd\u03c0\u03c9\u03bc\u03b1 \u03c3\u03c4\u03b7\u03bd \u03ba\u03b1\u03c1\u03b4\u03b9\u03ac \u03bc\u03b1\u03c2. \u0395\u03bd\u03c3\u03b1\u03c1\u03ba\u03ce\u03bd\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03b1\u03af\u03c3\u03b8\u03b7\u03c3\u03b7 \u03bc\u03b5\u03b3\u03b1\u03bb\u03bf\u03c0\u03c1\u03ad\u03c0\u03b5\u03b9\u03b1\u03c2 \u03ba\u03b1\u03b9 \u03ba\u03bf\u03bc\u03c8\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2 \u03c0\u03bf\u03c5 \u03b1\u03bd\u03c4\u03ad\u03c7\u03b5\u03b9 \u03c3\u03c4\u03bf\u03bd \u03c7\u03c1\u03cc\u03bd\u03bf.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/mosaic-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_mosaic1_front.png\" alt=\"Mosaic at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Mosaic at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cMosaic at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b9\u03c2 \u03c0\u03bf\u03bb\u03cd\u03c7\u03c1\u03c9\u03bc\u03b5\u03c2 \u03c3\u03c4\u03b9\u03b3\u03bc\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03b9\u03c2 \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b5\u03c2 \u03c0\u03bf\u03c5 \u03c5\u03c6\u03b1\u03af\u03bd\u03bf\u03c5\u03bd \u03c4\u03b7\u03bd \u03c4\u03bf\u03b9\u03c7\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c4\u03b7\u03c2 \u03b6\u03c9\u03ae\u03c2 \u03bc\u03b1\u03c2.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/ocean-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_ocean1_front.png\" alt=\"Ocean at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Ocean at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cOcean at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b7\u03bd \u03b7\u03c1\u03b5\u03bc\u03af\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b7 \u03b4\u03cd\u03bd\u03b1\u03bc\u03b7 \u03c4\u03bf\u03c5 \u03c9\u03ba\u03b5\u03b1\u03bd\u03bf\u03cd \u03c0\u03bf\u03c5 \u03ba\u03b1\u03b8\u03c1\u03b5\u03c6\u03c4\u03af\u03b6\u03b5\u03b9 \u03c4\u03bf\u03c5\u03c2 \u03c1\u03c5\u03b8\u03bc\u03bf\u03cd\u03c2 \u03c4\u03b7\u03c2 \u03b6\u03c9\u03ae\u03c2 \u03bc\u03b1\u03c2, \u03c3\u03c5\u03bc\u03b2\u03bf\u03bb\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7 \u03bb\u03b5\u03c0\u03c4\u03ae \u03b9\u03c3\u03bf\u03c1\u03c1\u03bf\u03c0\u03af\u03b1 \u03b1\u03bd\u03ac\u03bc\u03b5\u03c3\u03b1 \u03c3\u03c4\u03b7\u03bd \u03c0\u03b5\u03c1\u03b9\u03c0\u03ad\u03c4\u03b5\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b7 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/rainbow-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_rainbow1_front.png\" alt=\"Rainbow at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Rainbow at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cRainbow at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03bf \u03b8\u03ac\u03c1\u03c1\u03bf\u03c2, \u03c4\u03b7\u03bd \u03b1\u03b3\u03ac\u03c0\u03b7 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03c5\u03c0\u03b5\u03c1\u03b7\u03c6\u03ac\u03bd\u03b5\u03b9\u03b1 \u03c0\u03bf\u03c5 \u03b1\u03ba\u03c4\u03b9\u03bd\u03bf\u03b2\u03bf\u03bb\u03b5\u03af \u03b1\u03c0\u03cc \u03ba\u03ac\u03b8\u03b5 \u03c7\u03c1\u03ce\u03bc\u03b1 \u03c4\u03bf\u03c5 \u03bf\u03c5\u03c1\u03ac\u03bd\u03b9\u03bf\u03c5 \u03c4\u03cc\u03be\u03bf\u03c5. \u0393\u03b9\u03bf\u03c1\u03c4\u03ac\u03b6\u03b5\u03b9 \u03c4\u03b7 \u03b6\u03c9\u03bd\u03c4\u03b1\u03bd\u03ae \u03c0\u03bf\u03b9\u03ba\u03b9\u03bb\u03bf\u03bc\u03bf\u03c1\u03c6\u03af\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03b5\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c4\u03b7\u03c2 \u03ba\u03bf\u03b9\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2 \u039b\u039f\u0391\u03a4\u039a\u0399+.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/shine-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_shine1_front.png\" alt=\"Shine at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Shine at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cShine at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b7 \u03bb\u03ac\u03bc\u03c8\u03b7 \u03ba\u03b1\u03b9 \u03c4\u03b7 \u03b6\u03b5\u03c3\u03c4\u03b1\u03c3\u03b9\u03ac \u03c0\u03bf\u03c5 \u03ba\u03bf\u03c5\u03b2\u03b1\u03bb\u03ac\u03bc\u03b5 \u03bc\u03ad\u03c3\u03b1 \u03bc\u03b1\u03c2, \u03c6\u03c9\u03c4\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u03ba\u03cc\u03c3\u03bc\u03bf \u03b3\u03cd\u03c1\u03c9 \u03bc\u03b1\u03c2. \u0395\u03bd\u03c3\u03b1\u03c1\u03ba\u03ce\u03bd\u03b5\u03b9 \u03c4\u03bf \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03cc \u03c6\u03c9\u03c2 \u03c0\u03bf\u03c5 \u03bc\u03b1\u03c2 \u03ba\u03b1\u03b8\u03bf\u03b4\u03b7\u03b3\u03b5\u03af \u03bc\u03ad\u03c3\u03b1 \u03b1\u03c0\u03cc \u03c4\u03b9\u03c2 \u03c0\u03c1\u03bf\u03ba\u03bb\u03ae\u03c3\u03b5\u03b9\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03bf\u03c5\u03c2 \u03b8\u03c1\u03b9\u03ac\u03bc\u03b2\u03bf\u03c5\u03c2 \u03c4\u03b7\u03c2 \u03b6\u03c9\u03ae\u03c2.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/wrap-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_wrap1_front.png\" alt=\"Wrap at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Wrap at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cWrap at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b7 \u03b6\u03b5\u03c3\u03c4\u03b1\u03c3\u03b9\u03ac \u03ba\u03b1\u03b9 \u03c4\u03b7 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03c0\u03bf\u03c5 \u03bc\u03b1\u03c2 \u03c4\u03c5\u03bb\u03af\u03b3\u03b5\u03b9 \u03c3\u03c4\u03b9\u03c2 \u03c0\u03b9\u03bf \u03bf\u03c5\u03c3\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c3\u03c4\u03b9\u03b3\u03bc\u03ad\u03c2 \u03c4\u03b7\u03c2 \u03b6\u03c9\u03ae\u03c2. \u03a3\u03c5\u03bc\u03b2\u03bf\u03bb\u03af\u03b6\u03b5\u03b9 \u03c4\u03b7\u03bd \u03ac\u03bd\u03b5\u03c3\u03b7 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03b1\u03c3\u03c6\u03ac\u03bb\u03b5\u03b9\u03b1 \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03bf\u03c5\u03bc\u03b5 \u03c3\u03c4\u03b7\u03bd \u03b1\u03b3\u03ba\u03b1\u03bb\u03b9\u03ac \u03c4\u03c9\u03bd \u03b1\u03b3\u03b1\u03c0\u03b7\u03bc\u03ad\u03bd\u03c9\u03bd \u03bc\u03b1\u03c2.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ahbg-item\">\n      <div class=\"ahbg-product\" data-url=\"https:\/\/atheart.gr\/el\/shop\/%cf%84%cf%83%ce%ac%ce%bd%cf%84%ce%b5%cf%82\/zip-at-heart\/\">\n        <div class=\"ahbg-product__bg\">\n          <img decoding=\"async\" class=\"ahbg-product__img\" src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/10\/bag_zip1_front.png\" alt=\"Zip at Heart\">\n        <\/div>\n        <h2 class=\"ahbg-product__title\">Zip at Heart<\/h2>\n        <h3 class=\"ahbg-product__subtitle\">at Heart Collection<\/h3>\n        <p class=\"ahbg-product__description\">\u03a4\u03bf \u03c3\u03c7\u03ad\u03b4\u03b9\u03bf \u201cZip at Heart\u201d \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03c6\u03cc\u03c1\u03bf\u03c2 \u03c4\u03b9\u03bc\u03ae\u03c2 \u03c3\u03c4\u03b9\u03c2 \u03c4\u03b1\u03ba\u03c4\u03bf\u03c0\u03bf\u03b9\u03b7\u03bc\u03ad\u03bd\u03b5\u03c2, \u03bf\u03c1\u03b3\u03b1\u03bd\u03c9\u03bc\u03ad\u03bd\u03b5\u03c2 \u03c3\u03c4\u03b9\u03b3\u03bc\u03ad\u03c2 \u03c4\u03b7\u03c2 \u03b6\u03c9\u03ae\u03c2 \u03c0\u03bf\u03c5 \u03bc\u03b1\u03c2 \u03ba\u03c1\u03b1\u03c4\u03bf\u03cd\u03bd \u03bd\u03b1 \u03c0\u03c1\u03bf\u03c7\u03c9\u03c1\u03ac\u03bc\u03b5 \u03bc\u03b5 \u03b1\u03c5\u03c4\u03bf\u03c0\u03b5\u03c0\u03bf\u03af\u03b8\u03b7\u03c3\u03b7. \u0391\u03c0\u03bf\u03c4\u03c5\u03c0\u03ce\u03bd\u03b5\u03b9 \u03c4\u03b7\u03bd \u03c4\u03ad\u03bb\u03b5\u03b9\u03b1 \u03b9\u03c3\u03bf\u03c1\u03c1\u03bf\u03c0\u03af\u03b1 \u03b1\u03bd\u03ac\u03bc\u03b5\u03c3\u03b1 \u03c3\u03c4\u03b7 \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03bf \u03c3\u03c4\u03c5\u03bb.<\/p>\n        <div class=\"ahbg-product__price\">\u20ac49<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n\/* Konte hide-header guard \u2014 prevents TypeError on Canvas \/ custom templates *\/\nwindow.addEventListener('DOMContentLoaded', function () {\n  if (!document.getElementById('hide-header')) { window.onscroll = null; }\n});\n<\/script>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/Flip.min.js\"><\/script>\n<script>\n(function () {\n  function init() {\n    if (typeof gsap === 'undefined' || typeof Flip === 'undefined') return;\n    gsap.registerPlugin(Flip);\n\n    var wrap = document.querySelector('.ahbg-wrap');\n    if (!wrap || wrap.dataset.ahbgInit) return;\n    wrap.dataset.ahbgInit = '1';\n\n    function Details() {\n      var self = this;\n      self.DOM = {};\n      var tmpl =\n        '<div class=\"ahbg-details__bg ahbg-details__bg--up\"><\/div>' +\n        '<div class=\"ahbg-details__bg ahbg-details__bg--down\"><\/div>' +\n        '<div class=\"ahbg-details__img-wrap\"><img decoding=\"async\" class=\"ahbg-details__img\" src=\"\" alt=\"\"><\/div>' +\n        '<h2 class=\"ahbg-details__title\"><\/h2>' +\n        '<div class=\"ahbg-details__deco\"><\/div>' +\n        '<h3 class=\"ahbg-details__subtitle\"><\/h3>' +\n        '<div class=\"ahbg-details__price\"><\/div>' +\n        '<p class=\"ahbg-details__description\"><\/p>' +\n        '<a class=\"ahbg-details__cta\" href=\"#\">\u0394\u0395\u0399\u03a4\u0395 \u03a0\u0395\u03a1\u0399\u03a3\u03a3\u039f\u03a4\u0395\u03a1\u0391<\/a>' +\n        '<button class=\"ahbg-details__close\" type=\"button\" aria-label=\"\u039a\u03bb\u03b5\u03af\u03c3\u03b9\u03bc\u03bf\">' +\n          '<svg viewBox=\"0 0 24 24\"><path d=\"M 5.5,2.5 C 5.372,2.5 5.244,2.549 5.146,2.646 L 2.646,5.146 C 2.451,5.341 2.451,5.659 2.646,5.854 L 8.793,12 2.646,18.15 C 2.451,18.34 2.451,18.66 2.646,18.85 L 5.146,21.35 C 5.341,21.55 5.659,21.55 5.854,21.35 L 12,15.21 18.15,21.35 C 18.24,21.45 18.37,21.5 18.5,21.5 18.63,21.5 18.76,21.45 18.85,21.35 L 21.35,18.85 C 21.55,18.66 21.55,18.34 21.35,18.15 L 15.21,12 21.35,5.854 C 21.55,5.658 21.55,5.342 21.35,5.146 L 18.85,2.646 C 18.66,2.451 18.34,2.451 18.15,2.646 L 12,8.793 5.854,2.646 C 5.756,2.549 5.628,2.5 5.5,2.5 Z\"\/><\/svg>' +\n        '<\/button>' +\n        '<button class=\"ahbg-details__nav ahbg-details__nav--prev\" type=\"button\" aria-label=\"\u03a0\u03c1\u03bf\u03b7\u03b3\u03bf\u03cd\u03bc\u03b5\u03bd\u03bf\">' +\n          '<svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>' +\n        '<\/button>' +\n        '<button class=\"ahbg-details__nav ahbg-details__nav--next\" type=\"button\" aria-label=\"\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf\">' +\n          '<svg viewBox=\"0 0 24 24\"><path d=\"M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z\"\/><\/svg>' +\n        '<\/button>';\n      self.DOM.el = document.createElement('div');\n      self.DOM.el.className = 'ahbg-details';\n      self.DOM.el.innerHTML = tmpl;\n      document.body.appendChild(self.DOM.el);\n\n      self.DOM.bgUp       = self.DOM.el.querySelector('.ahbg-details__bg--up');\n      self.DOM.bgDown     = self.DOM.el.querySelector('.ahbg-details__bg--down');\n      self.DOM.img        = self.DOM.el.querySelector('.ahbg-details__img');\n      self.DOM.title      = self.DOM.el.querySelector('.ahbg-details__title');\n      self.DOM.deco       = self.DOM.el.querySelector('.ahbg-details__deco');\n      self.DOM.subtitle   = self.DOM.el.querySelector('.ahbg-details__subtitle');\n      self.DOM.price      = self.DOM.el.querySelector('.ahbg-details__price');\n      self.DOM.description= self.DOM.el.querySelector('.ahbg-details__description');\n      self.DOM.cta        = self.DOM.el.querySelector('.ahbg-details__cta');\n      self.DOM.close      = self.DOM.el.querySelector('.ahbg-details__close');\n      self.DOM.prev       = self.DOM.el.querySelector('.ahbg-details__nav--prev');\n      self.DOM.next       = self.DOM.el.querySelector('.ahbg-details__nav--next');\n\n      self.items = [];\n      self.currentIndex = -1;\n\n      gsap.set(self.DOM.img, { transformOrigin: '50% 50%' });\n      gsap.set(self.DOM.close, { opacity: 0, scale: 0, transformOrigin: '50% 50%' });\n      self.DOM.close.addEventListener('click', function () { self.close(); });\n      self.DOM.prev.addEventListener('click', function () { self.navigate(-1); });\n      self.DOM.next.addEventListener('click', function () { self.navigate(1); });\n      document.addEventListener('keydown', function (e) {\n        if (!self.DOM.el.classList.contains('ahbg-details--open')) return;\n        if (e.key === 'Escape') self.close();\n        else if (e.key === 'ArrowLeft') self.navigate(-1);\n        else if (e.key === 'ArrowRight') self.navigate(1);\n      });\n    }\n    Details.prototype.setItems = function (items) { this.items = items; };\n\n    Details.prototype.fill = function (info) {\n      var self = this;\n      self.DOM.title.innerHTML = info.title;\n      self.DOM.deco.style.backgroundImage = 'url(' + info.img + ')';\n      self.DOM.subtitle.innerHTML = info.subtitle;\n      self.DOM.price.innerHTML = info.price;\n      self.DOM.description.innerHTML = info.description;\n      self.DOM.cta.href = info.url || '#';\n      return new Promise(function (resolve) {\n        self.DOM.img.onload = function () { resolve(); };\n        self.DOM.img.onerror = function () { resolve(); };\n        self.DOM.img.src = info.img;\n      });\n    };\n\n    Details.prototype.open = function (data) {\n      if (this.isAnimating) return;\n      this.isAnimating = true;\n      var self = this;\n      self.DOM.el.classList.add('ahbg-details--open');\n      self.DOM.el.scrollTop = 0;\n      self.productBg = data.productBg;\n      self.productImg = data.productImg;\n      if (typeof data.index === 'number') self.currentIndex = data.index;\n\n      gsap.set([self.productBg, self.productImg], { autoAlpha: 0 });\n      gsap.set([self.DOM.bgDown, self.DOM.img], { autoAlpha: 1 });\n\n      var bgState = Flip.getState(self.DOM.bgDown);\n      Flip.fit(self.DOM.bgDown, self.productBg, { scale: true });\n      Flip.to(bgState, { duration: 0.25, ease: 'sine', delay: 0.12, scale: true });\n\n      var imgState = Flip.getState(self.DOM.img);\n      Flip.fit(self.DOM.img, self.productImg, { scale: true });\n      Flip.to(imgState, {\n        duration: 0.8, ease: 'elastic', delay: 0.06, scale: true, zIndex: 1,\n        onComplete: function () { self.isAnimating = false; }\n      });\n\n      gsap.fromTo(\n        [self.DOM.title, self.DOM.description, self.DOM.cta],\n        { y: 50, opacity: 0, scale: 1 },\n        { duration: 0.6, ease: 'power4', stagger: 0.06, y: 0, opacity: 1, scale: 1 }\n      );\n      gsap.to(self.DOM.bgUp, { duration: 0.1, opacity: 1 });\n      gsap.to(self.DOM.close, { duration: 0.35, ease: 'power2.out', delay: 0.2, opacity: 1, scale: 1 });\n    };\n\n    Details.prototype.close = function () {\n      if (this.isAnimating) return;\n      this.isAnimating = true;\n      var self = this;\n      self.DOM.el.classList.remove('ahbg-details--open');\n\n      gsap.to(self.DOM.close, { duration: 0.2, ease: 'power2.in', opacity: 0, scale: 0 });\n      gsap.to(self.DOM.bgUp, { duration: 0.1, opacity: 0 });\n      gsap.to([self.DOM.title, self.DOM.description, self.DOM.cta], {\n        duration: 0.02, opacity: 0\n      });\n\n      gsap.set([self.productBg, self.productImg], { autoAlpha: 1 });\n      gsap.set([self.DOM.bgDown, self.DOM.img], { autoAlpha: 0 });\n\n      var bgState = Flip.getState(self.productBg);\n      Flip.fit(self.productBg, self.DOM.bgDown, { scale: true });\n      Flip.to(bgState, { duration: 0.25, ease: 'sine', scale: true, zIndex: 1 });\n\n      var imgState = Flip.getState(self.productImg);\n      Flip.fit(self.productImg, self.DOM.img, { scale: true });\n      Flip.to(imgState, {\n        duration: 0.25, ease: 'sine', scale: true, zIndex: 2,\n        onComplete: function () { self.isAnimating = false; }\n      });\n    };\n\n    Details.prototype.navigate = function (dir) {\n      if (this.isAnimating || !this.items || this.items.length < 2) return;\n      this.isAnimating = true;\n      var self = this;\n      var len = self.items.length;\n      var newIndex = ((self.currentIndex + dir) % len + len) % len;\n      var prev = self.items[self.currentIndex];\n      var next = self.items[newIndex];\n\n      var offset = 60 * dir;\n\n      gsap.to([self.DOM.img, self.DOM.title, self.DOM.description, self.DOM.cta], {\n        duration: 0.22, ease: 'power2.in', opacity: 0, x: -offset,\n        onComplete: function () {\n          \/\/ swap content\n          self.DOM.title.innerHTML = next.info.title;\n          self.DOM.price.innerHTML = next.info.price;\n          self.DOM.description.innerHTML = next.info.description;\n          self.DOM.cta.href = next.info.url || '#';\n\n          var swapImg = function () {\n            \/\/ restore previous item visibility in grid, hide new one\n            gsap.set([prev.bg, prev.img], { autoAlpha: 1 });\n            gsap.set([next.bg, next.img], { autoAlpha: 0 });\n            self.productBg = next.bg;\n            self.productImg = next.img;\n            self.currentIndex = newIndex;\n\n            gsap.fromTo(\n              [self.DOM.img, self.DOM.title, self.DOM.description, self.DOM.cta],\n              { opacity: 0, x: offset },\n              {\n                duration: 0.35, ease: 'power2.out', stagger: 0.03,\n                opacity: 1, x: 0,\n                onComplete: function () { self.isAnimating = false; }\n              }\n            );\n          };\n\n          if (self.DOM.img.src !== next.info.img) {\n            self.DOM.img.onload = swapImg;\n            self.DOM.img.onerror = swapImg;\n            self.DOM.img.src = next.info.img;\n          } else {\n            swapImg();\n          }\n        }\n      });\n    };\n\n    function getRealSrc(img) {\n      \/\/ Handle WP Rocket \/ LazyLoad plugins that replace src with a placeholder\n      var lazy = img.getAttribute('data-lazy-src') ||\n                 img.getAttribute('data-src') ||\n                 img.getAttribute('data-original') ||\n                 img.getAttribute('data-lazy-srcset');\n      if (lazy && lazy.indexOf('data:image') !== 0) return lazy;\n      var src = img.currentSrc || img.src;\n      \/\/ If src is still a placeholder SVG, try once more on data attrs\n      if (src && src.indexOf('data:image') === 0) {\n        var retry = img.getAttribute('data-lazy-src') || img.getAttribute('data-src');\n        if (retry) return retry;\n      }\n      return src;\n    }\n\n    function Item(el, details, index) {\n      this.details = details;\n      this.index = index;\n      this.product = el.querySelector('.ahbg-product');\n      this.bg = this.product.querySelector('.ahbg-product__bg');\n      this.img = this.product.querySelector('.ahbg-product__img');\n      this.info = {\n        img: getRealSrc(this.img),\n        title: this.product.querySelector('.ahbg-product__title').innerHTML,\n        subtitle: this.product.querySelector('.ahbg-product__subtitle').innerHTML,\n        description: this.product.querySelector('.ahbg-product__description').innerHTML,\n        price: this.product.querySelector('.ahbg-product__price').innerHTML,\n        url: this.product.getAttribute('data-url') || '#'\n      };\n      var self = this;\n      this.product.addEventListener('click', function () { self.open(); });\n    }\n    Item.prototype.open = function () {\n      var self = this;\n      \/\/ Re-read src at click time \u2014 lazy loaders may have swapped it in\n      self.info.img = getRealSrc(self.img);\n      function go() {\n        self.details.fill(self.info).then(function () {\n          self.details.open({ productBg: self.bg, productImg: self.img, index: self.index });\n        });\n      }\n      if (self.img.complete && self.img.naturalWidth > 0) {\n        go();\n      } else {\n        self.img.addEventListener('load', go, { once: true });\n        self.img.addEventListener('error', go, { once: true });\n      }\n    };\n\n    var details = new Details();\n    var itemEls = wrap.querySelectorAll('.ahbg-item');\n    var items = [];\n    for (var i = 0; i < itemEls.length; i++) { items.push(new Item(itemEls[i], details, i)); }\n    details.setItems(items);\n\n    \/* ----------------------------------------------------------\n       Card parallax \u2014 two axes combined into a single transform:\n\n         X (reveal):  each bag enters from the nearest browser edge\n                      and reaches its final position (x=0) at the\n                      moment its centre crosses the 50% viewport\n                      line. Left-half columns come from -vw, right-\n                      half come from +vw. On a 1-col grid (mobile)\n                      bags alternate sides by index.\n\n         Y (parallax): subtle vertical drift continues indefinitely\n                      as the card moves through the viewport. Middle\n                      column (3-col layouts only) moves opposite so\n                      neighbours lag against each other and the\n                      existing zigzag reads as momentum.\n\n       Paused while the details overlay is animating or open so\n       Flip fully owns the measurements in those phases.\n       ---------------------------------------------------------- *\/\n    var products = wrap.querySelectorAll('.ahbg-product');\n    var prods = Array.prototype.slice.call(products);\n    var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n    if (!(mqReduce && mqReduce.matches) && prods.length) {\n      var vh = window.innerHeight || document.documentElement.clientHeight;\n      var rafId = null;\n\n      function parallaxPaused() {\n        return details.isAnimating ||\n               details.DOM.el.classList.contains('ahbg-details--open');\n      }\n\n      function getCols() {\n        var v = parseInt(getComputedStyle(wrap).getPropertyValue('--ahbg-cols'), 10);\n        return v > 0 ? v : 3;\n      }\n\n      function applyParallax() {\n        rafId = null;\n        if (parallaxPaused()) return;\n        var cols = getCols();\n        var half = Math.ceil(cols \/ 2);\n        for (var k = 0; k < prods.length; k++) {\n          var rect = prods[k].getBoundingClientRect();\n          var centerY = rect.top + rect.height \/ 2;\n          var col = k % cols;\n\n          \/* Y \u2014 subtle vertical parallax, clamped so cards far above\n             the viewport don't translate ever-further downward and\n             bleed into the next widget. *\/\n          var yp = (vh \/ 2 - centerY) \/ vh;\n          if (yp > 1)  yp = 1;\n          if (yp < -1) yp = -1;\n          var ySpeed = (cols === 3 && col === 1) ? -0.08 : 0.06;\n          var y = yp * vh * ySpeed;\n\n          \/* X \u2014 short eased reveal. Each bag drifts 300px in from the\n             nearest edge as its centre rises from the viewport bottom\n             toward the 50% line; past that it holds at its final\n             position. Cubic ease-out makes the approach feel settled\n             instead of whippy. *\/\n          var xp = (vh - centerY) \/ (vh \/ 2);\n          if (xp < 0) xp = 0; else if (xp > 1) xp = 1;\n          var eased = 1 - Math.pow(1 - xp, 3);\n          var fromLeft = (cols === 1) ? (k % 2 === 0) : (col < half);\n          var x = (fromLeft ? -300 : 300) * (1 - eased);\n\n          prods[k].style.transform =\n            'translate3d(' + x.toFixed(2) + 'px,' + y.toFixed(2) + 'px,0)';\n        }\n      }\n\n      function onScroll() {\n        if (rafId === null) rafId = window.requestAnimationFrame(applyParallax);\n      }\n      window.addEventListener('scroll', onScroll, { passive: true });\n      window.addEventListener('resize', function () {\n        vh = window.innerHeight || document.documentElement.clientHeight;\n        onScroll();\n      }, { passive: true });\n      applyParallax();\n    }\n  }\n\n  \/* wait for GSAP\/Flip CDN *\/\n  var tries = 0;\n  (function waitForGSAP() {\n    if (typeof gsap !== 'undefined' && typeof Flip !== 'undefined') { init(); return; }\n    if (tries++ > 40) return; \/* ~4s failsafe *\/\n    setTimeout(waitForGSAP, 100);\n  })();\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c9a39c e-con-full e-flex e-con e-parent\" data-id=\"9c9a39c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7b00cfc elementor-widget elementor-widget-html\" data-id=\"7b00cfc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Widget 6 \u00b7 SERVICES (image-first stack)\n     Order, top \u2192 bottom:\n       1. Hero image \u2014 full content-width (1200px cap), not\n          full-bleed, rounded, subtle parallax drift.\n       2. Two-column text block\n            \u00b7 Left  \u2014 title + CTA\n            \u00b7 Right \u2014 intro paragraph\n          Stays 2-col on tablet (same as desktop); collapses to\n          1-col on mobile.\n       3. Row of 4 white service cards (icon + title + arrow),\n          each a link to \/services\/ \u2014 later to be swapped for\n          anchored deep-links on the page.\n     Only one outbound URL today: the CTA + the 4 card links all\n     point to the same \/services\/ page.\n     Unique CSS prefix `.ath-srv-*`.\n     ============================================================= -->\n<style>\n.ath-srv,\n.ath-srv *,\n.ath-srv *::before,\n.ath-srv *::after { box-sizing: border-box; }\n\n.ath-srv {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  \/* Top padding gives the section a bit of breathing room above.\n     Bottom padding is 0 so the blue surface tiles flush into the\n     next widget below with no gap. *\/\n  padding: clamp(80px, 10vw, 140px) clamp(1rem, 4vw, 3rem) 0;\n  background: #459fff;\n  color: #fff;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n.ath-srv__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* ------------------------------------------------------------\n   1 \u00b7 Hero image \u2014 spans the full content width (1200px cap)\n   ------------------------------------------------------------ *\/\n.ath-srv__hero {\n  position: relative;\n  width: 100%;\n  margin: 0 0 clamp(3em, 6vw, 5em);\n  aspect-ratio: 16 \/ 9;\n  border-radius: 28px;\n  overflow: hidden;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.2), 0 8px 18px rgba(0,0,0,0.08);\n}\n.ath-srv__hero-img {\n  position: absolute;\n  top: -12%;\n  left: 0;\n  width: 100%;\n  height: 124%;\n  object-fit: cover;\n  will-change: transform;\n  max-width: none !important;\n  height: 124% !important;\n}\n\n\/* ------------------------------------------------------------\n   2 \u00b7 Text block \u2014 title + CTA on the left, paragraph on the right\n      Stays 2-col on tablet (only collapses on mobile).\n   ------------------------------------------------------------ *\/\n.ath-srv__content {\n  display: grid;\n  grid-template-columns: minmax(260px, 5fr) 7fr;\n  gap: clamp(2em, 6vw, 5em);\n  align-items: start;\n}\n\n.ath-srv__head { color: #fff; }\n\n.ath-srv__title {\n  \/* Same 3rem \/ 800 as `.ath-feat__title`. Both set !important so\n     Konte's global h2\/h3 typography can't override. Line-height\n     locked to 51px so the two-line wrap stays visually tight.\n     Bottom margin reduced by 20px so the CTA sits closer. *\/\n  margin: 0 0 calc(1em - 20px);\n  font-size: 3rem !important;\n  font-weight: 800 !important;\n  line-height: 51px !important;\n  letter-spacing: -0.005em;\n  color: #fff;\n}\n\n.ath-srv__text {\n  margin: 0;\n  font-size: clamp(1rem, 1.2vw, 1.08rem);\n  line-height: 1.75;\n  color: rgba(255,255,255,0.92);\n  max-width: 62ch;\n}\n\n.ath-srv__cta {\n  display: inline-block;\n  padding: 1em 2em;\n  background: #fff;\n  color: #459fff;\n  font-size: 0.72rem;\n  letter-spacing: 0.22em;\n  font-weight: 700;\n  border-radius: 999px;\n  text-decoration: none;\n  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;\n}\n.ath-srv__cta:hover,\n.ath-srv__cta:focus-visible {\n  background: #000;\n  color: #fff;\n  text-decoration: none;\n  transform: translateY(-1px);\n}\n.ath-srv__cta:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n\/* ------------------------------------------------------------\n   3 \u00b7 Card row \u2014 4 white service tiles (each one a link)\n   ------------------------------------------------------------ *\/\n.ath-srv__cards {\n  margin: clamp(60px, 8vw, 100px) 0 0;\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: clamp(1em, 2vw, 1.5em);\n}\n\n.ath-srv__card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  min-height: 260px;\n  padding: clamp(1.4em, 2.4vw, 2em);\n  background: #fff;\n  color: #1a1a1a;\n  border-radius: 22px;\n  box-shadow: 0 18px 40px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.05);\n  text-decoration: none;\n  \/* Pre-reveal state \u2014 fade + rise, staggered via --i. *\/\n  opacity: 0;\n  transform: translateY(24px);\n  transition:\n    opacity 0.6s cubic-bezier(.22,.61,.36,1),\n    transform 0.6s cubic-bezier(.22,.61,.36,1),\n    box-shadow 0.25s ease;\n  transition-delay: calc(var(--i, 0) * 90ms);\n}\n.ath-srv__card.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n.ath-srv__card:hover,\n.ath-srv__card:focus-visible {\n  color: #1a1a1a;\n  text-decoration: none;\n  transform: translateY(-4px);\n  box-shadow: 0 24px 52px rgba(0,0,0,0.18), 0 6px 14px rgba(0,0,0,0.08);\n}\n.ath-srv__card:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 4px;\n}\n\n.ath-srv__card-icon {\n  display: block;\n  width: clamp(80px, 8vw, 104px);\n  height: auto;\n  margin: 0 0 1.4em;\n  max-width: none !important;\n  \/* Native colours \u2014 multi-colour badge (white circle, blue ring,\n     pink line-work). No filter. *\/\n}\n\n.ath-srv__card-title {\n  margin: 0;\n  font-size: 1.1rem !important;\n  font-weight: 800 !important;\n  line-height: 1.3;\n  color: #1a1a1a;\n}\n\n.ath-srv__card-arrow {\n  align-self: flex-end;\n  display: block;\n  width: 26px;\n  height: 26px;\n  margin-top: auto;\n  color: #459fff;\n  transition: transform 0.25s ease;\n}\n.ath-srv__card:hover .ath-srv__card-arrow {\n  transform: translateX(4px);\n}\n\n\/* ------------------------------------------------------------\n   Responsive\n     Tablet (\u22641024px) \u2014 keeps the 2-col text block; card row\n       drops from 4-up to 2-up; title shrinks to 44px so that\n       \"Let's create\" still fits on one line in the narrow left\n       column (otherwise it wraps and the title becomes 3 lines\n       between ~768\u2013896px).\n     Mobile (\u2264767px)  \u2014 text block collapses to 1-col, hero gets\n       taller aspect, cards get smaller.\n   ------------------------------------------------------------ *\/\n@media (max-width: 64em) {\n  .ath-srv__title { font-size: 44px !important; line-height: 1.1 !important; }\n  .ath-srv__cards { grid-template-columns: repeat(2, 1fr); gap: 1em; }\n  .ath-srv__card { min-height: 220px; }\n}\n@media (max-width: 767px) {\n  .ath-srv__content {\n    grid-template-columns: 1fr;\n    gap: 1.2em;\n  }\n  \/* Let the paragraph wrap to the full content-area width on mobile\n     (desktop \/ tablet still cap it at 62ch for readability). *\/\n  .ath-srv__text { max-width: none; }\n  .ath-srv__hero { aspect-ratio: 4 \/ 3; border-radius: 22px; }\n  .ath-srv__card { min-height: 190px; padding: 1.3em; border-radius: 18px; }\n  .ath-srv__card-icon { width: 72px; margin-bottom: 1em; }\n  .ath-srv__card-title { font-size: 1rem !important; }\n}\n\n\/* Below 350px the longer Greek titles (\"\u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2\", \"\u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2\")\n   crowd the card. Shrink the icon and font so the title has breathing\n   room from the card edges, keep comfortable padding. *\/\n@media (max-width: 350px) {\n  .ath-srv__card { padding: 1em; min-height: 170px; border-radius: 16px; }\n  .ath-srv__card-icon { width: 52px; margin-bottom: 0.8em; }\n  .ath-srv__card-title { font-size: 0.85rem !important; }\n  .ath-srv__cards { gap: 0.8em; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ath-srv__card {\n    opacity: 1 !important;\n    transform: none !important;\n    transition: none !important;\n  }\n  .ath-srv__hero-img { transform: none !important; }\n}\n<\/style>\n\n<section class=\"ath-srv\" data-ath-srv-parallax>\n  <div class=\"ath-srv__inner\">\n\n    <!-- 1 \u00b7 Full-width hero image -->\n    <div class=\"ath-srv__hero\" aria-hidden=\"true\">\n      <img decoding=\"async\" class=\"ath-srv__hero-img\"\n           src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/07_homepage_services.jpg.webp\"\n           alt=\"\"\n           data-srv-parallax=\"0.06\">\n    <\/div>\n\n    <!-- 2 \u00b7 Text block: title + CTA on left, paragraph on right -->\n    <div class=\"ath-srv__content\">\n      <div class=\"ath-srv__head\">\n        <h2 class=\"ath-srv__title\">\u0391\u03c2 \u03c6\u03c4\u03b9\u03ac\u03be\u03bf\u03c5\u03bc\u03b5<br>\u03bc\u03b1\u03b6\u03af<\/h2>\n        <a class=\"ath-srv__cta\" href=\"https:\/\/atheart.gr\/el\/services\/\">\u039f\u0399 \u03a5\u03a0\u0397\u03a1\u0395\u03a3\u0399\u0395\u03a3 \u039c\u0391\u03a3<\/a>\n      <\/div>\n      <p class=\"ath-srv__text\">\n        \u03a0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03bf\u03c5\u03bc\u03b5 \u03ad\u03bd\u03b1 \u03c6\u03ac\u03c3\u03bc\u03b1 \u03b1\u03c0\u03bf\u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd \u03c5\u03c0\u03b7\u03c1\u03b5\u03c3\u03b9\u03ce\u03bd\n        \u03c0\u03c1\u03bf\u03c3\u03b1\u03c1\u03bc\u03bf\u03c3\u03bc\u03ad\u03bd\u03c9\u03bd \u03c3\u03c4\u03b9\u03c2 \u03b1\u03bd\u03ac\u03b3\u03ba\u03b5\u03c2 \u03c3\u03b1\u03c2. \u0395\u03af\u03c4\u03b5 \u03b8\u03ad\u03bb\u03b5\u03c4\u03b5 \u03bd\u03b1 \u03c0\u03c1\u03bf\u03b2\u03ac\u03bb\u03b5\u03c4\u03b5\n        \u03c4\u03b1 \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1 \u03c4\u03b7\u03c2 ATHEART \u03c3\u03c4\u03bf \u03ba\u03b1\u03c4\u03ac\u03c3\u03c4\u03b7\u03bc\u03ac \u03c3\u03b1\u03c2, \u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03ae\u03c3\u03b5\u03c4\u03b5\n        custom \u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1, \u03ae \u03bd\u03b1 \u03b1\u03bd\u03b1\u03c0\u03c4\u03cd\u03be\u03b5\u03c4\u03b5 \u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03b1\u03c0\u03bf\u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2\n        \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u03bb\u03cd\u03c3\u03b5\u03b9\u03c2, \u03c3\u03b1\u03c2 \u03c0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03bf\u03c5\u03bc\u03b5 \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc 20 \u03c7\u03c1\u03cc\u03bd\u03b9\u03b1\n        \u03b5\u03bc\u03c0\u03b5\u03b9\u03c1\u03af\u03b1\u03c2 \u03c3\u03c4\u03bf\u03bd \u03c3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03cc.\n      <\/p>\n    <\/div>\n\n    <!-- 3 \u00b7 4 service cards \u2014 each card is a link.\n         All currently point to \/services\/; replace each href with\n         the anchored deep-link to that service's point on the page\n         once they exist. -->\n    <div class=\"ath-srv__cards\">\n      <a class=\"ath-srv__card\" style=\"--i:0\" href=\"https:\/\/atheart.gr\/el\/services\/\">\n        <img decoding=\"async\" class=\"ath-srv__card-icon\"\n             src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_01_retail-new1.svg\"\n             alt=\"\" aria-hidden=\"true\">\n        <h3 class=\"ath-srv__card-title\">\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1<br>\u03c7\u03bf\u03bd\u03b4\u03c1\u03b9\u03ba\u03ae\u03c2<\/h3>\n        <svg class=\"ath-srv__card-arrow\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n      <\/a>\n\n      <a class=\"ath-srv__card\" style=\"--i:1\" href=\"https:\/\/atheart.gr\/el\/services\/\">\n        <img decoding=\"async\" class=\"ath-srv__card-icon\"\n             src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_02_design.svg\"\n             alt=\"\" aria-hidden=\"true\">\n        <h3 class=\"ath-srv__card-title\">\u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2<br>\u03bb\u03cd\u03c3\u03b5\u03b9\u03c2<\/h3>\n        <svg class=\"ath-srv__card-arrow\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n      <\/a>\n\n      <a class=\"ath-srv__card\" style=\"--i:2\" href=\"https:\/\/atheart.gr\/el\/services\/\">\n        <img decoding=\"async\" class=\"ath-srv__card-icon\"\n             src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_03_custom.svg\"\n             alt=\"\" aria-hidden=\"true\">\n        <h3 class=\"ath-srv__card-title\">Custom<br>\u03b1\u03be\u03b5\u03c3\u03bf\u03c5\u03ac\u03c1<\/h3>\n        <svg class=\"ath-srv__card-arrow\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n      <\/a>\n\n      <a class=\"ath-srv__card\" style=\"--i:3\" href=\"https:\/\/atheart.gr\/el\/services\/\">\n        <img decoding=\"async\" class=\"ath-srv__card-icon\"\n             src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/09\/icon_04_services.svg\"\n             alt=\"\" aria-hidden=\"true\">\n        <h3 class=\"ath-srv__card-title\">\u03a5\u03c0\u03b7\u03c1\u03b5\u03c3\u03af\u03b5\u03c2<br>\u03b3\u03c1\u03b1\u03c6\u03b9\u03c3\u03c4\u03b9\u03ba\u03ae\u03c2<\/h3>\n        <svg class=\"ath-srv__card-arrow\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var section = document.querySelector('[data-ath-srv-parallax]');\n  if (!section) return;\n\n  var mqReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n\n  \/* Staggered card reveal *\/\n  var cards = section.querySelectorAll('.ath-srv__card');\n  if (cards.length) {\n    if ((mqReduce && mqReduce.matches) || !('IntersectionObserver' in window)) {\n      cards.forEach(function (c) { c.classList.add('is-visible'); });\n    } else {\n      var io = new IntersectionObserver(function (entries) {\n        entries.forEach(function (e) {\n          if (e.isIntersecting) {\n            e.target.classList.add('is-visible');\n            io.unobserve(e.target);\n          }\n        });\n      }, { rootMargin: '0px 0px -10% 0px', threshold: 0.15 });\n      cards.forEach(function (c) { io.observe(c); });\n    }\n  }\n\n  if (mqReduce && mqReduce.matches) return;\n\n  \/* Hero image parallax drift *\/\n  var imgs = section.querySelectorAll('[data-srv-parallax]');\n  if (!imgs.length) return;\n\n  var nodes = [];\n  imgs.forEach(function (img) {\n    nodes.push({\n      img: img,\n      anchor: img.parentElement,\n      speed: parseFloat(img.dataset.srvParallax) || 0\n    });\n  });\n\n  var vh = window.innerHeight || document.documentElement.clientHeight;\n  var rafId = null, inView = false;\n\n  function update() {\n    rafId = null;\n    if (!inView) return;\n    for (var i = 0; i < nodes.length; i++) {\n      var n = nodes[i];\n      var r = n.anchor.getBoundingClientRect();\n      var p = ((vh \/ 2) - (r.top + r.height \/ 2)) \/ vh;\n      n.img.style.transform = 'translate3d(0,' + (p * vh * n.speed).toFixed(2) + 'px,0)';\n    }\n  }\n  function onScroll() {\n    if (rafId === null) rafId = window.requestAnimationFrame(update);\n  }\n  function onResize() {\n    vh = window.innerHeight || document.documentElement.clientHeight;\n    onScroll();\n  }\n\n  if ('IntersectionObserver' in window) {\n    new IntersectionObserver(function (entries) {\n      inView = entries[0].isIntersecting;\n      if (inView) onScroll();\n    }, { rootMargin: '25% 0px 25% 0px' }).observe(section);\n  } else {\n    inView = true;\n  }\n\n  window.addEventListener('scroll', onScroll, { passive: true });\n  window.addEventListener('resize', onResize, { passive: true });\n  inView = true;\n  update();\n})();\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb6db5d e-con-full e-flex e-con e-parent\" data-id=\"fb6db5d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2620a7f elementor-widget elementor-widget-html\" data-id=\"2620a7f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =============================================================\n     ATHEART \u2014 Widget 7 \u00b7 CUTOUT photo band\n     Full-bleed photo sitting on the blue surface, same rhythm as\n     the Made-in-Athens widget but without the overlaid badge.\n\n     Source JPG: 3840 \u00d7 1920 (retina 2\u00d7). Rendered at a fixed CSS\n     width so the image keeps the same physical size across desktop\n     and tablet, cropped L\/R on narrower viewports, scaled up past\n     1920px. Mobile drops to a smaller fixed size.\n\n     Unique CSS prefix `.ath-cut-*`.\n     ============================================================= -->\n<style>\n.ath-cut,\n.ath-cut *,\n.ath-cut *::before,\n.ath-cut *::after { box-sizing: border-box; }\n\n.ath-cut {\n  position: relative;\n  width: 100vw;\n  margin-left:  calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  background: #459fff;\n  overflow: hidden;\n  border: 0;\n  font-family: \"Open Sans\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n\/* Frame has no explicit height \u2014 it inherits from the photo's own\n   rendered height (photo is in flow, see below), so the section\n   always ends exactly where the image ends. `contain: paint` adds\n   strict clipping for iOS Safari. *\/\n.ath-cut__frame {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  contain: paint;\n  background: transparent;\n}\n\n\/* Photo sizing:\n     \u2013 `width: max(1920px, 100vw)` keeps the image at a fixed 1920\n       CSS-px width from desktop through tablet; on viewports wider\n       than 1920 it scales up to fill.\n     \u2013 `max-width \/ height !important` beats the global WordPress \/\n       Elementor \/ Konte `img { max-width: 100%; height: auto }` rule\n       that would otherwise clamp the width back to the viewport.\n     \u2013 `left: 50%` + `translateX(-50%)` centres the oversized image\n       inside the frame; `overflow: hidden` on the frame crops L\/R.\n     \u2013 The `filter \/ opacity \/ blend-mode \/ transition \/ animation \/\n       image-rendering` resets neutralise lazy-load plugins and any\n       theme image filter that would otherwise tint the sky. *\/\n.ath-cut__photo {\n  display: block;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n  width: max(1920px, 100vw);\n  max-width: none !important;\n  height: auto !important;\n  user-select: none;\n  pointer-events: none;\n  filter: none !important;\n  opacity: 1 !important;\n  mix-blend-mode: normal !important;\n  transition: none !important;\n  animation: none !important;\n  image-rendering: auto !important;\n}\n\n\/* Mobile (\u2264767px) \u2014 photo locked at a smaller fixed width. *\/\n@media (max-width: 767px) {\n  .ath-cut__photo { width: 1089px; }\n}\n<\/style>\n\n<section class=\"ath-cut\">\n  <div class=\"ath-cut__frame\" role=\"img\" aria-label=\"ATHEART cutout\">\n    <img class=\"ath-cut__photo\"\n         src=\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/TREE_ATHEART_RETINA.jpg\"\n         alt=\"\"\n         aria-hidden=\"true\"\n         loading=\"eager\"\n         decoding=\"sync\"\n         fetchpriority=\"high\">\n  <\/div>\n<\/section>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Athens at Heart View More ATHEART \u0391\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03b5\u03c2 \u03c4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03b1\u03b8\u03b7\u03bc\u03b5\u03c1\u03b9\u03bd\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 \u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1.\u03a6\u03c4\u03b9\u03b1\u03b3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03bc\u03ad\u03c1\u03b1. \u0397 ATHEART \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc studio \u03bc\u03b5 \u03ad\u03b4\u03c1\u03b1 \u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1, \u03c0\u03bf\u03c5 \u03c0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03b5\u03b9 \u03bc\u03b9\u03b1&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-30084","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Homepage - ATHEART online shop<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atheart.gr\/el\/\" \/>\n<meta property=\"og:locale\" content=\"el_GR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Homepage - ATHEART online shop\" \/>\n<meta property=\"og:description\" content=\"Athens at Heart View More ATHEART \u0391\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03b5\u03c2 \u03c4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03b1\u03b8\u03b7\u03bc\u03b5\u03c1\u03b9\u03bd\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 \u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1.\u03a6\u03c4\u03b9\u03b1\u03b3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03bc\u03ad\u03c1\u03b1. \u0397 ATHEART \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc studio \u03bc\u03b5 \u03ad\u03b4\u03c1\u03b1 \u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1, \u03c0\u03bf\u03c5 \u03c0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03b5\u03b9 \u03bc\u03b9\u03b1&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atheart.gr\/el\/\" \/>\n<meta property=\"og:site_name\" content=\"ATHEART online shop\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-26T14:53:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/12\/1200x675_atheart_SEO_social-1024x576.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/12\/1200x675_atheart_SEO_social-1024x576.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"\u0395\u03ba\u03c4\u03b9\u03bc\u03ce\u03bc\u03b5\u03bd\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b1\u03bd\u03ac\u03b3\u03bd\u03c9\u03c3\u03b7\u03c2\" \/>\n\t<meta name=\"twitter:data1\" content=\"20 \u03bb\u03b5\u03c0\u03c4\u03ac\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atheart.gr\/el\/\",\"url\":\"https:\/\/atheart.gr\/el\/\",\"name\":\"Homepage - ATHEART online shop\",\"isPartOf\":{\"@id\":\"https:\/\/atheart.gr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/atheart.gr\/el\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/atheart.gr\/el\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/Asset-1.svg\",\"datePublished\":\"2026-04-19T01:50:12+00:00\",\"dateModified\":\"2026-04-26T14:53:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atheart.gr\/el\/#breadcrumb\"},\"inLanguage\":\"el\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atheart.gr\/el\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"el\",\"@id\":\"https:\/\/atheart.gr\/el\/#primaryimage\",\"url\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/Asset-1.svg\",\"contentUrl\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/Asset-1.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atheart.gr\/el\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/atheart.gr\/el\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Homepage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atheart.gr\/#website\",\"url\":\"https:\/\/atheart.gr\/\",\"name\":\"ATHEART online shop\",\"description\":\"Carrying Stories, Crafting Style \u2013 A Creative Studio for Inspired Design\",\"publisher\":{\"@id\":\"https:\/\/atheart.gr\/#organization\"},\"alternateName\":\"ATHEART Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atheart.gr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"el\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atheart.gr\/#organization\",\"name\":\"ATHEART\",\"alternateName\":\"ATHEART Studio\",\"url\":\"https:\/\/atheart.gr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"el\",\"@id\":\"https:\/\/atheart.gr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2-1.png\",\"contentUrl\":\"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2-1.png\",\"width\":512,\"height\":512,\"caption\":\"ATHEART\"},\"image\":{\"@id\":\"https:\/\/atheart.gr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/atheart_official\/\",\"https:\/\/www.tiktok.com\/@atheart_official\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Homepage - ATHEART online shop","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atheart.gr\/el\/","og_locale":"el_GR","og_type":"article","og_title":"Homepage - ATHEART online shop","og_description":"Athens at Heart View More ATHEART \u0391\u03bd\u03b1\u03b4\u03b9\u03c0\u03bb\u03bf\u03cd\u03bc\u03b5\u03bd\u03b5\u03c2 \u03c4\u03c3\u03ac\u03bd\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03b1\u03b8\u03b7\u03bc\u03b5\u03c1\u03b9\u03bd\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 \u03a3\u03c7\u03b5\u03b4\u03b9\u03b1\u03c3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03c3\u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1.\u03a6\u03c4\u03b9\u03b1\u03b3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03ba\u03ac\u03b8\u03b5 \u03bc\u03ad\u03c1\u03b1. \u0397 ATHEART \u03b5\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03b9\u03ba\u03cc studio \u03bc\u03b5 \u03ad\u03b4\u03c1\u03b1 \u03c4\u03b7\u03bd \u0391\u03b8\u03ae\u03bd\u03b1, \u03c0\u03bf\u03c5 \u03c0\u03c1\u03bf\u03c3\u03c6\u03ad\u03c1\u03b5\u03b9 \u03bc\u03b9\u03b1&hellip;","og_url":"https:\/\/atheart.gr\/el\/","og_site_name":"ATHEART online shop","article_modified_time":"2026-04-26T14:53:31+00:00","og_image":[{"url":"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/12\/1200x675_atheart_SEO_social-1024x576.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/12\/1200x675_atheart_SEO_social-1024x576.jpg","twitter_misc":{"\u0395\u03ba\u03c4\u03b9\u03bc\u03ce\u03bc\u03b5\u03bd\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b1\u03bd\u03ac\u03b3\u03bd\u03c9\u03c3\u03b7\u03c2":"20 \u03bb\u03b5\u03c0\u03c4\u03ac"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/atheart.gr\/el\/","url":"https:\/\/atheart.gr\/el\/","name":"Homepage - ATHEART online shop","isPartOf":{"@id":"https:\/\/atheart.gr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/atheart.gr\/el\/#primaryimage"},"image":{"@id":"https:\/\/atheart.gr\/el\/#primaryimage"},"thumbnailUrl":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/Asset-1.svg","datePublished":"2026-04-19T01:50:12+00:00","dateModified":"2026-04-26T14:53:31+00:00","breadcrumb":{"@id":"https:\/\/atheart.gr\/el\/#breadcrumb"},"inLanguage":"el","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atheart.gr\/el\/"]}]},{"@type":"ImageObject","inLanguage":"el","@id":"https:\/\/atheart.gr\/el\/#primaryimage","url":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/Asset-1.svg","contentUrl":"https:\/\/atheart.gr\/wp-content\/uploads\/2026\/04\/Asset-1.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/atheart.gr\/el\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/atheart.gr\/el\/"},{"@type":"ListItem","position":2,"name":"Homepage"}]},{"@type":"WebSite","@id":"https:\/\/atheart.gr\/#website","url":"https:\/\/atheart.gr\/","name":"ATHEART online shop","description":"Carrying Stories, Crafting Style \u2013 A Creative Studio for Inspired Design","publisher":{"@id":"https:\/\/atheart.gr\/#organization"},"alternateName":"ATHEART Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atheart.gr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"el"},{"@type":"Organization","@id":"https:\/\/atheart.gr\/#organization","name":"ATHEART","alternateName":"ATHEART Studio","url":"https:\/\/atheart.gr\/","logo":{"@type":"ImageObject","inLanguage":"el","@id":"https:\/\/atheart.gr\/#\/schema\/logo\/image\/","url":"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2-1.png","contentUrl":"https:\/\/atheart.gr\/wp-content\/uploads\/2024\/07\/cropped-fav2-1.png","width":512,"height":512,"caption":"ATHEART"},"image":{"@id":"https:\/\/atheart.gr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/atheart_official\/","https:\/\/www.tiktok.com\/@atheart_official"]}]}},"_links":{"self":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages\/30084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/comments?post=30084"}],"version-history":[{"count":36,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages\/30084\/revisions"}],"predecessor-version":[{"id":30153,"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/pages\/30084\/revisions\/30153"}],"wp:attachment":[{"href":"https:\/\/atheart.gr\/el\/wp-json\/wp\/v2\/media?parent=30084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}