/* ---- TOP NAV BAR ---- */
#top {
  background: #1f293c;
  color: #fff;
  margin: 0;
  padding-top: 5px;
  border-bottom: 0; /* removes the faint divider */
}
#top a { color: #fff; }

/* ---- FREE SHIPPING MESSAGE ---- */

#top .top-bar-row {
  position: relative;  /*  absolutely-position the message */
}

/* Center the message horizontally in the top bar */
#top .top-free-ship {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  white-space: nowrap; /* keeps it on one line */
}

/* Slightly bigger question mark icon - default 14px */
#top .help-icon {
  font-size: 16px;  
  line-height: 1.5;
}

/* ---- HEADER: blue band + hero image ---- */
#header {
  margin: 0;
  background: #1f293c;
}

/* Row for logo, search and cart */
#header .header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px; /* space above/below the row */
}

/* Lets Bootstrap container still control max-width */
#header > .container {
  max-width: 1170px;
  margin: 0 auto; /* centers container */
}

#header #logo { flex: 0 0 auto; }

#header #search{
  flex: 1 1 520px;   /* allows shrinking */
  min-width: 0;      
  margin-left: auto; /* pushes search (and then cart) to the right side */
  display: flex;
  align-items: center;
  max-width: 500px; 
  padding-right:22px;
}

#header #cart{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 15px; /* small gap from search */
}

/* Make the internal search input fill nicely */
#header #search .input-group{ width:100%; min-width:0; }
#header #search .form-control{ width:100%; min-width:0; }
#header #search .btn{ flex:0 0 auto; }

/* logo */
#header #logo img { display: block; height: auto; max-width: 100%; }
#header .container,
#header .row,
#header .header-row { background: transparent; }

/* ---- HERO STRIP BELOW THE ROW ---- */
.hero-strip {
  display: block;
  position: relative;
  width: 100%;
  height: 240px;  /* hero image height */

  /* Dark blue + centered hero, bottom aligned */
  background:
    #1f293c url('/image/catalog/hero_with_background-1600x240.jpg')
    no-repeat 50% 100%;  /* 50% = center X, 100% = bottom Y */
  background-size: cover; /* makes it fill the strip */
}

