/* top_bar.css */

/* Prevent horizontal scroll */
html, body { overflow-x: hidden; }

/* Responsive variables (top bar only) */
:root {
  --dw: 1440;
  --h-bar: calc(68/var(--dw)*100vw);

  /* Bag drawer */
  --bag-w: clamp(320px, 33vw, 486px);
  --bag-pad: 31px;
  --bag-inner-w: calc(var(--bag-w) - (var(--bag-pad) * 2));
}

/* Top Bar */
.top-bar {
  position: relative;
  width: 100%;
  height: var(--h-bar);
  overflow: hidden;
}
.top-bar .bg {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: #778A73; /* green bar */
}

/* Search input */
.search-input {
  position: absolute;
  left: calc(968/var(--dw)*100vw);
  top:  calc(11/var(--dw)*100vw);
  width: calc(245/var(--dw)*100vw);
  height: calc(46/var(--dw)*100vw);
  padding: calc(8/var(--dw)*100vw);
  border: 1px solid #ccc;
  border-radius: calc(10/var(--dw)*100vw);
  font-size: calc(16/var(--dw)*100vw);
  z-index: 10;
}

/* Icons */
.search-icon {
  position: absolute;
  left: calc(1230/var(--dw)*100vw);
  top:  calc(15.27/var(--dw)*100vw);
  width: 49.4px; height: 44.382px;
}
.search-icon img {
  width: 100%; height: 100%;
  filter: brightness(0) invert(1);
}

/* Bag icon + overlaid count */
.bag-icon {
  position: absolute;
  left: calc(1317.27/var(--dw)*100vw);
  top:  calc(14.55/var(--dw)*100vw);
  width: calc(37.82/var(--dw)*100vw);
  height: calc(42.55/var(--dw)*100vw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bag-img {
  width: 100%; height: 100%;
  filter: brightness(0) invert(1);
  pointer-events: none;
  transform-origin: 50% 65%;
}

/* Wrapper permanently offsets the number into the bag body */
.bag-count-wrap {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(12%);
  transform-origin: 50% 50%;
}
.bag-count {
  font-weight: 700;
  font-size: calc(16/var(--dw)*100vw);
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,.35);
  pointer-events: none;
}

/* --- Shake animations: ROTATION ONLY --- */
@keyframes bag-rotate {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-8deg); }
  40%  { transform: rotate(8deg); }
  60%  { transform: rotate(-6deg); }
  80%  { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}
@keyframes bag-rotate-offset {
  0%   { transform: translateY(12%) rotate(0deg); }
  20%  { transform: translateY(12%) rotate(-8deg); }
  40%  { transform: translateY(12%) rotate(8deg); }
  60%  { transform: translateY(12%) rotate(-6deg); }
  80%  { transform: translateY(12%) rotate(6deg); }
  100% { transform: translateY(12%) rotate(0deg); }
}

/* Apply the appropriate rotation to each element */
.bag-icon:hover .bag-img,
.bag-icon:focus-visible .bag-img {
  animation: bag-rotate 0.6s ease-in-out both;
}
.bag-icon:hover .bag-count-wrap,
.bag-icon:focus-visible .bag-count-wrap {
  animation: bag-rotate-offset 0.6s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
  .bag-icon:hover .bag-img,
  .bag-icon:focus-visible .bag-img,
  .bag-icon:hover .bag-count-wrap,
  .bag-icon:focus-visible .bag-count-wrap {
    animation: none;
  }
}

/* Main top-left text */
.signin-text {
  position: absolute;
  left: calc(64/var(--dw)*100vw);
  top:  calc(20/var(--dw)*100vw);
  color: white;
  font-size: calc(20/var(--dw)*100vw);
  font-weight: 400;
  text-decoration: none;
}

/* Reuse the dropdown’s underline animation */
.u-underline {
  display: inline-block;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .5s ease;
}
.u-underline:hover { background-size: 100% 1px; }

