#app {
    width: 100%;
}

.tabs-container {margin-top: 50px;}

/* Main Tabs */
.main-tabs-wrapper .main-tabs {display: flex; align-items: center; justify-content: center; margin-bottom: 30px; padding: 0; border: 0;}
.main-tabs-wrapper .main-tabs .main-tab-button {width: 260px; height: 55px; line-height: 26px; margin: 0; color: #243D44; font-size: 24px; font-style: normal; font-weight: 500; border: 1px solid #D3D8DA; background-color: transparent; transition: background .2s, color .2s;}
.main-tabs-wrapper .main-tabs .main-tab-button-active {color: #FFF; font-weight: 700; background-color: #243D44; border-color: #243D44;}
.main-tabs-wrapper .main-tabs .main-tab-button:nth-of-type(1) {border-radius: 0 30px 30px 0; border-left: 0;}
.main-tabs-wrapper .main-tabs .main-tab-button:nth-of-type(2) {border-radius: 30px 0 0 30px; border-right: 0;}


/* Secondary Tabs */
.secondary-tabs-wrapper {position: relative; border-bottom: 1px solid rgba(36, 61, 68, 0.20);}
.secondary-tabs-wrapper .secondary-tabs {display: flex; justify-content: space-between; align-items: center; padding: 0; width: 100%; height: 58px; border: none;}
.secondary-tabs-wrapper .secondary-tabs .secondary-tab {display: flex; align-items: center; justify-content: center; flex: 1; min-width: 130px; height: 58px; font-size: 24px; font-weight: 500; white-space: nowrap; border-bottom: solid 3px #FFF; cursor: pointer;}
.secondary-tabs-wrapper .secondary-tabs .secondary-tab-active {font-weight: 700; border-color: #243D44;}

/* Third Level Tabs */
.third-tabs-wrapper {position: relative; background-color: #E1DAD0;}
.third-tabs-wrapper .third-tabs {display: flex; justify-content: space-between; align-items: center; padding: 0; width: 100%; height: 58px; border: none;}
.third-tabs-wrapper .third-tabs .third-tab {display: flex; align-items: center; justify-content: center; flex: 1; min-width: 130px; height: 58px; font-size: 18px; font-weight: 500; white-space: nowrap; border-bottom: solid 2px transparent; cursor: pointer;}
.third-tabs-wrapper .third-tabs .third-tab-active {font-weight: 700; border-color: #243D44;}

/* Scrollable Tabs Styles */
.scrollable-tabs-container {display: flex; align-items: center; width: 100%;}
.tab-arrow {display: flex; align-items: center; justify-content: center; position: absolute; height: 100%; margin: 0; padding: 0; cursor: pointer; z-index: 10; border: 0;}
.tab-arrow-left {left: 0; padding-left: 16px; padding-right: 50px; background: linear-gradient(90deg, #FFF 11.77%, rgba(255, 255, 255, 0.00) 100%);}
.tab-arrow-right {right: 0; padding-right: 16px; padding-left: 50px; background: linear-gradient(270deg, #FFF 11.77%, rgba(255, 255, 255, 0.00) 100%);}
.scrollable-content {display: flex; width: 100%; scroll-behavior: smooth; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
.scrollable-content::-webkit-scrollbar {display: none;}
.scrollable-content > div {flex-shrink: 0;}

.p-list {padding: 50px 0;}
.p-list .container_big {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}

/* Product Item Component Styles */
.product-item {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 25px; position: relative; padding: 60px 25px; text-align: center; background: #fff; border-radius: 10px; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.10);}
.product-item > div {line-height: 100%;}
.product-tag {position: absolute; top: 15px; left: 0; font-size: 14px; font-weight: 700; padding: 4px 10px; background: #F6ABAA; border-radius: 29px 0 0 29px;}

.product-title {font-weight: 700; font-size: 26px;}
.product-subtitle {font-size: 24px;}
.product-price-block {font-size: 17px;}
.product-price-prefix {font-weight: 400; font-size: 16px;}
.product-price-amount {font-weight: 700; font-size: 16px;}
.product-desc {font-size: 16px;}

.product-button {display: flex; align-items: center; justify-content: center; width: 270px; height: 46px; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; background: #23313B; border: none; border-radius: 29px; transition: background 0.2s;}


/* Cart Dialog */
.cart-dialog-card {
    background: #fff;
    /* Removed border-radius and box-shadow that might conflict or be redundant */
    height: 100%;
    overflow-y: auto; /* Allow scrolling within the panel */
}

.cart-dialog-header {display: flex; align-items: center; justify-content: center; position: relative; height: 90px; color: #fff; font-weight: 700; font-size: 40px; text-align: center; background: #243D44; border-bottom: solid 8px #C2EAEA;}
.cart-dialog-body {height: calc(100vh - 98px); padding: 33px 37.5px; overflow: auto;}

.cart-dialog-description {margin-bottom: 30px; font-size: 16px; font-weight: 500;}
.cart-dialog-options-section {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;}
.cart-dialog-option-row {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 20px; border-radius: 10px; background-color: #FFF; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.10);}

.cart-dialog-option-content {display: flex; align-items: center; gap: 10px; flex: 1; text-align: right;}

.cart-dialog-option-title {font-size: 18px; font-weight: 500;}
.cart-dialog-option-desc {font-size: 16px; color: #545F64;}
.cart-dialog-option-sep {width: 1px; height: 11px; background-color: #D3D8DA;}
.cart-dialog-option-price {font-weight: 500; font-size: 18px;}


.cart-dialog-info-section {padding: 24px 20px; margin-top: 20px; background-color: #FFF; border-radius: 10px; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.10);}
.cart-dialog-info-section-title {line-height: 100%; margin-bottom: 18px; padding-bottom: 18px; font-size: 24px; font-weight: 700; border-bottom: solid 1px #243e4521;}
.cart-dialog-info-row {display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.cart-dialog-info-icon-wrapper {display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;}
.cart-dialog-info-text {font-size: 18px;}

/* Modal Overlay */
.modal-overlay {display: flex; align-items: flex-start; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000;}
.modal-content-wrapper {position: absolute; left: 0; top: 0; width: 100%; max-width: 640px; height: 100%; background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.1); animation: slideInLeft 0.3s ease-out forwards; transform: translateX(-100%);}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.modal-close-button {position: absolute; top: 10px; right: 15px; color: #fff; cursor: pointer; z-index: 1002;}

@media (max-width: 1199px) {
  .p-list .container_big {display: grid; grid-template-columns: repeat(2, 1fr); }
}

.info-toggle-icon {display: none;}

@media (max-width: 768px) {
  .main-tabs-wrapper .main-tabs {padding-inline: 20px;}

  .p-list .container_big {display: grid; grid-template-columns: repeat(1, 1fr); }
  .modal-content-wrapper {max-width: 100%; width: 100%; height: 100%;}
  
  .cart-dialog-header {height: 70px; font-size: 30px;}
  /* Toggle logic for mobile info section */
  .cart-dialog-info-section .cart-dialog-info-row-wrapper {display: none;}  
  .cart-dialog-info-section.is-open .cart-dialog-info-row-wrapper {display: block;}  
  .cart-dialog-info-section-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; padding-bottom: 0; cursor: pointer; border-bottom: none;}
  .cart-dialog-info-section.is-open .cart-dialog-info-section-title {margin-bottom: 18px; padding-bottom: 18px; border-bottom: solid 1px #243e4521;}  
  .info-toggle-icon {display: block; width: 12px; height: 12px; margin-left: 10px; transform: rotate(45deg); transition: transform 0.3s; border-right: 2px solid #243D44; border-bottom: 2px solid #243D44;}  
  .cart-dialog-info-section.is-open .info-toggle-icon {transform: rotate(-135deg);}
}


/* ══ Price list ═════════════════════════════════════════════════════════════
   Closed cards + the Reef/Bay toggle, from the Figma
   (file yxk5vquzoFjKrFL6kJPkZB, nodes 2580:17176/17177 mobile,
   2649:21857/21858 desktop).

   Three deliberate deviations from the Figma numbers:
   - the chevron reuses the project's CSS chevron (see .info-toggle-icon above)
     instead of the exported SVG, so nothing depends on an expiring asset URL;
   - Figma trims text boxes to cap height (text-box-trim), which CSS line-height
     cannot reproduce, so the title/subtitle gap is set to match visually (6px)
     rather than to the designer's 15px box gap;
   - between 768px and 1200px there is no frame to follow, so the cards simply
     fill the gutters instead of staying at the 320px mobile width.

   The open state is not designed yet -- .pkg-card__body is provisional.
   ────────────────────────────────────────────────────────────────────────── */


/* app.css:4130 ends a selector list with a bare `button`, so every button on the
   site inherits `padding: 0 50px; margin: 5px auto`. The padding already broke
   the quantity glyphs; the margin was adding 10px to each card, 10px to the bar,
   and -- through `margin-inline: auto` -- pulling the totals off their edge,
   which no justify-content can beat. Neutralised for this page's buttons; each
   component sets its own padding. */
.pkg-page button, .pkg-bar button, .pkg-modal button {margin: 0;}
/* re-stated above the reset's specificity */

/* 1100 (design column) + 2x20 gutters. .wrapper is a flex row, #app fills it. */
.pkg-page {width: 100%; max-width: 1140px; margin: 0 auto; padding: 50px 20px 60px;}

/* "Not sure which product suits you?" + the guide link. Stacked above the
   toggle on mobile; on desktop it becomes the white panel of the left column
   (Figma 2649:21847), with the surfboard icon above it. */
.pkg-aside {display: flex; flex-direction: column; align-items: center; gap: 25px; margin-bottom: 30px; text-align: center;}
.pkg-guide {display: flex; flex-direction: column; align-items: center; gap: 5px;}
.pkg-aside__icon {display: none;}
.pkg-guide__intro {color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 18px; line-height: 22px;}
.pkg-guide__link {display: flex; align-items: center; gap: 3px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 18px; line-height: 22px;}
.pkg-guide__link:hover {color: #243D44;}
.pkg-guide__chevron {display: block; flex-shrink: 0;}

/* ══ Hero ═══════════════════════════════════════════════════════════════════
   Figma 2580:17062 (mobile, 360x250) and 2744:21648 (desktop, 1920x500).
   Mobile veils the lower two thirds of the photo so the centred text reads;
   desktop fades the right 70% instead and puts the text against the margin. */
.pkg-hero {position: relative; height: 250px; overflow: hidden; background: #DFDFDF;}
.pkg-hero picture {display: block; height: 100%;}
.pkg-hero__img {display: block; width: 100%; height: 100%; object-fit: cover;}
.pkg-hero__fade {position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 65%, rgba(255, 255, 255, 0) 100%);}

/* Desktop only, as in the design. */
.pkg-hero__crumbs {display: none; align-items: center; gap: 5px; position: absolute; top: 36px; right: 158px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 14px; line-height: 18px;}
.pkg-hero__crumbs a {color: #243D44;}
.pkg-hero__crumb {font-family: 'Almoni Bold', sans-serif;}
/* Points left, from the home link towards the current page. */
.pkg-hero__sep {display: block; flex-shrink: 0; width: 6px; height: 6px; border-bottom: 2px solid #243D44; border-left: 2px solid #243D44; transform: rotate(45deg);}

.pkg-hero__text {display: flex; flex-direction: column; align-items: center; gap: 20px; position: absolute; top: 50%; left: 50%; width: 320px; transform: translate(-50%, -50%); color: #243D44; text-align: center;}
.pkg-hero__title {width: 100%; margin: 0; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 40px; line-height: 40px;}
.pkg-hero__sub {max-width: 266px; font-family: 'Almoni Medium', sans-serif; font-size: 18px; line-height: 22px;}
.pkg-hero__sub p {margin: 0;}

/* Zone selector -- "Select controls / toggle filter": two joined pills, the
   active one filled. Follows the page's direction, so the first zone (Reef,
   also the default) sits on the reading-start side: right in Hebrew, with Bay
   on the left. It used to be forced LTR, which put Reef on the left. The
   corners and the shared middle edge use logical sides for the same reason. */
.pkg-toggle {display: flex; width: 100%; height: 44px;}
.pkg-toggle__btn {display: flex; align-items: center; justify-content: center; flex: 1 0 0; min-width: 0; height: 44px; padding: 10px 15px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 18px; font-weight: 500; line-height: 22px; white-space: nowrap; background: #FFF; border: 1px solid #D3D8DA; cursor: pointer; transition: background .2s, color .2s;}
.pkg-toggle__btn:first-child {border-start-start-radius: 30px; border-end-start-radius: 30px; border-inline-end: 0;}
.pkg-toggle__btn:last-child {border-start-end-radius: 30px; border-end-end-radius: 30px; border-inline-start: 0;}
.pkg-toggle__btn.is-active {color: #FFF; font-family: 'Almoni Bold', sans-serif; font-weight: 700; background: #243D44; border-color: #243D44;}
/* Two lines when the dashboard gives a zone a "who it's for" line: the name,
   then that line, smaller and never bold -- in the pill's own text colour
   (white on the selected one), so the pair reads as one label. */
.pkg-toggle.has-sub, .pkg-toggle.has-sub .pkg-toggle__btn {height: 56px;}
.pkg-toggle.has-sub .pkg-toggle__btn {flex-direction: column; gap: 2px; padding-block: 6px;}
.pkg-toggle__sub {font-family: 'Almoni Medium', sans-serif; font-size: 13px; font-weight: 500; line-height: 16px; white-space: nowrap;}

/* Cards */
.pkg-cards {display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 30px auto 0;}

/* The surf guide links straight to a family, and the site menu (.wrap_header)
   is sticky over the top of the page -- 108 tall here, 134 from 1200px up. The
   margin keeps the card's head clear of it, plus the 20 the cards use between
   themselves. */
.pkg-card {position: relative; width: 100%; scroll-margin-top: 128px; background: #FFF; border-radius: 10px; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.10); overflow: hidden;}
.pkg-card__head {display: flex; align-items: center; gap: 15px; width: 100%; min-height: 78px; padding: 20px; text-align: right; background: transparent; border: 0; cursor: pointer;}
.pkg-card__text {display: flex; flex-direction: column; align-items: flex-end; gap: 15px; flex: 1 0 0; min-width: 0;}
.pkg-card__title {width: 100%; color: #16332E; font-family: 'Almoni Bold', sans-serif; font-size: 24px; font-weight: 700; line-height: 28px;}
.pkg-card__subtitle {width: 100%; color: #545F64; font-family: 'Almoni Medium', sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; word-break: break-word;}

.pkg-card__chevron {position: relative; flex-shrink: 0; width: 16px; height: 16px;}
.pkg-card__chevron::before {content: ''; position: absolute; top: 3px; left: 3px; width: 9px; height: 9px; transform: rotate(45deg); transition: transform .3s; border-right: 2px solid #243D44; border-bottom: 2px solid #243D44;}
.pkg-card.is-open .pkg-card__chevron::before {transform: rotate(-135deg); top: 5px;}

/* Pink corner tag -- Midweek and the VIP membership only. */
.pkg-card__tag {display: flex; align-items: center; position: absolute; top: 0; left: 0; height: 26px; padding: 2px 10px; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; white-space: nowrap; background: #F6ABAA; border-bottom-right-radius: 10px; z-index: 1;}

/* Open card -- states `open` and `open+all` of the Figma component
   (file Sb3xBZOXeUlq7XQh1gjeUK, node 2730:16841). The head keeps a bottom
   border once open; the body holds one "Pricing Card" per option, then the
   "everything you need to know" toggle and its table.
   Plus/minus glyphs are CSS, like the chevron, so no exported asset expires. */
.pkg-card.is-open .pkg-card__head {border-bottom: 1px solid #D3D8DA;}
.pkg-card__body {display: flex; flex-direction: column; padding: 0 16px 16px;}

.pkg-option {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 20px 0; border-bottom: 1px solid #D3D8DA;}
/* The Figma export is Tailwind authored left-to-right: its `items-end` on the
   text column and `items-start` on the controls both flip here, because on an
   RTL page flex-start is the RIGHT edge. Hence start for the text (which hugs
   the right) and end for the controls (which hug the left). */
.pkg-option__text {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 0 0; min-width: 0; text-align: start;}
.pkg-option__name {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 18px; font-weight: 700; line-height: 22px;}
.pkg-option__meta {color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 12px; font-weight: 500; line-height: 12px;}

.pkg-option__includes {display: flex; align-items: flex-start; gap: 4px; color: #38715E; font-family: 'Almoni Medium', sans-serif; font-size: 12px; font-weight: 500; line-height: 14px;}
.pkg-option__includes-label {font-family: 'Almoni Bold', sans-serif; font-weight: 700;}
/* Inline Tabler icons on the benefit line and the saving tag. */
.pkg-icon {display: block; flex-shrink: 0; width: 14px; height: 14px;}

.pkg-option__controls {display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0;}
/* Price first, the struck-out full price beyond it (to its left in RTL). */
.pkg-option__prices {display: flex; align-items: baseline; gap: 6px;}
.pkg-option__old {color: #8A979B; font-family: 'Almoni Medium', sans-serif; font-size: 14px; font-weight: 500; line-height: 22px; text-decoration: line-through; white-space: nowrap;}
/* The % tag, under the price or beside the name -- the card tag's pink. */
.pkg-option__pct {display: inline-flex; align-items: center; height: 20px; padding: 0 8px; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; white-space: nowrap; background: #F6ABAA; border-radius: 100px;}
.pkg-option__price {color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 18px; font-weight: 700; line-height: 22px; white-space: nowrap;}
/* A full-width line under the row (the option wraps); it may itself wrap on
   the narrowest phones, hence no fixed height. */
.pkg-option__saving {display: flex; align-items: center; justify-content: center; gap: 4px; flex-basis: 100%; padding: 6px 12px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 12px; font-weight: 500; line-height: 14px; text-align: center; background: #C2EAEA; border-radius: 100px;}
/* The tag next to the name reads "-15%": left to right, or the minus jumps
   to the far side inside the RTL line. */
.pkg-option__pct--name {direction: ltr; unicode-bidi: isolate;}

/* "+" alone, then the stepper once the option is in the cart. */
.pkg-qty {display: flex; align-items: center; gap: 10px;}
/* padding:0 is not decoration -- app.css:4096 ends a selector list with a bare
   `button`, so every button on the site inherits `padding: 0 50px`. Left
   unset it squeezes this 34px button's content box to zero width, which
   collapses the plus glyph's horizontal bar to nothing. */
.pkg-qty__add {display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: #FFF; border: 1px solid #D3D8DA; border-radius: 8px; cursor: pointer;}
.pkg-qty__btn {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 0; cursor: pointer;}
.pkg-qty__add[disabled], .pkg-qty__btn[disabled] {opacity: .45; cursor: default;}
.pkg-qty__count {display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 16px; line-height: 18px; background: #FFF; border: 1px solid #D3D8DA; border-radius: 6px;}

.pkg-qty__plus, .pkg-qty__minus {position: relative; display: block; flex-shrink: 0; width: 15px; height: 15px;}
.pkg-qty__plus::before, .pkg-qty__minus::before {content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: #243D44;}
.pkg-qty__plus::after {content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; background: #243D44;}

/* "כל מה שצריך לדעת" -- label right, chevron left (RTL flow). */
.pkg-info__toggle {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 0 5px; background: transparent; border: 0; cursor: pointer;}
.pkg-info__label-txt {color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 14px; font-weight: 700; line-height: 18px;}
.pkg-info__chevron {position: relative; flex-shrink: 0; width: 14px; height: 14px;}
.pkg-info__chevron::before {content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; transform: rotate(45deg); transition: transform .3s; border-right: 2px solid #243D44; border-bottom: 2px solid #243D44;}
.pkg-info__toggle.is-open .pkg-info__chevron::before {transform: rotate(-135deg); top: 4px;}

.pkg-info {display: flex; flex-direction: column; gap: 15px; margin-top: 8px; padding: 15px; background: #F7F7F7; border-radius: 12px; text-align: right;}
.pkg-info__row {display: flex; gap: 15px; width: 100%;}
.pkg-info__label {flex-shrink: 0; width: 90px; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 12px; font-weight: 700; line-height: 12px;}
.pkg-info__value {flex: 1 0 0; min-width: 0; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 12px; font-weight: 500; line-height: 12px;}

.pkg-error {margin: 15px auto 0; max-width: 320px; padding: 10px 15px; color: #6C3637; font-family: 'Almoni Medium', sans-serif; font-size: 14px; text-align: center; background: #F6ABAA; border-radius: 8px;}

.pkg-empty {padding: 60px 0; color: #545F64; font-family: 'Almoni Medium', sans-serif; font-size: 18px; text-align: center;}

/* Desktop: the design's right-hand column -- 1100 wide cards with the 374
   toggle pinned to its right edge. The 480px left column of the design
   (surfboard icon + guide link) is not built yet. The open card is only drawn
   at mobile size in the Figma, so here it keeps the same structure with the
   desktop paddings. */
@media (min-width: 1200px) {
  .pkg-toggle {width: 374px; max-width: 374px; margin: 0 0 0 auto;}
  .pkg-cards {margin-top: 20px;}
  .pkg-card__head {min-height: 90px; padding: 18px 25px;}
  .pkg-card__title {color: #243D44;}
  .pkg-card__subtitle {font-size: 16px; line-height: 20px;}
  .pkg-card__body {padding: 0 25px 25px;}
  .pkg-error {max-width: none;}
}


/* ══ Sticky bar + "חשוב לדעת" popup ═════════════════════════════════════════
   Figma 2649:21865 (bar) and 2649:21792 (popup).
   The popup's type sizes are derived from the Figma text-box heights via cap
   height (a 10px box at cap 0.72em ≈ 14px), since the node carries no style
   list; worth a second look when the visual pass happens. */

.pkg-page {padding-bottom: 120px;}

.pkg-bar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #FFF; filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));}
/* row-reverse, not space-between alone: the design puts the buttons on the
   physical LEFT and the totals on the right, and on this RTL page the first
   child would otherwise land on the right. */
.pkg-bar__inner {display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 20px; max-width: 1600px; margin: 0 auto; padding: 20px;}

/* row-reverse so the buy button lands at the far left and the info button to
   its right, as the design orders them. */
.pkg-bar__actions {display: flex; flex-direction: row-reverse; align-items: stretch; gap: 15px;}
.pkg-bar__buy {display: flex; align-items: center; justify-content: center; height: 41px; margin: 0; padding: 0 20px; border: 0; cursor: pointer; color: #FFF; font-family: 'Almoni Medium', sans-serif; font-size: 18px; line-height: 22px; white-space: nowrap; background: #243D44; border-radius: 100px;}
.pkg-bar__buy:hover {color: #FFF;}
.pkg-bar__info {display: none; align-items: center; justify-content: center; gap: 10px; height: 41px; padding: 0 25px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 16px; line-height: 18px; white-space: nowrap; background: #FFF; border: 1px solid #D3D8DA; border-radius: 100px; cursor: pointer;}
.pkg-bar__info-icon {display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-family: 'Almoni Bold', sans-serif; font-size: 12px; line-height: 1; border: 1px solid #243D44; border-radius: 50%;}

/* Mobile: a bordered box across the column (Figma 2580:17174). The desktop bar
   has its own pill. */
.pkg-aside__info {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 14px; line-height: 18px; background: #FFF; border: 1px solid #D3D8DA; border-radius: 10px; cursor: pointer;}
.pkg-aside__info .pkg-bar__info-icon {width: 14px; height: 14px; font-size: 10px;}

/* Mobile stacks the two totals in a 148-wide block (Figma 2580:17186); on one
   row they were 290 wide and pushed the whole document into horizontal
   scroll. Desktop puts them back on a single line. */
.pkg-bar__totals {display: flex; flex-direction: column; align-items: flex-end; gap: 9px;}
.pkg-bar__total {display: flex; align-items: center; gap: 5px; color: #243D44; font-size: 18px; white-space: nowrap;}
.pkg-bar__total strong {font-family: 'Almoni Bold', sans-serif; font-weight: 700; line-height: 22px;}
.pkg-bar__total span {font-family: 'Almoni Medium', sans-serif; line-height: 22px;}
.pkg-bar__divider {display: none; width: 1px; height: 13px; background: #D3D8DA;}

.pkg-modal {display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 1000; padding: 20px; background: rgba(0, 0, 0, 0.5);}
/* Mobile box, from Figma 2580:17116: 60 above the title to clear the close
   button, 20 at the sides, 30 below. Desktop widens it further down. */
.pkg-modal__box {position: relative; width: 100%; max-width: 527px; max-height: 90vh; overflow-y: auto; padding: 60px 20px 30px; background: #FFF; border-radius: 10px; filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));}
.pkg-modal__close {position: absolute; top: 15px; left: 15px; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; cursor: pointer;}
.pkg-modal__close span {position: relative; display: block; width: 100%; height: 100%;}
.pkg-modal__close span::before, .pkg-modal__close span::after {content: ''; position: absolute; top: 50%; left: 15%; width: 70%; height: 2px; background: #243D44;}
.pkg-modal__close span::before {transform: rotate(45deg);}
.pkg-modal__close span::after {transform: rotate(-45deg);}
.pkg-modal__title {margin-bottom: 20px; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 24px; line-height: 28px; text-align: center;}
.pkg-modal__body {color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 14px; line-height: 18px; text-align: start;}
.pkg-modal__body ul {margin: 0; padding-inline-start: 9px; list-style: none;}
.pkg-modal__body li {position: relative; margin-bottom: 15px;}
.pkg-modal__body li::before {content: ''; position: absolute; inset-inline-start: -9px; top: 7px; width: 4px; height: 4px; background: #243D44; border-radius: 2px;}
.pkg-modal__body li:last-child {margin-bottom: 0;}
.pkg-modal__body p {margin: 0 0 10px;}

/* ══ Desktop: the design's two columns, 1100 + 20 + 480 within 1600 ═════════
   Areas are written in reading order, so "main aside" puts the price list on
   the right and the guide panel on the left, as designed. */
@media (min-width: 1200px) {
  .pkg-hero {height: 500px;}
  /* The design's 1356 of 1920, opaque at the right margin and gone by the left
     edge of the fade. */
  .pkg-hero__fade {inset: 0 0 -1px auto; width: 70.63%; background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);}
  .pkg-hero__crumbs {display: flex;}
  .pkg-hero__text {align-items: flex-end; gap: 35px; left: auto; right: 162px; width: auto; max-width: 450px; transform: translateY(-50%); text-align: right;}
  .pkg-hero__title {font-size: 60px; line-height: 64px;}
  .pkg-hero__sub {max-width: none; font-size: 40px; line-height: 46px;}

  /* 1640 = the design's 1600 content box plus this rule's 2x20 padding, and
     the main column flexes so viewports between 1200 and 1640 shrink the
     list instead of pushing the panel out of the page. */
  .pkg-page {display: grid; grid-template-columns: minmax(0, 1100px) 480px; grid-template-areas: "main aside"; align-items: start; gap: 20px; width: auto; max-width: 1640px; padding: 50px 20px 140px;}
  .pkg-main {grid-area: main; min-width: 0;}

  /* 64 = the toggle (44) plus its 20 gap, so the panel lines up with the first
     card rather than with the toggle. 530 is the panel height in the design. */
  /* Flat panel in the dashboard's colour (--pkg-guide-bg, set on the element
     by the page; #C2EAEA is the design's). No shadow in the design. */
  .pkg-aside {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 27px; grid-area: aside; min-height: 530px; margin: 64px 0 0; padding: 33px 10px 25px; background: var(--pkg-guide-bg, #C2EAEA); border-radius: 10px;}
  /* The design's 73x86 box. contain: an uploaded icon of another shape fits
     inside it rather than being stretched. */
  .pkg-aside__icon {display: block; width: 73px; height: 86px; object-fit: contain;}
  /* 27 / 11 and the 33 top padding: the design's spacing, measured from its export
     (its block sits 4px below centre). */
  .pkg-guide {display: flex; flex-direction: column; align-items: center; gap: 11px; width: 460px; max-width: 100%;}
  /* 40/40 matches the design's line widths and pitch. 290 breaks it after "איזה"
     as designed: wider than the second line (273), narrower than "... מוצר". */
  .pkg-guide__intro {max-width: 290px; font-size: 40px; line-height: 40px;}
  /* The link becomes an outlined button here; it stays a plain link on mobile. */
  /* 24px: the design's label fills the button (222 of 276), so the side
     padding drops to 20 to keep it on one line. */
  .pkg-guide__link {justify-content: center; width: 276px; max-width: 100%; height: 55px; margin-top: 0; padding: 0 20px; font-size: 24px; line-height: 28px; white-space: nowrap; background: transparent; border: 1px solid #243D44; border-radius: 100px;}
  .pkg-guide__chevron {display: none;}

  /* The bar spans the viewport but its content lines up with the page columns,
     so it reuses the page's own box rather than the design's 160px padding --
     which, on top of the centred max-width, was insetting everything twice. */
  /* 527 - 2x60 = the design's 407 text column. */
  .pkg-modal__box {padding: 80px 60px 40px; border-radius: 12px;}

  /* The desktop card is 90 tall in the design, which only works at 6; the
     mobile component uses 15. */
  .pkg-card {scroll-margin-top: 154px;}
  .pkg-card__text {gap: 6px;}

  .pkg-bar__inner {max-width: 1640px; padding: 25px 20px;}
  .pkg-bar__actions {width: 480px;}
  .pkg-bar__buy, .pkg-bar__info {flex: 1 0 0; min-width: 0;}
  .pkg-bar__info {display: flex;}
  .pkg-bar__totals {flex-direction: row; align-items: center; gap: 12px;}
  .pkg-bar__divider {display: block;}
}


/* The totals in the sticky bar open the site's cart popup, so they are a button. */
.pkg-bar__totals {padding: 0; background: transparent; border: 0; cursor: pointer; text-align: inherit;}

/* site.css:137 forces `outline-color: #8c711e !important` on every :focus, which
   reads as a brown ring after a click. Drop it for pointer focus, keep a clear
   ring for keyboard users -- :focus-visible is exactly that distinction. The
   colour needs !important of its own to beat that rule. */
.pkg-page :focus:not(:focus-visible),
.pkg-bar :focus:not(:focus-visible),
.pkg-modal :focus:not(:focus-visible) {outline: none;}
.pkg-page :focus-visible,
.pkg-bar :focus-visible,
.pkg-modal :focus-visible {outline: 2px solid; outline-color: #243D44 !important; outline-offset: 2px;}

/* ══ Desktop placements of the saving tag (CMS: מיקום הטאג התחתון בדסקטופ) ══
   The React row only applies them from 1200px up; below that every row gets
   pkg-option--full. */
@media (min-width: 1200px) {
  /* The three small lines grow a pixel on desktop. */
  .pkg-option__meta, .pkg-option__includes, .pkg-option__saving {font-size: 13px; line-height: 16px;}
  .pkg-icon {width: 16px; height: 16px;}

  /* Compact pill hugging its text, under the name. */
  .pkg-option__saving--under_name {flex-basis: auto; padding: 4px 10px; text-align: start;}

  /* A plain line with its icon, under the name. */
  .pkg-option__saving--text_icon {flex-basis: auto; justify-content: flex-start; padding: 0; color: #1E6E6E; text-align: start; background: none; border-radius: 0;}

  /* A pill centred in the gap between the name and the price: the text
     column stops stretching, and the pill's auto margins share the space. */
  .pkg-option--middle .pkg-option__text {flex: 0 1 auto;}
  .pkg-option__saving--middle {flex-basis: auto; align-self: center; max-width: 420px; margin-inline: auto; padding: 4px 12px;}

  /* A caption under the price, right next to the buy control. */
  .pkg-option__saving--price_caption {flex-basis: auto; justify-content: flex-end; max-width: 300px; padding: 0; color: #1E6E6E; text-align: end; background: none; border-radius: 0;}
}

/* ── English (LTR) ────────────────────────────────────────────────────────────
   The rules above were authored for Hebrew and pin several things to a side:
   `right:` offsets, `text-align: right`, and flex-end alignments that only mean
   "right" in RTL. On /en/ the page runs left-to-right, so those are mirrored
   here. Scoped to html[lang="en"] (more specific than the rules above, which
   this file loads after css-en.css anyway), so the Hebrew page is untouched.
   Things built on flex order (the option rows, the bottom bar) mirror by
   themselves and are not repeated here. */
html[lang="en"] .pkg-card__head {text-align: left;}
html[lang="en"] .pkg-card__text {align-items: flex-start;}
/* The pink corner tag sits on the card's end corner: top-right in English. */
html[lang="en"] .pkg-card__tag {left: auto; right: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 10px;}
html[lang="en"] .pkg-info {text-align: left;}
html[lang="en"] .pkg-bar__totals {align-items: flex-start;}
html[lang="en"] .pkg-modal__close {left: auto; right: 15px;}
/* "View the surf level guide" and the breadcrumb separator point forward --
   right, in English. */
html[lang="en"] .pkg-guide__chevron {transform: scaleX(-1);}
html[lang="en"] .pkg-hero__sep {transform: rotate(-135deg);}
html[lang="en"] .pkg-hero__crumbs {right: auto; left: 158px;}

@media (min-width: 1200px) {
  html[lang="en"] .pkg-toggle {margin: 0 auto 0 0;}
  html[lang="en"] .pkg-hero__text {right: auto; left: 162px; align-items: flex-start; text-align: left;}
}

/* ══ Mobile: no site footer ═════════════════════════════════════════════════
   As the design has it, below 1200px the page ends at the price list and the
   fixed cart bar (.pkg-bar) closes the screen instead of the footer. Only the
   <footer> element goes: the popups _footer.php prints after it (the basket,
   the open-session alert) are still needed. This file loads on the multipacks
   pages only, so no other page is affected. */
@media (max-width: 1199px) {
  footer {display: none;}
}