/* White box behind the overlay logo */
.hero-strip .hero-overlay-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);   /* center in hero */
  width: 775px;     
  height: 175px;       
  background: rgba(255, 255, 255, 0.4);  /* white 40% opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 24px; 
}

/* Logo sits INSIDE the box, not absolutely positioned */
.hero-strip .hero-overlay-logo {
  position: static;        /* lets flexbox handle it */
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

/* ----- PRODUCT CARD CLEANUP ----- */

/* Removes the gray bar + border behind Add to Cart, Wishlist, Compare */
/* Product card actions – desktop default */
.product-thumb .button-group {
  border-top: none;
  background-color: transparent;
  display: flex;           /* keep buttons on one line */
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;       /* prevents wrapping to 2nd line */
  gap: 18px;               /* space between buttons */
}

/* Make the buttons flat (no background, no borders) */
.product-thumb .button-group button {
  width: auto;
  float: none;
  display: inline-flex;    /* icon + text line up nicely */
  align-items: center;
  margin: 0;               /* gap is handled by flex */
  padding: 0;              /* remove big side padding so they fit */
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: #878787;
  white-space: nowrap;     /* keeps "Compare" on one line */
}

/* Hover state – just color change, no background */
.product-thumb .button-group button:hover {
  background-color: transparent;
  color: rgba(224, 94, 18, 0.8);   /* orange hover */
  text-decoration: underline;     
}

/* Removes vertical separators between product action buttons - add to cart, heart, compare*/
.product-thumb .button-group button + button {
  border-left: none !important;
}

/* Hover state – color only */
.product-thumb .button-group button:hover {
  background: transparent;
  color: rgba(224, 94, 18, 0.8);
  text-decoration: underline;
}

/* Hides the wishlist (heart) button on product cards */
.product-thumb .button-group button[onclick^="wishlist.add"] {
  display: none !important;
}

/* Makes product descriptions bigger */
.product-thumb .caption {
  font-size: 14px;  
  line-height: 1.6;
}

/* For the paragraph text - bigger (not the title) */
.product-thumb .caption p {
  font-size: 14px;
}


/* ----- Benefits-specific layout ----- */
.hp-section--benefits {
  position: relative; /* needed for the click-layer */
}

/* Yellow band like the top row */
.hp-section--benefits {
  background-color: #fff8d1; /* same yellow for tiles */
  padding: 24px 0;
}

/* The image card that sits on top of the yellow band */
.hp-section--benefits .hp-benefits-card {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;          /* desktop width */
  min-height: 280px;          /* controls card height */
  background-image: url('/image/catalog/background/leafs-background-w1152xh422-50p-50p.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* White semi-opaque box on top of the background image */
.hp-benefits-title-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center over the image */
  background: rgba(255, 255, 255, 0.8);
  padding: 16px 24px;
  max-width: 98%;
  text-align: center;
}

.hp-benefits-title {
  font-family: "Sirenia", serif;
  font-size: 3em;
  font-weight: bold;
  margin: 0;
}

/* Full-click layer over the whole section */
.hp-benefits-click-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  text-indent: -9999px;     /* hide text visually, keep for screen readers */
}

/* Makes sure the visible content sits under the click layer visually */
.hp-section--benefits .homepage-tiles.container,
.hp-section--benefits .hp-benefits-card {
  position: relative;
  z-index: 1;
}

/* focus style so keyboard users see where they are */
.hp-benefits-click-layer:focus-visible {
  outline: 2px solid #000;
}


/* ----- POSTCARD SECTION (DESKTOP) ----- */

.hp-section--postcard {
  background-color: #fff8d1;   /* same yellow as hp-section tiles */
  padding: 24px 0;
}

.hp-section--postcard .homepage-tiles {
  max-width: 1000px;
  margin: 0 auto;
}

.hp-postcard-card {
  position: relative;
  /*box-shadow: 0 6px 16px rgba(0,0,0,0.18);*/
}

/* background image fills the card */
.postcard-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* layer on top of the image */
.overlay-pc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

/* typography */
.postcard-title {
  color: #FFF;
  font-family: "Sirenia", serif;
  font-size: 3.5em;
  font-weight: 600;
  margin: 0 0 8px;
  text-align: center;
}

.postcard-subtitle {
  color: #fff8d1;
  font-family: "sirenia", sans-serif;
  font-size: 2.1em;
  margin: 0 0 16px;
}

.pc-action-sect .actions {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.pc-action-sect label {
  color: #FFF;
  font-family: "Lato", sans-serif;
  font-size: 1.2em;
  text-align: left;
  display: block;        /* has own line above the field */
  margin-bottom: 4px;
}

.pc-action-sect input[type="email"] {
  
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 1.2em;
  box-sizing: border-box;
}

/* button styled similar to main CTA */
.pc-action-sect button[type="submit"] {
  margin-top: 6px;
  display: inline-block;
  padding: 10px 18px;
  border: none;
  border-radius: 4px;
  background-color: #f7f1a9;   
  font-weight: 600;
  font-size: 1.2em;
  cursor: pointer;
}

.pc-action-sect button[type="submit"]:hover {
  background-color: #f7eb9c;
}

.postcard-footnote {
  color: #f7f1a9;
  font-family: "sirenia", sans-serif;
  font-size: 3em;
  margin: 0;
  padding-bottom: 0;
  padding-top: 10px;
  text-align: center;
}



/* ---- Mobile adjustments ---- */
/* ---- Responsive tweaks ---- */
@media (max-width: 980px) {
  #header .header-row {
    flex-wrap: wrap;
  }
}

/* 992px–1199px: product card heights */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Make all product cards in this range the same height */
  .product-thumb {
    min-height: 460px;  /* tweaks card height so all bottoms line up */
  }
}

/* 768px–1199px: tighten main nav so items don't wrap weird */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Target the main nav links (default OpenCart #menu) */
  #menu .nav > li > a {
    font-size: 22px;        /* a bit smaller than desktop */
    padding: 8px 10px;      /* less left/right padding */
    white-space: nowrap;    /* keeps each label on a single line */
  }

  /* Make sure the nav itself doesn't try to wrap items weirdly */
  #menu .nav {
    flex-wrap: nowrap;  
  }
}

