property-practice-ui 0.1.4 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useMemo, useState, useEffect, useRef, Fragment as Fragment$1 } from 'react';
-import styled39, { keyframes } from 'styled-components';
+import styled40, { keyframes } from 'styled-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { HiArrowUpRight, HiMinus, HiPlus, HiArrowLeft, HiArrowRight } from 'react-icons/hi2';
 import { FaMinus, FaPlus as FaPlus$1, FaCheckCircle } from 'react-icons/fa';
@@ -33,7 +33,8 @@ var colors = {
     active: "#828282",
     error: "#F87171",
     focus: "#3B82F6",
-    brand: "#1D3C77"
+    brand: "#1D3C77",
+    light: "#f3f3f3"
   },
   text: {
     brand: "#1D3C77",
@@ -82,12 +83,12 @@ var spaces = {
   9: "56px",
   20: "150px"
 };
-var StyledLabel = styled39.span`
+var StyledLabel = styled40.span`
   color: ${(props) => colors.text[props?.color]};
   font-size: ${sizes.sm};
   font-weight: ${(props) => props.fontWeight};
 `;
-var StyledFloatingLabel = styled39(StyledLabel)`
+var StyledFloatingLabel = styled40(StyledLabel)`
   position: absolute;
   left: 0;
   bottom: 100%;
@@ -112,7 +113,7 @@ var FloatingLabel = ({
   return /* @__PURE__ */ jsx(StyledFloatingLabel, { color, fontWeight, children: value });
 };
 var variants = ["brand", "teal", "blue"];
-var StyledContainer = styled39.button`
+var StyledContainer = styled40.button`
   padding: 0.75rem;
   ${(props) => props.as === "button" ? `
     width: 2.5rem;
@@ -142,7 +143,7 @@ var StyledContainer = styled39.button`
     transform: rotate(45deg);
   }
 `;
-var StyledIcon = styled39(HiArrowUpRight)`
+var StyledIcon = styled40(HiArrowUpRight)`
   width: 1rem;
   height: 1rem;
   color: ${colors.text.secondary};
@@ -175,7 +176,7 @@ var radii = {
 var spin = keyframes`
   to { transform: rotate(360deg); }
 `;
-var Ring = styled39.span`
+var Ring = styled40.span`
   display: inline-block;
   width: ${({ size }) => typeof size === "number" ? `${size}px` : size};
   height: ${({ size }) => typeof size === "number" ? `${size}px` : size};
@@ -210,7 +211,7 @@ var Loader = ({
   );
 };
 var ButtonTypes = ["submit", "reset", "button"];
-var StyledButton = styled39.button`
+var StyledButton = styled40.button`
   padding: ${spaces[2]} ${spaces[4]};
   background-color: ${(props) => props.variant === "light" ? colors.button.primary : colors.button.secondary};
   border-radius: ${radii.lg};
@@ -237,7 +238,7 @@ var StyledButton = styled39.button`
     color: ${colors.text.primary};
   }
 `;
-var ButtonText = styled39.span`
+var ButtonText = styled40.span`
   font-size: 12px;
   font-weight: 700;
 `;
@@ -266,7 +267,7 @@ var Button = ({
 };
 Button.types = ButtonTypes;
 var variants2 = ["primary", "secondary", "subtle", "error"];
-var StyledDescription = styled39.p`
+var StyledDescription = styled40.p`
   margin: 0;
   font-size: 1rem;
   line-height: 1.6;
@@ -292,7 +293,7 @@ var Description = ({
   return /* @__PURE__ */ jsx(StyledDescription, { variant, children });
 };
 Description.variants = variants2;
-var StyledButton2 = styled39.button`
+var StyledButton2 = styled40.button`
   display: flex;
   align-items: center;
   height: 2.5rem;
@@ -318,12 +319,12 @@ var ExtendedButton = ({
     /* @__PURE__ */ jsx(TextButton, { asChild: true, text, bgVariant: textBgVariant, textVariant, uppercase: false })
   ] });
 };
-var Container = styled39.div`
+var Container = styled40.div`
   display: flex;
   gap: 1rem;
   background-color: transparent;
 `;
-var ThumbnailWrapper = styled39.div`
+var ThumbnailWrapper = styled40.div`
   width: ${(props) => props.$size || "3rem"};
   height: ${(props) => props.$size || "3rem"};
   border-radius: 50%;
@@ -333,18 +334,18 @@ var ThumbnailWrapper = styled39.div`
   justify-content: center;
   flex-shrink: 0;
 `;
-var Content = styled39.div`
+var Content = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 `;
-var Title = styled39.h3`
+var Title = styled40.h3`
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
   color: ${(props) => colors.text[props.titleColor]};
 `;
-var Description2 = styled39.p`
+var Description2 = styled40.p`
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -386,12 +387,12 @@ var FeatureItem = ({
 var breakpoints = {
   sm: "640px",
   lg: "1024px"};
-styled39.div`
+styled40.div`
   width: 100%;
   display: flex;
   justify-content: center;
 `;
-styled39.div`
+styled40.div`
   display: flex;
   flex-direction: column;
   padding: ${spaces[4]};
@@ -419,7 +420,7 @@ var variants3 = {
     letterSpacing: "0.2px"
   }
 };
-var StyledText = styled39.h1`
+var StyledText = styled40.h1`
   color: ${(props) => colors.text[props?.color]};
   font-size: ${(props) => variants3[props.variant].fontSize};
   font-weight: ${(props) => variants3[props.variant].fontWeight};
@@ -436,7 +437,7 @@ var Header = ({
 
 // src/types.ts
 var InputTypes = ["number", "text", "email", "date"];
-var StyledInput = styled39.input`
+var StyledInput = styled40.input`
   display: block;
   height: 100%;
   width: 100%;
@@ -450,7 +451,7 @@ var Input = ({ name, onChange, ...rest }) => {
 };
 Input.types = InputTypes;
 var variants4 = ["primary", "secondary", "subtle", "error"];
-var StyledPill = styled39.span`
+var StyledPill = styled40.span`
   display: inline-block;
   padding: 0.5rem 1rem;
   border-radius: 9999px;
@@ -512,7 +513,7 @@ var Pill = ({
   return /* @__PURE__ */ jsx(StyledPill, { variant, $inverse: inverse, children });
 };
 Pill.variants = variants4;
-var Container3 = styled39.div`
+var Container3 = styled40.div`
   border-radius: ${radii.md};
   padding: ${spaces["3"]};
   display: flex;
@@ -538,7 +539,7 @@ var Container3 = styled39.div`
     background-color: rgba(255, 255, 255, 0.92);
   }
 `;
-var Label2 = styled39.span`
+var Label2 = styled40.span`
   font-size: 16px;
   font-weight: ${(props) => props.isSelected ? "800" : "400"};
   text-align: center;
@@ -549,10 +550,10 @@ var RadioItem = ({ label, isSelected, onClick }) => {
     /* @__PURE__ */ jsx(Label2, { isSelected, children: label })
   ] });
 };
-var Container4 = styled39.div`
+var Container4 = styled40.div`
   width: 100%;
 `;
-var Label3 = styled39.label`
+var Label3 = styled40.label`
   display: block;
   font-size: 13px;
   font-weight: 600;
@@ -560,12 +561,13 @@ var Label3 = styled39.label`
   opacity: 0.8;
   margin-bottom: 0.5rem;
 `;
-var StyledInput2 = styled39.input`
+var StyledInput2 = styled40.input`
+  box-sizing: border-box;
   height: 2.75rem;
   width: 100%;
   border-radius: 6px;
   border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
-  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light};
+  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary};
   padding: 0 0.75rem;
   font-size: 15px;
   color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
@@ -582,11 +584,12 @@ var StyledInput2 = styled39.input`
 }};
   }
 `;
-var StyledTextArea = styled39.textarea`
+var StyledTextArea = styled40.textarea`
+  box-sizing: border-box;
   width: 100%;
   border-radius: 6px;
   border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
-  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light};
+  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary};
   padding: 0.75rem;
   font-size: 15px;
   color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
@@ -609,7 +612,7 @@ var SecondaryInput = ({
   labelColor = "brand",
   inputTextColor = "primary",
   placeholderColor = "subtle",
-  backgroundColor = "light",
+  backgroundColor = "secondary",
   borderColor = "#d1d5db",
   focusRingColor = "brand",
   ...rest
@@ -641,7 +644,7 @@ var SecondaryInput = ({
   ] });
 };
 var variants5 = ["primary", "secondary", "inverse", "filled"];
-var StyledButton3 = styled39.button`
+var StyledButton3 = styled40.button`
   width: 2.5rem;
   height: 2.5rem;
   display: flex;
@@ -717,7 +720,7 @@ var SocialButton = ({
 };
 SocialButton.variants = variants5;
 var variants6 = ["primary", "secondary", "subtle"];
-var CheckboxContainer = styled39.label`
+var CheckboxContainer = styled40.label`
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
@@ -725,12 +728,12 @@ var CheckboxContainer = styled39.label`
   font-size: 0.875rem;
   line-height: 1.5;
 `;
-var HiddenCheckbox = styled39.input.attrs({ type: "checkbox" })`
+var HiddenCheckbox = styled40.input.attrs({ type: "checkbox" })`
   position: absolute;
   opacity: 0;
   cursor: pointer;
 `;