/* Search dropdown */
.search-dropdown {
  position: absolute;
  left: calc(968/var(--dw)*100vw);
  top:  calc((11 + 46 + 4)/var(--dw)*100vw);
  width: calc(245/var(--dw)*100vw);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: calc(4/var(--dw)*100vw);
  max-height: calc((46 * 3)/var(--dw)*100vw);
  overflow-y: auto;
  z-index: 1001;
  display: none;
}
.search-item {
  padding: calc(8/var(--dw)*100vw);
  border-bottom: 1px solid #eee;
  font-size: calc(16/var(--dw)*100vw);
  cursor: pointer;
}
.search-item:last-child { border-bottom: none; }
.search-item.no-match { color: #888; cursor: default; }

/* -----------------------------
   ACCOUNT MENU – EXACT DESIGN
   ----------------------------- */
#account-menu.AccountMenu {
  position: absolute;
  width: 164.04px;
  height: 219px;
  z-index: 1002;
}
#account-menu .Rectangle38 {
  position: absolute;
  left: 0; top: 0;
  width: 164.04px;
  height: 219px;
  background: #ffffff;
  border: 1px solid #4E4E4E;
  box-sizing: border-box;
  pointer-events: none;
}
#account-menu .Line6,
#account-menu .Line5,
#account-menu .Line7 {
  position: absolute;
  left: 0;
  width: 164.04px;
  height: 0;
  border-top: 0.5px solid #4E4E4E;
  pointer-events: none;
}
#account-menu .Line6 { top: 58.40px; }
#account-menu .Line5 { top: 109.93px; }
#account-menu .Line7 { top: 164.04px; }

#account-menu .account-menu__item {
  position: absolute;
  left: 0;
  width: 164px;
  height: 20px;
  text-align: center;
  color: #4E4E4E;
  font-size: 20px;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}
#account-menu .MyGnsText     { top: 18px;  }
#account-menu .OrderHistory  { top: 73px;  }
#account-menu .Favourites    { top: 125px; }
#account-menu .SignOut       { top: 179px; }

#account-menu .account-menu__item:hover,
#account-menu .account-menu__item:focus {
  background: transparent;
  color: #4E4E4E;
}
.account-menu__item:hover .u-underline { background-size: 100% 1px; }
#account-menu[hidden] { display: none !important; }

@media (max-width: 640px) {
  .search-dropdown { width: 90%; left: 5%; }
}

/* ==========================
   BAG OVERLAY + DRAWER
   ========================== */
.BagOverlay {
  position: fixed;
  left: 0; right: 0;
  top: var(--h-bar);
  bottom: 0;
  background: rgba(0,0,0,.25);
  z-index: 1001;
}
.BagOverlay[hidden] { display: none !important; }

.YourBagPopUp {
  position: fixed;
  right: 0;
  top: var(--h-bar);
  width: var(--bag-w);
  height: calc(100vh - var(--h-bar));
  background: #F5F5F5;
  border-left: 0.5px solid #000;
  z-index: 1002;

  transform: translateX(100%);
  transition: transform 1s ease;
  will-change: transform;
  overflow: hidden;
}
.YourBagPopUp.open { transform: translateX(0); }
.YourBagPopUp[hidden] { display: none !important; }

.YourBagPopUp .Background {
  position: absolute; inset: 0;
  background: #F5F5F5;
  border-left: 0.5px solid #000;
  pointer-events: none;
}