/* 800px–991px: cart above search, search padded right a bit */
@media (min-width: 800px) and (max-width: 991px) {

  /* Stack header content vertically */
  #header .header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 50px 20px;
  }

  /* Logo stays at the top */
  #header #logo {
    order: 0;
    align-self: flex-start; /* keep it on the left */
  }

  /* Cart: second row, right aligned */
  #header #cart {
    order: 1;
    align-self: flex-end;    /* pushes cart to the right */
    margin-left: 60px;
  }

  /* Search: third row, full width, with smaller right padding */
  #header #search {
    order: 2;
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding-right: 8px;      /* was 22px on desktop */
  }

  #header #search .input-group {
    width: 100%;
  }
  
  /* Target the main nav links (default OpenCart #menu) */
  #menu .nav > li > a {
    margin-left: 50px; /* scooches nav to left a little */
  }
  
  /* Desktop: make benefits card 80% of the content width */
  .hp-section--benefits .hp-benefits-card {
    max-width: 90%;   /* narrower than full container */
    margin: 0 auto;   /* keeps it centered */
  }
  
  /* adds side padding to postcard subtitle */
  .hp-section--postcard .postcard-subtitle {
      font-size: 1.7em;
    padding: 0 35px;   /* tweak px up/down for more/less */
  }
}