-var StyledCheckbox = styled39.div`
+var StyledCheckbox = styled40.div`
   width: 1.25rem;
   height: 1.25rem;
   border: 2px solid ${(props) => {
@@ -778,7 +781,7 @@ var StyledCheckbox = styled39.div`
     display: ${(props) => props.$checked ? "block" : "none"};
   }
 `;
-var Text = styled39.span`
+var Text = styled40.span`
   color: ${(props) => {
   switch (props.variant) {
     case "primary":
@@ -792,7 +795,7 @@ var Text = styled39.span`
   }
 }};
 `;
-var Link = styled39.a`
+var Link = styled40.a`
   color: ${(props) => {
   switch (props.variant) {
     case "primary":
@@ -859,7 +862,7 @@ var variants7 = {
     fontWeight: 500
   }
 };
-var StyledText2 = styled39.h1`
+var StyledText2 = styled40.h1`
   color: ${(props) => colors.text[props?.color]};
   font-size: ${(props) => variants7[props.variant].fontSize};
   font-weight: ${(props) => variants7[props.variant].fontWeight};
@@ -872,7 +875,7 @@ var Text2 = ({
   return /* @__PURE__ */ jsx(StyledText2, { color, variant, children });
 };
 Text2.variants = sizes2;
-var StyledTextarea = styled39.textarea`
+var StyledTextarea = styled40.textarea`
   display: block;
   width: 100%;
   height: 100%;
@@ -893,7 +896,7 @@ var Textarea = ({
 Textarea.types = InputTypes;
 var bgVariants = ["primary", "secondary", "tertiary", "subtle", "blue", "brand", "light", "transparent"];
 var textVariants = ["brand", "primary", "secondary", "tertiary", "subtle", "light", "error", "blue"];
-var StyledContainer2 = styled39.button`
+var StyledContainer2 = styled40.button`
   padding: 0 1rem;
   height: 2.5rem;
   display: flex;
@@ -912,7 +915,7 @@ var StyledContainer2 = styled39.button`
     opacity: 0.9;
   }
 `;
-var StyledText3 = styled39.span`
+var StyledText3 = styled40.span`
   color: ${(props) => colors.text[props.textVariant]};
   font-size: 0.75rem;
   letter-spacing: 0.05em;
@@ -940,7 +943,7 @@ var TextButton = ({
 };
 TextButton.bgVariants = bgVariants;
 TextButton.textVariants = textVariants;
-styled39.div`
+styled40.div`
   display: inline-flex;
   background-color: ${(props) => {
   switch (props.variant) {
@@ -958,7 +961,7 @@ styled39.div`
   padding: 0.25rem;
   gap: 0.25rem;
 `;
-styled39.button`
+styled40.button`
   padding: 0.5rem 1.5rem;
   border-radius: 9999px;
   border: none;
@@ -1003,10 +1006,10 @@ styled39.button`
     opacity: ${(props) => props.$isActive ? 1 : 0.7};
   }
 `;
-var Container5 = styled39.div`
+var Container5 = styled40.div`
   width: 100%;
 `;
-var InnerContainer2 = styled39.div`
+var InnerContainer2 = styled40.div`
   position: relative;
   width: 100%;
   min-height: 58px;
@@ -1039,7 +1042,7 @@ var InputContainer = ({
     typeof error === "string" && /* @__PURE__ */ jsx(Label, { value: error, color: "error" })
   ] });
 };
-var Select = styled39.select`
+var Select = styled40.select`
   width: 100%;
   color: ${colors.text.subtle};
   background: transparent;
@@ -1061,7 +1064,7 @@ var Select = styled39.select`
     color: ${colors.text.subtle};
   }
 `;
-var OptionItem = styled39.option`
+var OptionItem = styled40.option`
   color: ${(props) => props.disabled ? colors.text.light : colors.text.subtle};
 `;
 var Dropdown = ({
@@ -2015,20 +2018,20 @@ function TopMenu({ logoUrl, children }) {
     /* @__PURE__ */ jsx("div", { className: "space-x-4 text-sm font-medium ", children })
   ] }) });
 }
-var Container6 = styled39.div`
+var Container6 = styled40.div`
   width: 100%;
   padding: ${spaces[4]};
 `;
 var AccordionContent = ({ children }) => {
   return /* @__PURE__ */ jsx(Container6, { children });
 };
-var Container7 = styled39.div`
+var Container7 = styled40.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 `;
-var HeaderContainer = styled39.div`
+var HeaderContainer = styled40.div`
   display: flex;
   align-items: center;
   gap: ${spaces[2]};
@@ -2060,7 +2063,7 @@ var AccordionHeader = ({
     )
   ] });
 };
-var Container8 = styled39.div`
+var Container8 = styled40.div`
   border-radius: ${radii.lg};
   background-color: ${colors.background.secondary};
   padding: ${spaces[4]};
@@ -2089,19 +2092,88 @@ var Accordion = ({
   ] });
 };
 var variants9 = ["primary", "inverse", "subtle"];
-var AddressContainer = styled39.div`
+var AddressContainer = styled40.div`
   display: flex;
   flex-direction: column;
-  gap: 1rem;
   background-color: transparent;
   padding: 2rem;
+  
+  /* Desktop: normal spacing */
+  @media (min-width: 768px) {
+    gap: 1rem;
+  }
+  
+  /* Mobile: no gap, handled by collapse */
+  @media (max-width: 767px) {
+    padding: 1rem;
+    gap: 0;
+  }
+`;
+var HeaderWrapper = styled40.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  /* Desktop: not clickable */
+  @media (min-width: 768px) {
+    cursor: default;
+  }
+  
+  /* Mobile: clickable */
+  @media (max-width: 767px) {
+    cursor: ${(props) => props.$isClickable ? "pointer" : "default"};
+    padding: 0.5rem 0;
+    user-select: none;
+  }
+`;
+var ToggleIcon = styled40.div`
+  display: none;
+  
+  /* Only show on mobile */
+  @media (max-width: 767px) {
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem;
+    
+    color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.primary;
+    case "inverse":
+      return colors.text.secondary;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.primary;
+  }
+}};
+  }
+`;
+var CollapseContent = styled40.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  
+  /* Desktop: always visible */
+  @media (min-width: 768px) {
+    display: flex;
+  }
+  
+  /* Mobile: collapsible */
+  @media (max-width: 767px) {
+    max-height: ${(props) => props.$isOpen ? "500px" : "0"};
+    opacity: ${(props) => props.$isOpen ? "1" : "0"};
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    padding-top: ${(props) => props.$isOpen ? "1rem" : "0"};
+  }
 `;
-var InfoSection = styled39.div`
+var InfoSection = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 `;
-var InfoText = styled39.p`
+var InfoText = styled40.p`
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.6;
@@ -2119,7 +2191,7 @@ var InfoText = styled39.p`
 }};
   font-weight: ${(props) => props.$bold ? 600 : 400};
 `;
-var ButtonWrapper = styled39.div`
+var ButtonWrapper = styled40.div`
   margin-top: 0.5rem;
 `;
 var Address = ({
@@ -2131,6 +2203,7 @@ var Address = ({
   onDirectionsClick,
   variant = "primary"
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
   const handleDirectionsClick = () => {
     if (onDirectionsClick) {
       onDirectionsClick();
@@ -2169,26 +2242,38 @@ var Address = ({
     }
   };
   return /* @__PURE__ */ jsxs(AddressContainer, { children: [
-    /* @__PURE__ */ jsx(Header, { variant: "h1", color: getHeaderVariant(), children: title }),
-    /* @__PURE__ */ jsxs(InfoSection, { children: [
-      phone && /* @__PURE__ */ jsx(InfoText, { variant, children: phone }),
-      email && /* @__PURE__ */ jsx(InfoText, { variant, $bold: true, children: email.toUpperCase() }),
-      addressLines.map((line, index) => /* @__PURE__ */ jsx(InfoText, { variant, children: line }, index))
-    ] }),
-    /* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsx(
-      TextButton,
+    /* @__PURE__ */ jsxs(
+      HeaderWrapper,
       {
-        text: directionsText,
-        onClick: handleDirectionsClick,
-        bgVariant: getButtonBgVariant(),
-        textVariant: getButtonTextVariant(),
-        uppercase: true
+        $isClickable: true,
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          /* @__PURE__ */ jsx(Header, { variant: "h1", color: getHeaderVariant(), children: title }),
+          /* @__PURE__ */ jsx(ToggleIcon, { variant, children: isOpen ? /* @__PURE__ */ jsx(HiMinus, {}) : /* @__PURE__ */ jsx(HiPlus, {}) })
+        ]
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsxs(CollapseContent, { $isOpen: isOpen, children: [
+      /* @__PURE__ */ jsxs(InfoSection, { children: [
+        phone && /* @__PURE__ */ jsx(InfoText, { variant, children: phone }),
+        email && /* @__PURE__ */ jsx(InfoText, { variant, $bold: true, children: email.toUpperCase() }),
+        addressLines.map((line, index) => /* @__PURE__ */ jsx(InfoText, { variant, children: line }, index))
+      ] }),
+      /* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsx(
+        TextButton,
+        {
+          text: directionsText,
+          onClick: handleDirectionsClick,
+          bgVariant: getButtonBgVariant(),
+          textVariant: getButtonTextVariant(),
+          uppercase: true
+        }
+      ) })
+    ] })
   ] });
 };
 Address.variants = variants9;
-var CheckboxWrapper = styled39.label`
+var CheckboxWrapper = styled40.label`
   display: flex;
   align-items: center;
   gap: ${spaces[2]};
@@ -2196,10 +2281,10 @@ var CheckboxWrapper = styled39.label`
   font-size: 16px;
   color: ${colors.text.subtle};
 `;
-var HiddenCheckbox2 = styled39.input.attrs({ type: "checkbox" })`
+var HiddenCheckbox2 = styled40.input.attrs({ type: "checkbox" })`
   display: none;
 `;
-var StyledCheckbox2 = styled39.span`
+var StyledCheckbox2 = styled40.span`
   width: ${sizes.lg};
   height: ${sizes.lg};
   border: 1.5px solid ${colors.background.tertiary};
@@ -2218,11 +2303,11 @@ var CheckboxItem = ({
     label
   ] });
 };
-var Container9 = styled39.div`
+var Container9 = styled40.div`
   display: flex;
   flex-direction: column;
 `;
-var OptionsContainer = styled39.div`
+var OptionsContainer = styled40.div`
   display: flex;
   gap: ${spaces[4]};
 `;
@@ -2253,7 +2338,7 @@ var Checkbox = ({
     )) })
   ] });
 };