.YourBagPopUp .YourBag {
  position: absolute;
  left: var(--bag-pad);
  top: 20px;
  font-size: 24px; font-weight: 400; color: #000;
}
.YourBagPopUp .CloseBtn {
  position: absolute;
  right: calc(var(--bag-pad) - 5px);
  top: 16px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.YourBagPopUp .CloseBtn img { width: 40px; height: 40px; display: block; }
.YourBagPopUp .TopRule { position: absolute; left:0; right:0; top:68px; border-top:0.5px solid #4E4E4E; }

.YourBagPopUp .HeaderLeft  { position:absolute; left:var(--bag-pad);  top:112px; font-size:24px; font-weight:300; color:#4E4E4E; }
.YourBagPopUp .HeaderRight { position:absolute; right:var(--bag-pad); top:112px; font-size:24px; font-weight:300; color:#4E4E4E; }

.BagItems {
  position: absolute;
  left: var(--bag-pad);
  top: 152px;
  width: var(--bag-inner-w);
  bottom: 240px;
  overflow: auto;
}

.ProductInBag {
  position: relative;
  width: 100%;
  height: 135px;
  margin-bottom: 20px;
}
.ProductInBag .Image {
  position: absolute; left: 0; top: 0;
  width: 135px; height: 135px; object-fit: cover; display: block;
}
.ProductInBag .Name {
  position: absolute; left: 152px; right: 80px; top: 0;
  color: #000; font-size: 16px; font-weight: 400;
  line-height: 20px; word-break: break-word; white-space: normal;
}
.ProductInBag .VariableName,
.ProductInBag .Package,
.ProductInBag .Date {
  position: absolute; left: 152px; color: #000; font-size: 16px; font-weight: 300;
  right: 80px; line-height: 20px; word-break: break-word;
}
.ProductInBag .VariableName { top: 28px; }
.ProductInBag .Date         { top: 28px; }
.ProductInBag .Package      { top: 49px; }

.ProductInBag .Price { position:absolute; right:0; top:0; color:#000; font-size:16px; font-weight:400; }

.ProductInBag[data-kind="retreat"] .Name,
.ProductInBag[data-kind="retreat"] .Date,
.ProductInBag[data-kind="retreat"] .Package {
  text-transform: capitalize;
}

.ProductInBag .QtyBoxBg { position:absolute; left:152px; top:103px; width:109px; height:32px; background:#fff; border:0.5px solid #000; pointer-events:none; }
.ProductInBag .QtyNum   { position:absolute; left:202px; top:109px; font-size:16px; color:#000; font-weight:400; }
.ProductInBag .PlusBtn, .ProductInBag .MinusBtn {
  position:absolute; top:110px; width:15px; height:15px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; background:transparent; border:0; padding:0;
}
.ProductInBag .PlusBtn  { left:234px; }
.ProductInBag .MinusBtn { left:162px; }
.ProductInBag .PlusBtn img, .ProductInBag .MinusBtn img { width:15px; height:15px; display:block; }

.ProductInBag .BinBtn { position:absolute; right:0; top:106px; width:24px; height:26px; cursor:pointer; background:transparent; border:0; padding:0; }
.ProductInBag .BinBtn img { width:24px; height:26px; display:block; }

.EstTotalLabel { position:absolute; left:var(--bag-pad); bottom:132px; font-size:24px; font-weight:300; color:#000; }
.EstTotalPrice { position:absolute; right:var(--bag-pad); bottom:132px; font-size:24px; font-weight:300; color:#000; }
.TaxText       { position:absolute; left:var(--bag-pad); right:var(--bag-pad); bottom:92px; font-size:15px; color:#000; font-weight:300; }

.CheckoutBtn {
  position:absolute; left:var(--bag-pad); right:var(--bag-pad);
  bottom:24px; height:58px; border-radius:10px;
  background:#000; color:#fff; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:400;
}

.top-bar .TopAnnouncement {
  font-size: calc(22/var(--dw)*100vw);
}

@media (max-width: 640px) {
  :root { --bag-w: 100vw; --bag-pad: 20px; }
  .YourBagPopUp .HeaderRight { right: var(--bag-pad); }
  .ProductInBag .Price { right: 0; }
}

/* ==========================================================
   PHONE LAYOUT (= 700px) CSS-only reskin, desktop untouched
   ========================================================== */
@media (max-width: 700px) {
  /* Make platform text autosize predictable with vw */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* two-tier bar: black announcement (56px) + green bar (68px) */
  :root { --phone-top: 56px; --phone-row-h: 68px; }

  .top-bar { height: calc(var(--phone-top) + var(--phone-row-h)); z-index: 1; }

  .top-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--phone-top);
    background: #000; /* black band */
    z-index: 0;
  }
  .top-bar .bg {
    top: var(--phone-top);
    height: var(--phone-row-h);
    background: #778A73;
  }

  /* Announcement: full width, white text */
  /* IMPORTANT: override inline style constraints with higher specificity + !important */
  #top-announcement,
  .top-bar .TopAnnouncement {
    display: block !important;
    left: 0 !important;
    width: 100% !important;
    top: calc(var(--phone-top) / 2);
    transform: translateY(-50%);
    color: #fff;
    text-align: center;
    pointer-events: none;
    z-index: 1;

    /* >>> BIG, RESPONSIVE, UNCLAMPED TEXT + no fixed height <<< */
    font-size: 10vw !important;       /* bump to 12vw for HUGE */
    line-height: 1.1 !important;
    height: auto !important;

    /* remove any mask/clip that could crop bigger text */
    -webkit-mask-image: none !important;
            mask-image: none !important;
    overflow: visible !important;
    white-space: nowrap; /* keep ticker behavior */
  }

  /* ensure inner track isn't constraining height */
  .TopAnnouncement .Track {
    height: 1em !important;
    align-items: center;
  }

  /* Hide desktop search on phones */
  .search-input, .search-dropdown, .search-icon { display: none !important; }

  /* SHOW the real hamburger button */
  .HamburgerBtn[hidden] { display: block !important; }
  .HamburgerBtn {
    position: absolute;
    left: 12px;
    top: calc(var(--phone-top) + (var(--phone-row-h) - 44px)/2);
    width: 44px; height: 44px;
    background: #fff;
    -webkit-mask: url("/static/svg/hamburger.svg") center/26px 26px no-repeat;
            mask: url("/static/svg/hamburger.svg") center/26px 26px no-repeat;
    transform: scale(1.1);
    transform-origin: center;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 2;
  }

  /* Centered GNS logo (exact center) */
  .top-bar::after {
    content: "";
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: calc(var(--phone-top) + (var(--phone-row-h) - 44px)/2);
    width: 120px; height: 44px;
    -webkit-mask: url("/static/svg/GNS.svg") center/contain no-repeat;
            mask: url("/static/svg/GNS.svg") center/contain no-repeat;
    background-color: #fff;
    pointer-events: none;
    z-index: 1;
  }

  /* Right-side icons: account/home + bag */
  .signin-text {
    left: auto; right: 80px;
    top: calc(var(--phone-top) + (var(--phone-row-h) - 44px)/2);
    width: 44px; height: 44px;
    color: transparent; font-size: 0; line-height: 0;
    background: none;
    z-index: 2;
    -webkit-mask: url("/static/svg/account.svg") center/24px 24px no-repeat;
            mask: url("/static/svg/account.svg") center/24px 24px no-repeat;
    background-color: #fff;
  }
  .signin-text[href="/home"] {
    -webkit-mask: url("/static/svg/home.svg") center/24px 24px no-repeat;
            mask: url("/static/svg/home.svg") center/24px 24px no-repeat;
    background-color: #fff;
  }

  .bag-icon {
    left: auto; right: 20px;
    top: calc(var(--phone-top) + (var(--phone-row-h) - 44px)/2);
    width: 44px; height: 44px;
    z-index: 2;
  }
  .bag-img   { filter: brightness(0) invert(1); transform: scale(0.9); }
  .bag-count { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.35); font-size: 19px; }

  /* Account guest menu (phones) */
  .AccountMenuGuest {
    position: absolute;
    width: 164.04px;
    background: #fff;
    border: 1px solid #4E4E4E;
    z-index: 1002;
  }
  .AccountMenuGuest a {
    display: block;
    text-align: center;
    color: #4E4E4E;
    font: 400 20px Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    text-decoration: none;
    padding: 14px 8px;
    border-top: 0.5px solid #4E4E4E;
  }
  .AccountMenuGuest a:first-child { border-top: 0; }
  .AccountMenuGuest[hidden] { display: none !important; }

  /* Hamburger left menu (phones) */
  .HamburgerMenu {
    position: absolute;
    width: 164.04px;
    background: #fff;
    border: 1px solid #4E4E4E;
    z-index: 1002;
  }
  .HamburgerMenu a {
    display: block;
    text-align: center;
    color: #4E4E4E;
    font: 400 20px Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    text-decoration: none;
    padding: 14px 8px;
    border-top: 0.5px solid #4E4E4E;
  }
  .HamburgerMenu a:first-child { border-top: 0; }
  .HamburgerMenu[hidden] { display: none !important; }

  /* --------- MOBILE-ONLY FULLSCREEN BAG DRAWER --------- */
  html.no-scroll, body.no-scroll { overflow: hidden; }

  .BagOverlay {
    top: 0;
    z-index: 9998;
  }

  .YourBagPopUp {
    top: 0;
    height: 100dvh;
    width: 100vw;
    border-left: none;
    z-index: 9999;
  }
}