/*-------- 769px–991px: top-row tiles - 2 columns inside yellow container ---------*/
@media (min-width: 769px) and (max-width: 991px) {

  /* Narrows the yellow container a bit and centers it */
  .hp-section .homepage-tiles.container {
    width: 85%;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* Makes each tile 2 per row */
  .hp-section .row > .col-sm-3 {
    width: 50%;          /* two columns */
    float: left;
    max-width: none;
    margin-bottom: 15px; /* space between rows */
  }

  /* Keeps the inner content looking tidy */
  .hp-section .hp-title {
    text-align: center;
    padding: 8px 6px;
  }

  .hp-section .hp-tile__img {
    max-width: 100%;
    height: auto;
    margin: 0 auto 6px;
    display: block;
  }
}



/* ---  benefits card --- */
@media (max-width: 767px) {
  /* Benefits section: match top-row width + show yellow container */
  .hp-section--benefits {
    padding: 20px 0;
    background: transparent;          /* don't stretch yellow full width */
  }

  .hp-section--benefits .homepage-tiles.container {
    width: 75%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0;
    background-color: #fff8d1;        /* same yellow as top row */
  }

  /* Makes the image card a bit taller on mobile */
  .hp-section--benefits .hp-benefits-card {
    max-width: 100%;
    min-height: 230px;    /* taller than 180px */
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  }

  /* White heading box on top of the image */
  .hp-benefits-title-box {
    max-width: 95%;
    padding: 12px 16px;
  }

  .hp-benefits-title {
    font-size: 22px;
  }
}


/* ---- FOOTER STYLES */
/* Bigger footer column headings */
footer .footer-links-row h5 {
  font-size: 1.3em !important;  
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

/* Bigger footer info links */
footer .footer-links-row ul li a {
  font-size: 1.25em !important;     /* slightly larger than default */
  line-height: 1.6;
}

/* Top footer link columns: same width as hr */
footer .footer-links-row {
  max-width: 100%;          /* same width as the <hr> */
  margin: 0 auto 20px;     /* centered with a bit of bottom space */
  display: flex;
  justify-content: space-between;  
}

/* Makes sure each column behaves nicely in flex */
footer .footer-links-row > div {
  flex: 0 0 auto;          /* helps cols not stretch weirdly */
}

/* Adds extra breathing room around the middle column */
footer .footer-links-row > div:nth-child(2) {
  margin: 0 200px;      
  text-align: left;   /* keeps content centered */
}


/* Match the <hr> to same 80% width */
footer hr {
  max-width:100%;
  margin: 0 auto 10px;     /* centers it under the columns */
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .4);
}


/* Footer LOWER Styles*/
.footer-lower {
  margin-top: 10px;
  text-align: center;
  padding-bottom: 25px;
}
.footer-extra {
  text-align: center;
  margin-top: 0;
}

.footer-logo img {
  max-width: 100px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer-social {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.footer-social li {
  display: inline-block;
}

.footer-social li a {
  list-style: none;
}

.footer-social img {
  width: 23px;
  height: auto;
  display: block;
}

/* left-align copyright under the hr */
.footer-bottom {
  margin: 10px 0 16px;  /* small space above and below */
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  color: #fff;
  font-size: 1.4em;
  font-family: "sirenia";
  
}


/* Tablet and up: copyright left, logo + socials centered below */
@media (min-width: 768px) {
  /* Stop using flex for the wrapper on desktop */
  .footer-lower {
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* left - center - right */
    align-items: center;
    margin-top: 10px;
  }

  /* Copyright stays on the left and pushes the logo block away */
  .footer-bottom {
    text-align: left;
    margin: 0;
    padding-bottom: 0;
    margin-right: auto;  /* pushes center items away  */
  }

  /* Logo + socials: own block, centered */
  .footer-extra {
    margin-top: 0;
    text-align: center;
  }

  /* Makes sure socials stay in a horizontal row */
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  
  /* Desktop and tablet - add separation between benefits section and postcard */
  #content .hp-section--postcard {
    margin-top: 90px !important; 
  }
}

/* Desktop layout for postcard email + button, product card actions */
@media (min-width: 768px) {

  /* Center the whole form block, but keep its contents left-aligned */
  .pc-action-sect .actions {
    display: block;
    max-width: 550px;   
    margin: 0 auto;        /* centers the actions block */
    text-align: left;      /* label + field align left inside */
  }

  .pc-action-sect label {
    display: block;
    margin-bottom: 4px;
  }

  .pc-action-sect input[type="email"] {
    display: inline-block;
    width: 70%;            
    max-width: 380px;     
    margin-right: 10px;
    vertical-align: middle;
  }

  .pc-action-sect button[type="submit"] {
    display: inline-block;
    margin-top: 0;
    padding: 8px 14px;
    font-size: 1.2em;
    vertical-align: middle;
    white-space: nowrap;
  }
  
  .postcard-footnote {
    font-size: 1.7em;
    padding-top: 20px;
    
  }
  
  /* Desktop: fine-tune Add to Cart + Compare positioning */
  /* gives the action row a little padding inside the card */
  .product-thumb .button-group {
    padding: 0 10px;     /* 10px left & right inside the card */
  }

  /* bumps Add to Cart slightly to the right */
  .product-thumb .button-group button[onclick^="cart.add"] {
    margin-left: 10px;
  }

  /* push Compare arrows over to the far right, with 20px from edge */
  .product-thumb .button-group button[onclick^="compare.add"] {
    margin-left: auto;   /* pushes it to the right in the flex row */
    margin-right: 7px;  /* space from the right edge */
  }
  
  /* Adds a little gap between the cart icon and "Add to Cart" text */
  .product-thumb .button-group button[onclick^="cart.add"] span {
    display: inline-block;   /* lets padding take effect cleanly */
    padding-left: 6px;       
  }

}


/* ===== MOBILE PRODUCT CARD TWEAKS (v2) ===== */
@media (max-width: 767px) {

  /* Makes each product card narrower and centered */
  .product-layout.col-xs-12 {
    width: 75%;              
    margin: 0 auto 15px;     /* center the card */
    float: none;             /* stops full-width float behavior */
  }

  .product-thumb {
    padding: 10px;
    margin-bottom: 15px;
  }

  /* Shrinks the image container and center it */
  .product-thumb .image {
    max-width: 98%;          /* container <div> */
    margin: 0 auto 8px;      /* centers it */
  }

  /* makes sure the img itself behaves */
  .product-thumb .image img {
    width: 100%;             /* fills the smaller container */
    height: auto;
    display: block;
  }

  /* Slightly smaller caption text so card feels more compact */
  .product-thumb .caption,
  .product-thumb .caption p {
    font-size: 13px;
    line-height: 1.5;
  }
  
  /* Turns the button group into a flex bar */
  .product-thumb .button-group {
    display: flex;
    justify-content: space-between;   /* cart on left, compare on right */
    align-items: center;
    padding-top: 4px;
    padding-right: 10px;
  }

  /* Make action links a bit larger  */
  .product-thumb .button-group button {
      float: none;
    width: auto;
    font-size: 14px;
    margin-right: 10px;
  }
  
  /* Makes sure any text inside spans is visible */
  .product-thumb .button-group button span {
    display: inline;
  }
  
  /* Cart button: icon + Add to Cart on the LEFT */
  .product-thumb .button-group button[onclick^="cart.add"] {
    order: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;    /* space between icon and text */
  }
  
  /* Compare button: arrows on the RIGHT */
  .product-thumb .button-group button[onclick^="compare.add"] {
    order: 1;
  }

  /* Hover / active on mobile (just color change) */
  .product-thumb .button-group button:hover {
    color: rgba(224, 94, 18, 0.8);
    text-decoration: underline;
  }
  
  /* Makes sure Add to Cart text shows even if it uses hidden-xs/hidden-sm/hidden-md */
  .product-thumb .button-group .hidden-xs,
  .product-thumb .button-group .hidden-sm,
  .product-thumb .button-group .hidden-md {
    display: inline !important;   /* override Bootstrap's display:none !important */
  }
}

 /* FOOTER 601px - 1140px */
/* Mid-range screens: pull footer columns in so 3rd one doesn't get cut off */
@media (min-width: 601px) and (max-width: 1140px) {

  /* Slightly narrower row so everything fits */
  footer .footer-links-row {
    max-width: 90%;
    margin: 0 auto 20px;   /* keeps it centered */
    justify-content: space-between;
  }

  /* Reduce the big side margins on the middle column */
  footer .footer-links-row > div:nth-child(2) {
    margin: 0 60px;        /* was 0 200px; */
  }
}



/* ----- MOBILE FOOTER (center everything) ----- */
@media (max-width: 600px) {

  footer .row {
    text-align: center !important;   /* centers the whole group */
  }

  footer .row .col-sm-3,
  footer .row .col-sm-4,
  footer .row .col-sm-2,
  footer .row .col-sm-6 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;   /* centers the text inside each column */
    margin-bottom: 20px;             /* spacing between stacked columns */
  }

  footer h5 {
    text-align: center;
  }

  footer ul,
  footer ul li {
    text-align: center !important;
  }

  footer ul li a {
    display: inline-block;   /* keeps links tidy */
  }

  footer .footer-logo,
  footer .social-icons {
    text-align: center !important;
    margin: 0 auto !important;
  }
  
  /* ----- MOBILE FOOTER LINKS: stack + centers all 3 columns ----- */
@media (max-width: 600px) {

  footer .footer-links-row {
    display: flex;              /* makes sure flex is on */
    flex-direction: column;     /* stacks columns vertically */
    align-items: center;        /* centers columns themselves */
    text-align: center;         /* centers text in each column */
    gap: 16px;                  /* space between each column block */
    margin: 0 auto 20px;        /* keeps a bit of bottom space */
  }

  /* Resets any desktop margins so nothing gets pushed off-screen */
  footer .footer-links-row > div {
    flex: 0 0 auto;
    margin: 0;
  }

  /* Specifically kill the huge side margins on the middle column */
  footer .footer-links-row > div:nth-child(2) {
    margin: 0;
  }
}

}

/* 561px–799px: tighten header spacing + stack cart and search */
@media (min-width: 561px) and (max-width: 799px) {
    /*makes a vertical stack*/
  #header {
    display: flex;
    flex-direction: column;
  }
  
  /* Hero at the very top */
  #header .hero-strip {
    order: 0;
    width: 100%;
  }