-var Container10 = styled39.div`
+var Container10 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -2263,8 +2348,13 @@ var Container10 = styled39.div`
   padding: 1.5rem;
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+  
+  @media (max-width: 767px) {
+    width: 70vw;
+  }
 `;
-var ThumbnailWrapper2 = styled39.div`
+var ThumbnailWrapper2 = styled40.div`
   width: 180px;
   height: 180px;
   border-radius: 50%;
@@ -2275,7 +2365,7 @@ var ThumbnailWrapper2 = styled39.div`
   flex-shrink: 0;
   align-self: center;
 `;
-var ButtonWrapper2 = styled39.div`
+var ButtonWrapper2 = styled40.div`
   display: flex;
   justify-content: flex-start;
   margin-top: auto;
@@ -2305,31 +2395,57 @@ var ContentCard = ({
   ] });
 };
 var variants10 = ["primary", "secondary", "transparent"];
-var Container11 = styled39.div`
+var Container11 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   padding: 3rem 2rem;
-  
   max-width: 500px;
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1rem;
+    max-width: 100%;
+  }
 `;
-var Header2 = styled39.h1`
+var Header2 = styled40.h1`
   margin: 0;
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.2;
   color: ${(props) => colors.text[props.textColor]};
+  
+  /* Responsive font size */
+  @media (max-width: 767px) {
+    font-size: 2rem;
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 1.75rem;
+  }
 `;
-var Description3 = styled39.p`
+var Description3 = styled40.p`
   margin: 0;
   font-size: 1.125rem;
   line-height: 1.6;
   color: ${(props) => colors.text[props.textColor]};
+  
+  /* Responsive font size */
+  @media (max-width: 767px) {
+    font-size: 1rem;
+  }
 `;
-var ButtonGroup = styled39.div`
+var ButtonGroup = styled40.div`
   display: flex;
   gap: 1rem;
   align-items: center;
+  
+  /* Stack vertically on mobile */
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
 `;
 var CTAContainer = ({
   header,
@@ -2374,11 +2490,11 @@ var CTAContainer = ({
   ] });
 };
 CTAContainer.variants = variants10;
-var AccordionContainer = styled39.div`
+var AccordionContainer = styled40.div`
   border-bottom: 1px solid ${colors.text.light};
   padding: 1.5rem 0;
 `;
-var AccordionHeader2 = styled39.button`
+var AccordionHeader2 = styled40.button`
   width: 100%;
   display: flex;
   align-items: center;
@@ -2389,23 +2505,23 @@ var AccordionHeader2 = styled39.button`
   text-align: left;
   padding: 0;
 `;
-var NumberBadge = styled39.span`
+var NumberBadge = styled40.span`
   font-size: 1rem;
   font-weight: 600;
   color: ${(props) => colors.text[props.numberColor]};
   flex-shrink: 0;
 `;
-var HeaderWrapper = styled39.div`
+var HeaderWrapper2 = styled40.div`
   flex-grow: 1;
 `;
-var IconWrapper = styled39.div`
+var IconWrapper = styled40.div`
   color: ${(props) => colors.text[props.iconColor]};
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var AccordionContent2 = styled39.div`
+var AccordionContent2 = styled40.div`
   max-height: ${(props) => props.$isOpen ? "1000px" : "0"};
   overflow: hidden;
   transition: max-height 0.3s ease-in-out;
@@ -2427,17 +2543,17 @@ var FAQAccordion = ({
   return /* @__PURE__ */ jsxs(AccordionContainer, { children: [
     /* @__PURE__ */ jsxs(AccordionHeader2, { onClick: () => setIsOpen(!isOpen), children: [
       /* @__PURE__ */ jsx(NumberBadge, { numberColor, children: number }),
-      /* @__PURE__ */ jsx(HeaderWrapper, { children: /* @__PURE__ */ jsx(Header, { variant: headerVariant, color: titleColor, children: title }) }),
+      /* @__PURE__ */ jsx(HeaderWrapper2, { children: /* @__PURE__ */ jsx(Header, { variant: headerVariant, color: titleColor, children: title }) }),
       /* @__PURE__ */ jsx(IconWrapper, { iconColor, children: isOpen ? /* @__PURE__ */ jsx(HiMinus, { size: 24 }) : /* @__PURE__ */ jsx(HiPlus, { size: 24 }) })
     ] }),
     /* @__PURE__ */ jsx(AccordionContent2, { $isOpen: isOpen, children: /* @__PURE__ */ jsx(Description, { variant: contentVariant, children: content }) })
   ] });
 };
-var Container12 = styled39.div`
+var Container12 = styled40.div`
   display: flex;
   flex-direction: column;
 `;
-var FeatureWrapper = styled39.div`
+var FeatureWrapper = styled40.div`
   padding: 1rem 0;
   border-bottom: 1px solid #e5e7eb;
 
@@ -2530,7 +2646,7 @@ keyframes`
   from { transform: translateY(8px) scale(.98); opacity: 0 }
   to { transform: translateY(0) scale(1); opacity: 1 }
 `;
-var Overlay = styled39.div`
+var Overlay = styled40.div`
   height: 100vh;
   width: 100vw;
   background-color: rgba(0, 0, 0, 0.4);
@@ -2542,7 +2658,7 @@ var Overlay = styled39.div`
   justify-content: center;
   animation: ${fadeIn} 160ms ease-out;
 `;