/* Logo/search/cart container sits under the hero */
  #header > .container {
    order: 1;
    width: 100%;
  }
  
  /* Stacks header contents with tighter spacing */
  #header .header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px 12px;
  }

  /* Logo stays on top, left-aligned */
  #header #logo {
    display: none;
  }

 /* Cart: row under logo, right-aligned */
  #header #cart {
    order: 1;
    align-self: flex-end;
    margin: 20px 5px 0 0;
  }

  /* Search: full-width row under cart */
  #header #search {
    order: 2;
    width: 90%;
    max-width: 100%;
    margin: 0;
    padding-right: 6px;
  }

  #header #search .input-group {
    width: 100%;
  }

  
  #search {
      max-height: 100px;
  }
  
   /* === TOP-ROW (YELLOW) SECTION === */

  /* Outer wrapper: NO background, NO shadow */
  #content .hp-section {
    background: transparent !important;
    box-shadow: none !important;
    width: 100%;
    margin: 0;
    padding: 24px 0;
  }

  /* Yellow sits on the inner block */
  #content .hp-section .homepage-tiles {
    background-color: #fff8d1;
  }

  /* This is now the "card" that gets the shadow */
  #content .hp-section .homepage-tiles.container {
    width: 75% !important;           /* like product cards */
    max-width: 520px !important;
    margin: 0 auto 20px !important;
    padding-left: 0;
    padding-right: 0;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, .14);;  /* shadow now here */
  }

  /* Tiles inside yellow card */
  .hp-section .row > .col-sm-3 {
    float: none;
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto 12px;
  }

  .hp-section .hp-tile__img {
    max-width: 340px;
    width: 100%;
    height: auto;
    margin: 0 auto 6px;
    display: block;
  }

  .hp-section .hp-title {
    font-size: 0.95em;
    line-height: 1.4;
    text-align: center;
  }
  
}