-var ContentContainer = styled39.div`
+var ContentContainer = styled40.div`
   position: relative;
   width: min(${breakpoints.sm}, 92vw);
   max-height: 86vh;
@@ -2566,7 +2682,7 @@ var Modal = ({
   if (!visible) return /* @__PURE__ */ jsx(Fragment, {});
   return /* @__PURE__ */ jsx(Overlay, { contentPosition, onClick: onDismiss, children: /* @__PURE__ */ jsx(ContentContainer, { onClick: (e) => e.stopPropagation(), children }) });
 };
-var Container13 = styled39.div`
+var Container13 = styled40.div`
 display: flex;
 align-items: center ;
 justify-content: space-between;
@@ -2574,7 +2690,7 @@ padding: ${spaces[2]} ${spaces[3]};
 background-color: ${(props) => props.isComplete ? colors.background.blue : colors.background.light};
 border-radius: ${radii.sm};
 `;
-var Row = styled39.div`
+var Row = styled40.div`
     display: flex;
     align-items: center;
     gap: ${spaces[2]};
@@ -2588,21 +2704,21 @@ var OverviewRowItem = ({ isComplete, isMainHeader, title }) => {
     ] })
   ] });
 };
-var Container14 = styled39.div`
+var Container14 = styled40.div`
   width: '100%';
   min-height: '100vh';
   padding-bottom: ${spaces[9]};
 `;
-var HeaderContainer2 = styled39.div`
+var HeaderContainer2 = styled40.div`
   padding: ${spaces[4.5]} ${spaces[6]};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-var ContentContainer2 = styled39.div`
+var ContentContainer2 = styled40.div`
   border-top: 1px solid ${colors.border.hover};
 `;
-var SpinnerContainer = styled39.div`
+var SpinnerContainer = styled40.div`
   display: flex;
   width: 100%;
   padding: ${spaces[6]};
@@ -2625,7 +2741,7 @@ var PageLayout = ({
   ] });
 };
 var variants11 = ["documents", "properties"];
-var Container15 = styled39.div`
+var Container15 = styled40.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2651,7 +2767,7 @@ var EmptyState = ({ variant, message }) => {
   ] });
 };
 EmptyState.variants = variants11;
-var Container16 = styled39.div`
+var Container16 = styled40.div`
   width: 100%;
   height: 100%;
 `;
@@ -2678,13 +2794,20 @@ var PDFPreviewer = ({ url }) => {
     }
   ) });
 };
-var Container17 = styled39.div`
+var Container17 = styled40.div`
   display: flex;
   gap: 1.5rem;
   align-items: center;
   max-width: 600px;
+  
+  /* Mobile: stack vertically */
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 100%;
+  }
 `;
-var ImageWrapper = styled39.div`
+var ImageWrapper = styled40.div`
   flex-shrink: 0;
   width: 180px;
   height: 180px;
@@ -2696,13 +2819,24 @@ var ImageWrapper = styled39.div`
     height: 100%;
     object-fit: cover;
   }
+  
+  /* Mobile: full width */
+  @media (max-width: 767px) {
+    width: 100%;
+    height: 200px;
+  }
 `;
-var ContentWrapper = styled39.div`
+var ContentWrapper = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  
+  /* Mobile: full width */
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 `;
-var LogoWrapper = styled39.div`
+var LogoWrapper = styled40.div`
   max-width: 200px;
   
   img {
@@ -2740,15 +2874,15 @@ var ProductInfo = ({
     ] })
   ] });
 };
-var Container18 = styled39.div``;
-var OptionsContainer2 = styled39.div`
+var Container18 = styled40.div``;
+var OptionsContainer2 = styled40.div`
   margin-top: ${spaces[2]};
   display: flex;
   flex-direction: row;
   flex: 1;
   gap: ${spaces[2]};
 `;
-var LabelContainer = styled39.div`
+var LabelContainer = styled40.div`
   padding-left: ${spaces[1]};
 `;
 var RadioGroup = ({
@@ -2773,7 +2907,7 @@ var RadioGroup = ({
   ] });
 };
 var variants12 = ["primary", "secondary", "subtle"];
-var Overlay2 = styled39.div`
+var Overlay2 = styled40.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -2785,7 +2919,7 @@ var Overlay2 = styled39.div`
   justify-content: center;
   z-index: 1000;
 `;
-var ChartContainer = styled39.div`
+var ChartContainer = styled40.div`
   background-color: #ffffff;
   border-radius: 8px;
   padding: 2rem;
@@ -2793,13 +2927,13 @@ var ChartContainer = styled39.div`
   width: 90%;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 `;
-var HeaderSection = styled39.div`
+var HeaderSection = styled40.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5rem;
 `;
-var CloseButton = styled39.button`
+var CloseButton = styled40.button`
   background-color: ${(props) => {
   switch (props.variant) {
     case "primary":
@@ -2827,14 +2961,14 @@ var CloseButton = styled39.button`
     opacity: 0.8;
   }
 `;
-var Table2 = styled39.table`
+var Table2 = styled40.table`
   width: 100%;
   border-collapse: collapse;
 `;
-var TableHeader2 = styled39.thead`
+var TableHeader2 = styled40.thead`
   border-bottom: 2px solid #e5e7eb;
 `;
-var TableHeaderCell = styled39.th`
+var TableHeaderCell = styled40.th`
   text-align: left;
   padding: 0.75rem 0;
   font-size: 0.875rem;
@@ -2853,15 +2987,15 @@ var TableHeaderCell = styled39.th`
   }
 }};
 `;
-var TableBody = styled39.tbody``;
-var TableRow2 = styled39.tr`
+var TableBody = styled40.tbody``;
+var TableRow2 = styled40.tr`
   border-bottom: 1px solid #f3f4f6;
 
   &:last-child {
     border-bottom: none;
   }
 `;
-var TableCell = styled39.td`
+var TableCell = styled40.td`
   padding: 0.75rem 0;
   font-size: 0.875rem;
   color: ${(props) => {
@@ -2912,27 +3046,97 @@ var RatesChart = ({
   ] }) });
 };
 RatesChart.variants = variants12;
-var StyledNav = styled39.nav`
+var Backdrop = styled40.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: ${(props) => props.$isOpen ? "block" : "none"};
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9998;
+  }
+`;
+var BackToTopWrapper = styled40.div`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+var StyledNav = styled40.nav`
   width: 195px;
-  background-color: #ffffff;
-  border-right: 1px solid #e5e7eb;
   display: flex;
   flex-direction: column;
   min-height: 500px;
   height: 100vh;
   padding-bottom: 15px;
+  
+  @media (min-width: 768px) {
+    position: relative;
+    background-color: #ffffff;
+    border-right: 1px solid #e5e7eb;
+  }
+  
+  @media (max-width: 767px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+    background-color: ${(props) => colors.background[props.$mobileBgVariant]};
+    border-right: 1px solid ${(props) => colors.border[props.$borderVariant]};
+    transform: translateX(${(props) => props.$isOpen ? "0" : "-100%"});
+    transition: transform 0.3s ease-in-out;
+    box-shadow: ${(props) => props.$isOpen ? "2px 0 8px rgba(0, 0, 0, 0.15)" : "none"};
+  }
+`;
+var CloseButton2 = styled40.button`
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: ${(props) => colors.border[props.$textVariant]};
+  
+  &:hover {
+    opacity: 0.7;
+  }
 `;
-var NavList = styled39.ul`
+var MobileHeader = styled40.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+  }
+`;
+var NavList = styled40.ul`
   display: flex;
   flex-direction: column;
   list-style: none;
   margin: 0;
   padding: 0;
 `;
-var NavItem = styled39.li`
+var DesktopNavList = styled40(NavList)`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+var MobileNavList = styled40(NavList)`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+  }
+`;
+var NavItem = styled40.li`
   display: flex;
 `;
-var NavLink = styled39.a`
+var NavLink = styled40.a`
   display: flex;
   align-items: center;
   text-decoration: none;
@@ -2945,7 +3149,7 @@ var NavLink = styled39.a`
     }
   `}
 `;
-var ActiveTriangle = styled39.div`
+var ActiveTriangle = styled40.div`
   width: 0;
   height: 0;
   border-top: 4px solid transparent;
@@ -2954,25 +3158,53 @@ var ActiveTriangle = styled39.div`
   flex-shrink: 0;
   margin-left: 1.5rem;
 `;