/* Mobile layout: cart above search, search centered + mobile hero */
@media (max-width: 560px) {
     /* Makes header a vertical stack:
  #header {
    display: flex;
    flex-direction: column;
  }
  
  /* Hero at the top using mobile image */
  #header .hero-strip {
    order: 0;
    width: 100%;
    height: 130px;  
    background-image: url('/image/catalog/Hero-mobile.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;   /* center X, top Y */
    background-size: contain;
    position: relative;
  }
  
  /* Overlay box + logo toward the top of the hero */
  .hero-strip .hero-overlay-box {
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 25px 40px;
    max-width: 90%;
    width: auto;
    height: auto;
    
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  
  .hero-strip .hero-overlay-logo {
    width: 280px;
    max-width: 130%;
    height: auto;
    display: block;
  }
    
     /* Container with logo/search/cart sits below hero */
  #header > .container {
    order: 1;
    width: 100%;
  }
    
  /* Stack items vertically */
  #header .header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px 12px;
  }
  
  /* hides ellipse logo on mobile */
  #header #logo {
    display: none;
  }

   /* Cart: first row, right-aligned */
  #header #cart {
    order: 0;
    align-self: flex-end;   /* pushes to right of container */
    margin: 0 8px 0 0;
  }

  /* Search: second row, centered and full-width */
  #header #search {
    order: 1;
    flex: 0 0 auto;
    max-width: 360px;       /* changes for wider or narrower */
    width: 100%;
    margin: 0 auto;         /* centers the search block */
  }

  #header #search .input-group {
    width: 100%;
  }

  /* Mobile hero image */
  .hero-strip {
    height: 150px;  /* change for taller */
    background-image: url('/image/catalog/Hero-mobile.jpg');
    background-position: 50% 100%;  /* centered, bottom aligned */
    background-size: 100%;
  }

 

/* ----- MOBILE: shrink top-row (hp-section) ----- */
  .hp-section .homepage-tiles.container {
    width: 75%;          /* match product card width */
    max-width: 360px;    /* safety cap, similar to cards */
    margin: 0 auto;      /* centers in the page */
    padding-left: 0;
    padding-right: 0;
  }

  /* Each tile 2 per row instead of full width */
  .hp-section .row > .col-sm-3 {
    width: 100%;
    float: none;
    max-width: 360px;/* narrows the tile a bit */
    margin: 0 auto 10px; /* centers each tile, add spacing */
  }

  /* Inner link + content */
  .hp-section .hp-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 6px 4px;
    font-size: 0.9em;    /* slightly smaller text */
    line-height: 1.3;
  }

  /* Tile images a bit smaller */
  .hp-section .hp-tile__img {
    max-width: 280px;       /* tweak up/down if needed */
    height: auto;
    margin: 0 auto 4px;
    display: block;
  }
}

/* ==== MOBILE: narrow yellow top-row to match product cards ==== */
@media (max-width: 560px) {

  /* Apply yellow to the inner tiles container */
  .hp-section .homepage-tiles {
    background-color: #fff8d1; 
  }

  /* Make the yellow container same width as product cards */
  .hp-section .homepage-tiles.container {
    width: 75% !important;      /* match .product-layout.col-xs-12 */
    max-width: 360px;           /* same style as cards */
    margin: 0 auto !important;  /* centers it */
    padding-left: 0;
    padding-right: 0;
  }

  /* Keep tiles one per row inside container */
  .hp-section .row > .col-sm-3 {
    float: none;
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto 10px;
  }

  /* Tile content + image sizing */
  .hp-section .hp-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
    font-size: 0.9em;
    line-height: 1.3;
  }

  .hp-section .hp-tile__img {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 0 auto 4px;
    display: block;
  }
}