-var InactiveSpacer = styled39.span`
+var InactiveSpacer = styled40.span`
   width: 6px;
   margin-right: 0.5rem;
   flex-shrink: 0;
 `;
-var Divider = styled39.div`
+var Divider = styled40.div`
   height: 1px;
   background-color: ${(props) => colors.border[props.dividerColor]};
   margin: 1rem;
 `;
-var Spacer = styled39.div`
+var Spacer = styled40.div`
   flex-grow: 1;
 `;
+var DesktopOnlySpacer = styled40(Spacer)`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+var MobileButtonsWrapper = styled40.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    padding: 0 1rem;
+    margin-top: auto;
+    margin-bottom: 20px;
+  }
+`;
 var SideNav = ({
+  logo,
   items,
   activeItem,
   onBackToTop,
+  isOpen = true,
+  onClose,
+  mobileButtons = [],
+  mobileBgVariant = "tertiary",
+  borderVariant = "primary",
+  closeButtonVariant = "light",
+  mobileActiveTextBgVariant = "transparent",
+  mobileActiveTextVariant = "light",
+  mobileInactiveTextBgVariant = "transparent",
+  mobileInactiveTextVariant = "light",
   triangleColor = "primary",
-  dividerColor = "primary",
+  dividerColor = "light",
   activeTextBgVariant = "transparent",
   activeTextVariant = "brand",
   inactiveTextBgVariant = "transparent",
@@ -2980,40 +3212,71 @@ var SideNav = ({
   backToTopBgVariant = "transparent",
   backToTopTextVariant = "subtle"
 }) => {
-  return /* @__PURE__ */ jsxs(StyledNav, { children: [
-    /* @__PURE__ */ jsx(Spacer, {}),
-    /* @__PURE__ */ jsx(NavList, { children: items.map((item) => {
-      const isActive = activeItem === item.href;
-      return /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs(NavLink, { href: item.href, $isActive: isActive, children: [
-        isActive ? /* @__PURE__ */ jsx(ActiveTriangle, { triangleColor }) : /* @__PURE__ */ jsx(InactiveSpacer, {}),
-        /* @__PURE__ */ jsx(
-          TextButton,
-          {
-            asChild: true,
-            text: item.label,
-            bgVariant: isActive ? activeTextBgVariant : inactiveTextBgVariant,
-            textVariant: isActive ? activeTextVariant : inactiveTextVariant,
-            uppercase: false,
-            bold: isActive
-          }
-        )
-      ] }) }, item.href);
-    }) }),
-    /* @__PURE__ */ jsx(Divider, { dividerColor }),
-    /* @__PURE__ */ jsx(Spacer, {}),
-    /* @__PURE__ */ jsx(
-      TextButton,
+  const renderNavItems = (isMobile) => items.map((item) => {
+    const isActive = activeItem === item.href;
+    return /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs(NavLink, { href: item.href, $isActive: isActive, children: [
+      isActive ? /* @__PURE__ */ jsx(ActiveTriangle, { triangleColor }) : /* @__PURE__ */ jsx(InactiveSpacer, {}),
+      /* @__PURE__ */ jsx(
+        TextButton,
+        {
+          asChild: true,
+          text: item.label,
+          bgVariant: isActive ? isMobile && mobileActiveTextBgVariant ? mobileActiveTextBgVariant : activeTextBgVariant : isMobile && mobileInactiveTextBgVariant ? mobileInactiveTextBgVariant : inactiveTextBgVariant,
+          textVariant: isActive ? isMobile && mobileActiveTextVariant ? mobileActiveTextVariant : activeTextVariant : isMobile && mobileInactiveTextVariant ? mobileInactiveTextVariant : inactiveTextVariant,
+          uppercase: false,
+          bold: isActive
+        }
+      )
+    ] }) }, item.href);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Backdrop, { $isOpen: isOpen, onClick: onClose }),
+    /* @__PURE__ */ jsxs(
+      StyledNav,
       {
-        text: "Back to top",
-        onClick: onBackToTop,
-        bgVariant: backToTopBgVariant,
-        textVariant: backToTopTextVariant,
-        uppercase: false
+        $isOpen: isOpen,
+        $mobileBgVariant: mobileBgVariant,
+        $borderVariant: borderVariant,
+        children: [
+          /* @__PURE__ */ jsxs(MobileHeader, { children: [
+            logo,
+            /* @__PURE__ */ jsx(CloseButton2, { onClick: onClose, "aria-label": "Close menu", $textVariant: closeButtonVariant, children: "\u2715" })
+          ] }),
+          /* @__PURE__ */ jsx(DesktopOnlySpacer, {}),
+          /* @__PURE__ */ jsx(DesktopNavList, { children: renderNavItems(false) }),
+          /* @__PURE__ */ jsx(MobileNavList, { children: renderNavItems(true) }),
+          /* @__PURE__ */ jsx(Divider, { dividerColor }),
+          /* @__PURE__ */ jsx(Spacer, {}),
+          mobileButtons.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, { dividerColor }),
+            /* @__PURE__ */ jsx(MobileButtonsWrapper, { children: mobileButtons.map((button, index) => /* @__PURE__ */ jsx(
+              ExtendedButton,
+              {
+                text: button.text,
+                onClick: button.onClick,
+                textBgVariant: button.bgVariant || "transparent",
+                textVariant: button.textVariant || "subtle",
+                arrowVariant: button.arrowButton || "blue"
+              },
+              index
+            )) })
+          ] }),
+          /* @__PURE__ */ jsx(BackToTopWrapper, { children: /* @__PURE__ */ jsx(
+            TextButton,
+            {
+              text: "Back to top",
+              onClick: onBackToTop,
+              bgVariant: backToTopBgVariant,
+              textVariant: backToTopTextVariant,
+              uppercase: false
+            }
+          ) })
+        ]
       }
     )
   ] });
 };
-var Overlay3 = styled39.div`
+var Overlay3 = styled40.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -3024,7 +3287,7 @@ var Overlay3 = styled39.div`
   justify-content: flex-end;
   z-index: 1000;
 `;
-var PanelContainer = styled39.div`
+var PanelContainer = styled40.div`
   background-color: #ffffff;
   width: 100%;
   max-width: 400px;
@@ -3038,7 +3301,7 @@ var PanelContainer = styled39.div`
   transition: transform 0.3s ease-in-out;
   overflow-y: auto;
 `;
-var CloseButton2 = styled39.button`
+var CloseButton3 = styled40.button`
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
@@ -3059,7 +3322,7 @@ var CloseButton2 = styled39.button`
     opacity: 0.8;
   }
 `;
-var IconWrapper2 = styled39.div`
+var IconWrapper2 = styled40.div`
   width: 100%;
   display: flex;
   justify-content: center;
@@ -3076,7 +3339,7 @@ var IconWrapper2 = styled39.div`
     object-fit: contain;
   }
 `;
-var ContentWrapper2 = styled39.div`
+var ContentWrapper2 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -3097,7 +3360,7 @@ var SidePanel = ({
   buttonTextVariant = "secondary"
 }) => {
   return /* @__PURE__ */ jsx(Overlay3, { $isOpen: isOpen, onClick: onClose, children: /* @__PURE__ */ jsxs(PanelContainer, { $isOpen: isOpen, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsx(CloseButton2, { onClick: onClose, closeButtonBgColor, children: /* @__PURE__ */ jsx(HiX, { size: 24 }) }),
+    /* @__PURE__ */ jsx(CloseButton3, { onClick: onClose, closeButtonBgColor, children: /* @__PURE__ */ jsx(HiX, { size: 24 }) }),
     /* @__PURE__ */ jsx(IconWrapper2, { children: icon }),
     /* @__PURE__ */ jsxs(ContentWrapper2, { children: [
       /* @__PURE__ */ jsx(Header, { variant: "h2", color: titleColor, children: title }),
@@ -3115,7 +3378,7 @@ var SidePanel = ({
     ] })
   ] }) });
 };
-var Container19 = styled39.div`
+var Container19 = styled40.div`
   width: 100%;
   background-color: ${(props) => props.isSelected ? colors.background.blue : colors.background.primary};
   border: 1px solid ${colors.background.blue};
@@ -3126,7 +3389,7 @@ var Container19 = styled39.div`
   padding: ${spaces[2]} ${spaces[3]};
   cursor: pointer;
 `;
-var StyledLabel2 = styled39.span`
+var StyledLabel2 = styled40.span`
   color: ${(props) => props.isSelected ? colors.text.secondary : colors.text.blue};
   font-size: ${sizes.sm};
   font-weight: 700;
@@ -3155,21 +3418,31 @@ var Textarea2 = ({ label, error, ...rest }) => {
     /* @__PURE__ */ jsx(Textarea, { ...rest })
   ] });
 };
-var Container20 = styled39.div`
+var Container20 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: ${spaces[4]};
+  width: 100%;
+  
   @media (max-width: ${breakpoints.sm}) {
     gap: ${spaces[2]};
   }
 `;
-var NameContainer = styled39.div`
+var NameContainer = styled40.div`
   display: flex;
   gap: ${spaces[4]};
+  flex: 1;
+  min-width: 0;
+  
   @media (max-width: ${breakpoints.sm}) {
+    flex-direction: column;
     gap: ${spaces[2]};
   }
-  flex: 1;
+  
+  & > * {
+    flex: 1;
+    min-width: 0;
+  }
 `;
 var ContactForm = ({}) => {
   return /* @__PURE__ */ jsxs(Container20, { children: [
@@ -3208,7 +3481,7 @@ var ContactForm = ({}) => {
     )
   ] });
 };