/* ==== MOBILE: match hp-section card width to product cards ==== */
@media (max-width: 560px) {

  /* Shrink the white card with drop shadow */
  #content .hp-section {
    width: 75% !important;      /* same as product cards */
    max-width: 360px !important;
    margin: 0 auto 15px !important;  /* centers it, adds a little bottom space */
    padding: 0 !important;          /* removes the white band above/below */
    box-sizing: border-box;
  }

  /* Don't stretch inner container narrower than the card */
  .hp-section .homepage-tiles.container {
    width: 100% !important;     /* fill the hp-section card */
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Yellow background stays on the inner block, not full page */
  .hp-section {
     background-color: #fff8d1;  /* yellow */
  }
  .hp-section .homepage-tiles {
    background-color: #fff8d1;  
  }

  /* Keep tiles stacked and sized as before */
  .hp-section .row > .col-sm-3 {
    float: none;
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto 10px;
  }

  .hp-section .hp-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
    font-size: 0.9em;
    line-height: 1.3;
  }

  .hp-section .hp-tile__img {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 0 auto 4px;
    display: block;
  }
}

/* ==== FINAL MOBILE OVERRIDE FOR BENEFITS SECTION ==== */
@media (max-width: 560px) {

  /* Make the benefits section behave like the top-row tiles */
  .hp-section--benefits {
    padding: 20px 0 !important;
    background-color: transparent !important;  /* don't stretch yellow full width */
  }

  /* Yellow container: same width as top-row, centered */
  .hp-section--benefits .homepage-tiles.container {
    width: 85% !important;        /* match product cards/top row */
    max-width: 460px !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    background-color: #fff8d1;  /* yellow */
  }

  /* Make the image card taller so it feels more substantial */
  .hp-section--benefits .hp-benefits-card {
    max-width: 100% !important;
    min-height: 260px !important;  /* bump up more for more height */
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  }

  /* Keep the white title box readable on small screens */
  .hp-benefits-title-box {
    max-width: 95% !important;
    padding: 12px 16px !important;
  }

}

/* ==== MOBILE OVERRIDE FOR BENEFITS SECTION and Featured heading ==== */
@media (max-width: 767px) {

  /* Section padding, no full-width yellow */
  .hp-section--benefits {
    padding: 20px 0 !important;
    background: transparent !important;
  }

  /* Inner container becomes the yellow card, same width as top row/product cards */
  .hp-section--benefits > .container {
    width: 85% !important;          /* match product cards/top row */
    max-width: 460px !important;
    margin: 0 auto 20px !important; /* centered, a bit of bottom space */
    padding: 0 !important;
    background-color: #fff8d1 !important;  /* yellow */
  }

  /* Image card sits inside yellow container */
  .hp-section--benefits .hp-benefits-card {
    max-width: 100% !important;
    min-height: 260px !important;   /* taller for mobile */
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  }

  /* White title box tweaks */
  .hp-benefits-title-box {
    max-width: 95% !important;
    padding: 12px 16px !important;
  }
  
  /* Mobile: aligns "Featured" heading with product cards */
    #content > h3 {
    width: 75%;              /* match .product-layout.col-xs-12 */
    max-width: 360px;
    margin: 50px  auto 10px;     /* centers in the same column and gives top spacing*/
    text-align: left;        /* so "Featured" lines up with card text */
  }
}

/* ==== FINAL MOBILE OVERRIDE: BENEFITS SECTION (WIDER TITLE) ==== */
@media (max-width: 767px) {

  /* card width adjustments */
  #content .hp-section--benefits {
    width: 90% !important;
    max-width: 400px !important;
    margin: 0 auto 20px !important;
    padding: 24px 0 !important;   /* smaller padding so card isn't too tall */
    box-sizing: border-box;
  }

  /* yellow background on the inner block */
  .hp-section--benefits,
  .hp-section--benefits > .container,
  .hp-section--benefits > .homepage-tiles,
  .hp-section--benefits .homepage-tiles.container {
    background-color: #fff8d1 !important;
  }

  /* Card height adjustments */
  .hp-section--benefits .hp-benefits-card {
    max-width: 100% !important;
    min-height: 340px !important;   /* was 400px */
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  }

  /* White box: make it WIDER and less tall */
  .hp-benefits-title-box {
    width: 90% !important;          /* force a nice wide box */
    max-width: 90% !important;
    padding: 30px 20px !important;  /* smaller padding = less vertical height */
  }

  .hp-benefits-title {
    font-size: 25px !important;
    line-height: 1.3 !important;    /* tighter lines so it feels more horizontal */
  }
  
  /* ==== MOBILE: POSTCARD SECTION (WIDER TITLE, MATCH BENEFITS) ==== */
  /* card width & yellow background, stays same size */
  #content .hp-section--postcard {
    width: 90% !important;
    max-width: 400px !important;
    margin: 60px auto 40px !important;
    padding: 24px 0 !important;
    box-sizing: border-box;
    background-color: #fff8d1 !important; /* yellow */
  }
  
  /* Make the image fill that fixed-height card */
  .hp-section--postcard .postcard-bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;                  /* a bit wider for nice cropping */
    height: 135%;
    object-fit: cover;
  }

  .hp-section--postcard,
  .hp-section--postcard > .container,
  .hp-section--postcard > .homepage-tiles,
  .hp-section--postcard .homepage-tiles {
    background-color: #fff8d1 !important;
  }