-var Container21 = styled39.div`
+var Container21 = styled40.div`
   display: flex;
   width: ${`${100 / 4}%`};
   overflow: scroll;
@@ -3225,7 +3498,7 @@ var Container21 = styled39.div`
   -ms-overflow-style: none;
   scrollbar-width: none;
 `;
-var IconContainer = styled39.div`
+var IconContainer = styled40.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3243,7 +3516,7 @@ var DocumentAccordionHeader = ({
     ] })
   ] });
 };
-var ItemContainer = styled39.div`
+var ItemContainer = styled40.div`
   display: flex;
   align-items: center;
   cursor: ${(props) => props?.onClick ? "pointer" : "auto"};
@@ -3286,14 +3559,14 @@ var DocumentAccordionRow = ({
     /* @__PURE__ */ jsx(ItemContainer, { onClick: onViewDetail, children: /* @__PURE__ */ jsx(Label, { value: "View Details", color: "brand", fontWeight: "700" }) })
   ] });
 };
-var HeadersContainer = styled39.div`
+var HeadersContainer = styled40.div`
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: ${spaces[6]};
 `;
-var Container22 = styled39.div`
+var Container22 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: ${spaces[3]};
@@ -3371,33 +3644,61 @@ var DocumentListAccordion = ({
     }
   );
 };
-var CarouselContainer = styled39.div`
-  width: 1000px;
+var CarouselContainer = styled40.div`
+  width: 100%;
   overflow: hidden;
   position: relative;
-  margin: 0 auto;
 `;
-var CardsWrapper = styled39.div`
+var CardsWrapper = styled40.div`
   display: flex;
   gap: 1.5rem;
-  overflow-x: hidden;
-  scroll-behavior: smooth;
   padding: 1rem 0;
+  
+  /* Desktop: controlled by JS */
+  @media (min-width: 768px) {
+    overflow-x: hidden;
+  }
+  
+  /* Mobile: native scroll with snap */
+  @media (max-width: 767px) {
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 `;
-var CardContainer = styled39.div`
+var CardContainer = styled40.div`
   display: flex;
   gap: 1.5rem;
-  transform: translateX(${(props) => props.$translateX}px);
-  transition: transform 0.3s ease-in-out;
+  
+  /* Desktop: transform animation */
+  @media (min-width: 768px) {
+    transform: translateX(${(props) => props.$translateX}px);
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  /* Mobile: natural flow */
+  @media (max-width: 767px) {
+    transform: none;
+    
+    & > * {
+      scroll-snap-align: center;
+      flex-shrink: 0;
+    }
+  }
 `;
-var NavigationWrapper = styled39.div`
+var NavigationWrapper = styled40.div`
   display: flex;
   justify-content: left;
   align-items: center;
   gap: 1rem;
   margin-top: 1.5rem;
 `;
-var NavButton = styled39.button`
+var NavButton = styled40.button`
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
@@ -3410,15 +3711,19 @@ var NavButton = styled39.button`
   justify-content: center;
   transition: all 0.2s;
 
+  @media (max-width: 767px) {
+    display: none;
+  }
+
   &:hover {
     opacity: ${(props) => props.$disabled ? 1 : 0.8};
   }
 `;
-var Indicators = styled39.div`
+var Indicators = styled40.div`
   display: flex;
   gap: 0.5rem;
 `;
-var Indicator = styled39.div`
+var Indicator = styled40.div`
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 50%;
@@ -3435,64 +3740,104 @@ var FeatureCarousel = ({
   indicatorColor = "brand"
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const cardWidth = 284;
+  const [cardsToShow, setCardsToShow] = useState(3);
+  const [cardWidth, setCardWidth] = useState(284);
+  const containerRef = useRef(null);
+  const touchStartX = useRef(0);
+  const touchEndX = useRef(0);
   const gap = 24;
-  const cardsToShow = 3;
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const containerWidth = entry.contentRect.width;
+      const count = Math.floor((containerWidth + gap) / (284 + gap));
+      const clamped = Math.max(1, count);
+      if (clamped === 1) {
+        setCardWidth(containerWidth);
+      } else {
+        setCardWidth(284);
+      }
+      setCardsToShow(clamped);
+    });
+    if (containerRef.current) observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const needsCarousel = cards.length > cardsToShow;
   const maxIndex = Math.max(0, cards.length - cardsToShow);
-  const handlePrev = () => {
-    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  const translateX = -currentIndex * (cardsToShow === 1 ? cardWidth : cardWidth + gap);
+  const handlePrev = () => setCurrentIndex((prev) => Math.max(0, prev - 1));
+  const handleNext = () => setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
+  const handleTouchStart = (e) => {
+    if (!e.touches[0]) return;
+    touchStartX.current = e.touches[0].clientX;
   };
-  const handleNext = () => {
-    setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
+  const handleTouchEnd = (e) => {
+    if (!e.changedTouches[0]) return;
+    touchEndX.current = e.changedTouches[0].clientX;
+    const diff = touchStartX.current - touchEndX.current;
+    if (Math.abs(diff) < 50) return;
+    if (diff > 0) {
+      handleNext();
+    } else {
+      handlePrev();
+    }
   };
-  const translateX = -currentIndex * (cardWidth + gap);
-  return /* @__PURE__ */ jsxs(CarouselContainer, { children: [
-    /* @__PURE__ */ jsx(CardsWrapper, { children: /* @__PURE__ */ jsx(CardContainer, { $translateX: translateX, children: cards.map((card, index) => /* @__PURE__ */ jsx(
-      ContentCard,
-      {
-        thumbnail: card.thumbnail,
-        title: card.title,
-        description: card.description,
-        onArrowClick: card.onArrowClick,
-        titleColor: cardTitleColor,
-        descriptionVariant: cardDescriptionVariant,
-        arrowVariant: cardArrowVariant,
-        thumbnailBgColor: cardThumbnailBgColor
-      },
-      index
-    )) }) }),
-    /* @__PURE__ */ jsxs(NavigationWrapper, { children: [
-      /* @__PURE__ */ jsx(
-        NavButton,
-        {
-          onClick: handlePrev,
-          $disabled: currentIndex === 0,
-          navColor: navButtonColor,
-          children: /* @__PURE__ */ jsx(HiArrowLeft, { size: 24 })
-        }
-      ),
-      /* @__PURE__ */ jsx(Indicators, { children: Array.from({ length: maxIndex + 1 }).map((_, index) => /* @__PURE__ */ jsx(
-        Indicator,
-        {
-          $active: index === currentIndex,
-          indicatorColor
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsx(
-        NavButton,
-        {
-          onClick: handleNext,
-          $disabled: currentIndex === maxIndex,
-          navColor: navButtonColor,
-          children: /* @__PURE__ */ jsx(HiArrowRight, { size: 24 })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    CarouselContainer,
+    {
+      ref: containerRef,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      children: [
+        /* @__PURE__ */ jsx(CardsWrapper, { children: /* @__PURE__ */ jsx(CardContainer, { $translateX: needsCarousel ? translateX : 0, children: cards.map((card, index) => /* @__PURE__ */ jsx(
+          ContentCard,
+          {
+            thumbnail: card.thumbnail,
+            title: card.title,
+            description: card.description,
+            onArrowClick: card.onArrowClick,
+            titleColor: cardTitleColor,
+            descriptionVariant: cardDescriptionVariant,
+            arrowVariant: cardArrowVariant,
+            thumbnailBgColor: cardThumbnailBgColor
+          },
+          index
+        )) }) }),
+        needsCarousel && /* @__PURE__ */ jsxs(NavigationWrapper, { children: [
+          /* @__PURE__ */ jsx(
+            NavButton,
+            {
+              onClick: handlePrev,
+              $disabled: currentIndex === 0,
+              navColor: navButtonColor,
+              children: /* @__PURE__ */ jsx(HiArrowLeft, { size: 24 })
+            }
+          ),
+          /* @__PURE__ */ jsx(Indicators, { children: Array.from({ length: maxIndex + 1 }).map((_, index) => /* @__PURE__ */ jsx(
+            Indicator,
+            {
+              $active: index === currentIndex,
+              indicatorColor
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsx(
+            NavButton,
+            {
+              onClick: handleNext,
+              $disabled: currentIndex === maxIndex,
+              navColor: navButtonColor,
+              children: /* @__PURE__ */ jsx(HiArrowRight, { size: 24 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 var variants13 = ["primary", "secondary"];
-var FooterContainer = styled39.footer`
+var FooterContainer = styled40.footer`
   background-color: ${(props) => {
   switch (props.variant) {
     case "primary":
@@ -3506,7 +3851,7 @@ var FooterContainer = styled39.footer`
   padding: 3rem 2rem 2rem;
   color: #ffffff;
 `;
-var TopSection = styled39.div`
+var TopSection = styled40.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -3520,18 +3865,18 @@ var TopSection = styled39.div`
     align-items: flex-start;
   }
 `;
-var LogoWrapper2 = styled39.div`
+var LogoWrapper2 = styled40.div`
   img {
     height: 100px;
     width: auto;
   }
 `;
-var ButtonGroup2 = styled39.div`
+var ButtonGroup2 = styled40.div`
   display: flex;
   gap: 1rem;
   align-items: center;
 `;
-var MiddleSection = styled39.div`
+var MiddleSection = styled40.div`
   display: grid;
   grid-template-columns: 1fr 1fr auto;
   gap: 3rem;
@@ -3546,12 +3891,12 @@ var MiddleSection = styled39.div`
     grid-template-columns: 1fr;
   }
 `;
-var SocialButtonGroup = styled39.div`
+var SocialButtonGroup = styled40.div`
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
 `;
-var BottomSection = styled39.div`
+var BottomSection = styled40.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -3564,7 +3909,7 @@ var BottomSection = styled39.div`
     align-items: flex-start;
   }
 `;
-var LegalLinks = styled39.div`
+var LegalLinks = styled40.div`
   display: flex;
   gap: 2rem;
 
@@ -3573,7 +3918,7 @@ var LegalLinks = styled39.div`
     gap: 0.5rem;
   }
 `;
-var LegalLink = styled39.a`
+var LegalLink = styled40.a`
   color: #ffffff;
   text-decoration: none;
   font-size: 0.875rem;
@@ -3585,7 +3930,7 @@ var LegalLink = styled39.a`
     opacity: 0.8;
   }
 `;
-var Copyright = styled39.p`
+var Copyright = styled40.p`
   margin: 0;
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.8);
@@ -3663,14 +4008,15 @@ var Footer = ({
   ] });
 };
 Footer.variants = variants13;
-var HeaderContainer3 = styled39.header`
+var HeaderContainer3 = styled40.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #ffffff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 0 1rem;
 `;
-var LogoWrapper3 = styled39.div`
+var LogoWrapper3 = styled40.div`
   display: flex;
   align-items: center;
   
@@ -3679,10 +4025,57 @@ var LogoWrapper3 = styled39.div`
     width: auto;
   }
 `;
-var ButtonGroup3 = styled39.div`
+var ButtonGroup3 = styled40.div`
   display: flex;
   gap: 1rem;
   align-items: center;
+  
+  /* Hide on mobile */
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+var BurgerButton = styled40.button`
+  display: none;
+  
+  /* Show only on mobile */
+  @media (max-width: 767px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 2rem;
+    height: 2rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    
+    &:focus {
+      outline: none;
+    }
+  }
+`;
+var BurgerLine = styled40.div`
+  width: 2rem;
+  height: 0.25rem;
+  background-color: ${(props) => colors.border[props.$burgerVariant]};
+  border-radius: 10px;
+  transition: all 0.3s linear;
+  position: relative;
+  transform-origin: 1px;
+
+  &:first-child {
+    transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0)"};
+  }
+
+  &:nth-child(2) {
+    opacity: ${({ $isOpen }) => $isOpen ? "0" : "1"};
+    transform: ${({ $isOpen }) => $isOpen ? "translateX(20px)" : "translateX(0)"};
+  }
+
+  &:nth-child(3) {
+    transform: ${({ $isOpen }) => $isOpen ? "rotate(-45deg)" : "rotate(0)"};
+  }
 `;
 var Header3 = ({
   logo,
@@ -3690,6 +4083,9 @@ var Header3 = ({
   secondaryButtonText,
   onPrimaryClick,
   onSecondaryClick,
+  isMobileMenuOpen = false,
+  onMobileMenuToggle,
+  burgerVariant = "primary",
   primaryArrowVariant = "blue",
   primaryTextBgVariant = "brand",
   primaryTextVariant = "secondary",
@@ -3719,15 +4115,20 @@ var Header3 = ({
           uppercase: true
         }
       )
+    ] }),
+    /* @__PURE__ */ jsxs(BurgerButton, { onClick: onMobileMenuToggle, $burgerVariant: burgerVariant, children: [
+      /* @__PURE__ */ jsx(BurgerLine, { $isOpen: isMobileMenuOpen, $burgerVariant: burgerVariant }),
+      /* @__PURE__ */ jsx(BurgerLine, { $isOpen: isMobileMenuOpen, $burgerVariant: burgerVariant }),
+      /* @__PURE__ */ jsx(BurgerLine, { $isOpen: isMobileMenuOpen, $burgerVariant: burgerVariant })
     ] })
   ] });
 };
-var Container23 = styled39.div`
+var Container23 = styled40.div`
     display: flex;
     flex-direction: column;
     gap: ${spaces[2]};
 `;
-styled39.div`
+styled40.div`
     display: flex;
     flex-direction: column;
     gap: ${spaces[2]};
@@ -3769,21 +4170,20 @@ var ToastProvider = ({ children }) => {
 var VersionLabel = ({ versionNumber }) => {
   return /* @__PURE__ */ jsx(Label, { value: `V${versionNumber}` });
 };
-var AboutUsContainer = styled39.section`
+var AboutUsContainer = styled40.section`
   display: grid;
   grid-template-columns: 35% 65%;
   gap: 3rem;
   padding: 4rem 2rem;
-  max-width: 1200px;
   margin: 0 auto;
   align-items: start;
-  background-color: ${colors.background?.light};
+  background-color: ${colors.background?.secondary};
 
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
   }
 `;
-var ImageWrapper2 = styled39.div`
+var ImageWrapper2 = styled40.div`
   width: 100%;
   aspect-ratio: 3 / 4;
   border-radius: 8px;
@@ -3796,11 +4196,12 @@ var ImageWrapper2 = styled39.div`
     object-fit: cover;
   }
 `;
-var ContentWrapper3 = styled39.div`
+var ContentWrapper3 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   align-items: flex-start;
+  padding: 1rem 4rem 1rem 1rem;
 `;
 var AboutUs = ({
   image,
@@ -3835,15 +4236,20 @@ var AboutUs = ({
     ] })
   ] });
 };
-var ContactSection = styled39.section`
+var ContactSection = styled40.section`
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 4rem 2rem;
   min-height: 100vh;
-  background-color: ${colors.background?.light};
+  background-color: ${colors.background?.secondary};
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1rem;
+  }
 `;
-var ContentWrapper4 = styled39.div`
+var ContentWrapper4 = styled40.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
@@ -3855,7 +4261,7 @@ var ContentWrapper4 = styled39.div`
     grid-template-columns: 1fr;
   }
 `;
-var ImageWrapper3 = styled39.div`
+var ImageWrapper3 = styled40.div`
   width: 100%;
   height: 100%;
   min-height: 600px;
@@ -3867,25 +4273,36 @@ var ImageWrapper3 = styled39.div`
     display: block;
   }
 
-  @media (max-width: 768px) {
-    min-height: 400px;
+  /* Hide on mobile */
+  @media (max-width: 767px) {
+    display: none;
   }
 `;
-var FormContainer2 = styled39.div`
+var FormContainer2 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
   padding: 4rem 3rem;
   background-color: #ffffff;
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1.5rem;
+  }
 `;
-var FormWrapper = styled39.div`
+var FormWrapper = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
 `;
-var ButtonWrapper3 = styled39.div`
+var ButtonWrapper3 = styled40.div`
   display: flex;
   justify-content: flex-start;
+  
+  /* Mobile: full width button */
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 `;
 var Contact = ({
   image,
@@ -3898,7 +4315,7 @@ var Contact = ({
   termsVariant = "primary",
   buttonArrowVariant = "teal",
   buttonTextBgVariant = "brand",
-  buttonTextVariant = "secondary"
+  buttonTextVariant = "primary"
 }) => {
   return /* @__PURE__ */ jsx(ContactSection, { children: /* @__PURE__ */ jsxs(ContentWrapper4, { children: [
     /* @__PURE__ */ jsx(ImageWrapper3, { children: /* @__PURE__ */ jsx("img", { src: image, alt: "Contact" }) }),
@@ -3928,7 +4345,7 @@ var Contact = ({
     ] })
   ] }) });
 };
-var FAQContainer = styled39.section`
+var FAQContainer = styled40.section`
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -3936,16 +4353,15 @@ var FAQContainer = styled39.section`
   min-height: 100vh;
   background-color: ${colors.background?.primary};
 `;
-var HeaderSection2 = styled39.div`
+var HeaderSection2 = styled40.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   align-items: flex-start;
 `;
-var AccordionList = styled39.div`
+var AccordionList = styled40.div`
   display: flex;
   flex-direction: column;
-  max-width: 900px;
   width: 100%;
 `;
 var FAQ = ({
@@ -3981,7 +4397,7 @@ var FAQ = ({
     )) })
   ] });
 };
-var FeaturesContainer = styled39.section`
+var FeaturesContainer = styled40.section`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -3989,9 +4405,13 @@ var FeaturesContainer = styled39.section`
   gap: 2rem;
   padding: 4rem 2rem;
   min-height: 100vh;
-  background-color: ${colors.background?.light};
+  background-color: ${colors.background?.secondary};
 `;
-var HeaderWrapper2 = styled39.div`
+var InnerWrapper = styled40.div`
+  width: 100%;
+  margin: 0 auto;
+`;
+var HeaderWrapper3 = styled40.div`
   text-align: left;
 `;
 var Features = ({
@@ -4007,9 +4427,9 @@ var Features = ({
   navButtonColor = "brand",
   indicatorColor = "brand"
 }) => {
-  return /* @__PURE__ */ jsxs(FeaturesContainer, { children: [
+  return /* @__PURE__ */ jsx(FeaturesContainer, { children: /* @__PURE__ */ jsxs(InnerWrapper, { children: [
     /* @__PURE__ */ jsx(Pill, { variant: pillVariant, inverse: true, children: pillText }),
-    /* @__PURE__ */ jsx(HeaderWrapper2, { children: /* @__PURE__ */ jsx(Header, { variant: "h1", color: headerColor, children: headerText }) }),
+    /* @__PURE__ */ jsx(HeaderWrapper3, { children: /* @__PURE__ */ jsx(Header, { variant: "h1", color: headerColor, children: headerText }) }),
     /* @__PURE__ */ jsx(
       FeatureCarousel,
       {
@@ -4022,9 +4442,9 @@ var Features = ({
         indicatorColor
       }
     )
-  ] });
+  ] }) });
 };
-var HeroContainer = styled39.section`
+var HeroContainer = styled40.section`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
@@ -4049,25 +4469,50 @@ var HeroContainer = styled39.section`
     right: 0;
     bottom: 0;
     background-color: ${(props) => props.$overlayColor || "rgba(30, 64, 175, 0.7)"};
-    z-index: 1;
   }
 
-  /* Mobile/Tablet: Single column, hide features */
+
+  /* Mobile/Tablet: Single column, features below CTA */
   @media (max-width: 1024px) {
     grid-template-columns: 1fr;
-    padding: 2rem;
+    grid-template-rows: auto auto;
+    padding: 2rem 1rem;
+    gap: 3rem;
+  }
+  
+  /* Very small mobile */
+  @media (max-width: 480px) {
+    padding: 1.5rem 1rem;
   }
 `;
-var Column = styled39.div`
+var Column = styled40.div`
   position: relative;
-  z-index: 2;
   display: flex;
   align-items: center;
+  
+  /* Constrain text width on mobile */
+  @media (max-width: 1024px) {
+    max-width: 100%;
+    width: 100%;
+  }
 `;
-var FeaturesColumn = styled39(Column)`
-  /* Hide on mobile and tablet */
+var FeaturesColumn = styled40(Column)`
+  /* On desktop: normal column */
+  @media (min-width: 1025px) {
+    display: flex;
+  }
+  
+  /* On mobile: show below CTA, order it second */
   @media (max-width: 1024px) {
-    display: none;
+    display: flex;
+    order: 2;
+    align-items: flex-start;
+  }
+`;
+var CTAColumn = styled40(Column)`
+  /* Ensure CTA comes first on mobile */
+  @media (max-width: 1024px) {
+    order: 1;
   }
 `;
 var Hero = ({
@@ -4092,7 +4537,7 @@ var Hero = ({
   featureDescriptionVariant = "secondary"
 }) => {
   return /* @__PURE__ */ jsxs(HeroContainer, { $bgImage: bgImage, $overlayColor: overlayColor, children: [
-    /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CTAColumn, { children: /* @__PURE__ */ jsx(
       CTAContainer,
       {
         header: ctaHeader,
@@ -4123,23 +4568,72 @@ var Hero = ({
     ) })
   ] });
 };
-var SectionContainer = styled39.section`
+var SectionContainer = styled40.section`
   display: flex;
   flex-direction: column;
   padding: 4rem 2rem;
   max-width: 1200px;
   margin: 0 auto;
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1rem;
+  }
 `;
-var SectionHeader = styled39.div`
+var SectionHeader = styled40.div`
   padding-bottom: 2rem;
   border-bottom: 1px solid ${colors.text.light};
+  
+  /* Mobile: remove border, adjust padding */
+  @media (max-width: 767px) {
+    border-bottom: none;
+    padding-bottom: 1rem;
+  }
 `;
-var ProductItem = styled39.div`
-  padding: 2rem 0;
-  border-bottom: 1px solid ${colors.text.light};
+var ProductsWrapper = styled40.div`
+  /* Desktop: normal vertical stack */
+  @media (min-width: 768px) {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Mobile: horizontal scroll carousel */
+  @media (max-width: 767px) {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    gap: 1rem;
+    padding: 1rem 0;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; /* Firefox */
+    
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari */
+    }
+  }
+`;
+var ProductItem = styled40.div`
+  /* Desktop: vertical stack with borders */
+  @media (min-width: 768px) {
+    padding: 2rem 0;
+    border-bottom: 1px solid ${colors.text.light};
 
-  &:last-child {
-    border-bottom: none;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  
+  /* Mobile: carousel item */
+  @media (max-width: 767px) {
+    flex: 0 0 80%; /* CHANGED from 85% - shows more of next card */
+    scroll-snap-align: center;
+    padding: 0;
+    border: none;
+  }
+  
+  /* Very small mobile */
+  @media (max-width: 480px) {
+    flex: 0 0 85%; /* CHANGED from 90% */
   }
 `;
 var OtherProducts = ({
@@ -4154,7 +4648,7 @@ var OtherProducts = ({
 }) => {
   return /* @__PURE__ */ jsxs(SectionContainer, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: /* @__PURE__ */ jsx(Header, { variant: headerVariant, color: headerColor, children: headerText }) }),
-    products.map((product, index) => /* @__PURE__ */ jsx(ProductItem, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(ProductsWrapper, { children: products.map((product, index) => /* @__PURE__ */ jsx(ProductItem, { children: /* @__PURE__ */ jsx(
       ProductInfo,
       {
         image: product.image,
@@ -4168,7 +4662,7 @@ var OtherProducts = ({
         buttonTextBgVariant: productButtonTextBgVariant,
         buttonTextVariant: productButtonTextVariant
       }
-    ) }, index))
+    ) }, index)) })
   ] });
 };