/* postcard "card" has a fixed height and hides overflow */
  .hp-section--postcard .hp-postcard-card {
    position: relative;
    height: 360px;          /* increase this for a taller visible image */
    overflow: hidden;       /* prevents the yellow card from growing */
  }
  
  /* Makes sure the overlay content sits above the image */
  .overlay-pc {
    position: relative;
    z-index: 1;
    padding: 30px 20px 5px 20px;
    box-sizing: border-box;
  }

  .postcard-title {
    font-size: 2.3em !important;
    line-height: 1.3 !important;
    padding-bottom: 3px;
  }

  .postcard-subtitle {
    font-size: 1.6em;
    line-height: 1.4;
    /*margin-bottom: 12px;*/
    padding: 5px 23px 23px 23px;
    text-align: center;
  }

  .pc-action-sect .actions {
    gap: 4px;
    margin-bottom: 10px;
  }

  .postcard-footnote {
    font-size: 1.3em;
  }
  
}

/* 350px–475px: stack free-ship over top nav, drop hero to bottom */
@media (min-width: 350px) and (max-width: 475px) {

  /* --- TOP BAR: free shipping on first row, icons on second --- */

  /* Let the free-ship line participate in normal flow instead of overlapping */
  #top .top-free-ship {
    position: static;          /* no absolute positioning */
    transform: none;           /* kills translate */
    display: block;
    margin: 0 0 4px;
    text-align: center;
    /* if it still fits on one line you can keep nowrap; 
       if it feels cramped, change to normal */
    white-space: nowrap;
  }

  /* Make sure the row itself has a bit of breathing room */
  #top .top-bar-row {
    padding-top: 6px;
    padding-bottom: 4px;
  }

  /* Push the top nav icons below the free-ship message */
  #top #top-links {
    float: none;               /* stop hugging the right */
    text-align: center;        /* center icons under the text */
    margin-top: 2px;
  }

  /* Tighten spacing between the top nav items a bit */
  #top #top-links a {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* --- HEADER / HERO: hero lower, flush with bottom --- */

  /* Remove any extra blue showing under the hero */
  #header {
    padding-bottom: 0;
  }

  /* Make the hero strip a bit taller and anchored to the bottom */
  #header .hero-strip {
    height: 160px;                 /* tweak up/down if needed */
    background-position: 50% 100%; /* center horizontally, bottom vertically */
    background-size: cover;        /* fill the strip so no blue at bottom */
    margin-top: 8px;               /* nudges image a bit lower under header row */
  }
  
  /* makes Flower Power logo + white box bigger and centered */
  
  /* White box: larger and perfectly centered */
  .hero-strip .hero-overlay-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* true center */
    width: 90%;                       /* wide but not edge-to-edge */
    max-width: 360px;                 /* cap for slightly larger screens */
    padding: 28px 32px;               /* bigger box */
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  
  /* Nudges cart items button a bit further right */
  #header #cart {
    transform: translateX(8px);   /* about 5px to the right */
  }

  /* Nudge search bar a bit further left */
  #header #search {
    transform: translateX(-10px); /* about 10px to the left */
  }
  
  /* Postcard card: 90% width + same shadow as benefits */
  .hp-postcard-card {
    position: relative;
    width: 90%;                       /* about 90% of its container */
    margin: 0 auto;                   /* center the card */
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);  /* same as benefits card */
  }
  
  /* Mobile: move postcard content higher so footnote sits on blue image */
  .hp-section--postcard .overlay-pc {
    align-items: flex-start;       /* stop vertical centering */
    justify-content: flex-start;
    padding-top: 8px;             /* tweak up/down as needed */
    padding-bottom: 0;
  }
  
  .postcard-title {
    margin-bottom: 0;            /* pull subtitle closer */
  }
  
  .postcard-footnote {
    margin-top: 3px;               /* keeps it inside the blue area */
  }


}