@charset "UTF-8";
/* ==========================================================================
   FRESHLY — design system
   Ported from organic-1.0.0/index.html onto the themeone Blade templates.

   Loaded LAST in common/meta.blade.php so it wins the cascade over
   app.css / responsive.css / change1.css / mediachange.css / Cchange4.css.

   Nothing here changes behaviour. Every JS hook class documented in
   js-hook-contract.md keeps its name; this file only paints them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --green: #08783f;
  --green-dark: #06291c;
  --green-mid: #0d5b33;
  --green-deep: #0b5c33;
  --lime: #c8ed48;
  --lime-hover: #d5f56a;
  --cream: #fbfaf1;
  --soft: #f2f2df;
  --band: #eef3dd;
  --yellow: #ffd84d;
  --text: #173126;
  --muted: #6f7d74;
  --border: #e7e8dc;
  --red: #e0323f;
  --pink: #c9285c;
  --star: #f0a92b;

  --ink-soft: #42544a;
  --ink-faint: #93a08f;
  --field: #f8f9f2;
  --tint: #f5f6ee;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --pill: 999px;
  --shadow: 0 4px 18px rgba(20, 50, 35, .06);
  --shadow-md: 0 8px 24px rgba(20, 50, 35, .09);
  --shadow-lg: 0 12px 34px rgba(20, 50, 35, .12);

  /* ecom-next uses Instrument Sans (resources/css/app.css --font-sans) */
  --ff: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* ecom-next wraps every storefront section in `w-[92%] max-w-[1160px]`.
   Bootstrap's .container instead steps through fixed widths
   (540 / 720 / 960 / 1140px), so at a 1200px viewport the page rendered 960px
   wide and jumped between sizes on resize. Made fluid to match the design.

   Bootstrap's 15px side padding is kept: .row carries -15px margins and the
   columns 15px, so zeroing it here would push every row 15px past the edge. */
.container,
.pagealignment,
.pagealignment1,
.pagealignment2 {
  width: 92%;
  max-width: 1190px;   /* 1160px of content once the 15px gutters are removed */
  margin-inline: auto;
}

/* css/Cchange4.css carries `.pagealignment { margin-left: 2rem !important;
   margin-right: 2rem !important }`. An !important beats the `auto` above no
   matter the source order, so every storefront content page (shop, wishlist,
   product detail, cart, checkout, account…) sat pinned 2rem from the left edge
   instead of centred, while the header and homepage — which use .fx-container
   or a constrained .header-area wrapper — looked correct.

   Scoped to .site-content so it outranks that rule on specificity (2 classes
   vs 1, both !important) without touching the header's own
   `.logo_sec .pagealignment`, which is also 2 classes and keeps its 2rem. */
.site-content .pagealignment,
.site-content .pagealignment1,
.site-content .pagealignment2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

body {
  font-family: var(--ff);
  background: var(--cream);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ff);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text);
  line-height: 1.25;
}

h1, .h1 { font-size: 34px; }
h2, .h2 { font-size: 28px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }

a { color: var(--green); text-decoration: none; transition: color .2s; }
a:hover, a:focus { color: var(--green-mid); text-decoration: none; }

img { max-width: 100%; }

hr { border-top: 1px solid var(--border); }

::selection { background: var(--lime); color: var(--green-dark); }

/* Scrollbar — matches the drawer/panels */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--soft); }
::-webkit-scrollbar-thumb { background: #cfd6c6; border-radius: var(--pill); border: 2px solid var(--soft); }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* --------------------------------------------------------------------------
   3. BOOTSTRAP — BUTTONS
   The theme leans on .btn-secondary (302 uses) as its primary action.
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  border-radius: var(--pill);
  border: 1px solid transparent;
  padding: 11px 22px;
  line-height: 1.2;
  transition: background .2s, color .2s, border-color .2s, transform .18s, box-shadow .2s;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(8, 120, 63, .18); outline: 0; }
.btn:active, .btn.active { transform: translateY(1px); }

.btn-secondary,
.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle,
.show > .btn-primary.dropdown-toggle {
  background: #066532;
  border-color: #066532;
  color: #fff;
}

.btn-dark {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active,
.btn-dark:not(:disabled):not(.disabled):active {
  background: #041d14;
  border-color: #041d14;
  color: #fff;
  transform: translateY(-2px);
}

.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-success:hover { background: #066532; border-color: #066532; color: #fff; }

.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #c72532; border-color: #c72532; color: #fff; }

.btn-warning { background: var(--yellow); border-color: var(--yellow); color: var(--green-dark); }
.btn-warning:hover { background: #f5c92e; border-color: #f5c92e; color: var(--green-dark); }

.btn-info { background: var(--green-mid); border-color: var(--green-mid); color: #fff; }
.btn-info:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.btn-light,
.btn-default,
.btn-defualt {          /* misspelling exists in the templates — keep both */
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.btn-light:hover, .btn-default:hover, .btn-defualt:hover {
  background: var(--tint);
  border-color: #d9dccb;
  color: var(--text);
}

.btn-outline-secondary,
.btn-outline-primary {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.btn-link { color: var(--green); font-weight: 600; border-radius: var(--pill); }
.btn-link:hover { color: var(--green-dark); }

.btn-sm, .btn-group-sm > .btn { font-size: 12px; padding: 8px 16px; }
.btn-lg, .btn-group-lg > .btn { font-size: 15px; padding: 15px 30px; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 10px; }

.btn.disabled, .btn:disabled { opacity: .5; }

/* Lime accent button — the template's hero CTA, available anywhere */
.btn-lime {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime);
  border-color: var(--lime);
  color: var(--green-dark);
  font-weight: 700;
}
.btn-lime:hover, .btn-lime:focus { background: var(--lime-hover); border-color: var(--lime-hover); color: var(--green-dark); transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-weight: 700;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .13); color: #fff; }

/* Square "Add +" button used on product cards */
.btn-add {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 17px;
  border-radius: 8px;
}
.btn-add:hover, .btn-add:focus { background: var(--green); border-color: var(--green); color: #fff; }

/* --------------------------------------------------------------------------
   4. BOOTSTRAP — FORMS
   -------------------------------------------------------------------------- */
.form-control,
.custom-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
input[type="url"], input[type="date"], select, textarea {
  font-family: var(--ff);
  font-size: 14px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  height: auto;
  box-shadow: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-control:focus,
.custom-select:focus,
input:focus, select:focus, textarea:focus {
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(8, 120, 63, .12);
  outline: 0;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #9aa79f; }
.form-control:disabled, .form-control[readonly] { background: #eff0e7; color: var(--muted); }

textarea.form-control { min-height: 120px; line-height: 1.6; }

select.form-control:not([size]):not([multiple]) { height: auto; }

.col-form-label,
label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.form-group { margin-bottom: 18px; }

.help-block,
.form-text,
.invalid-feedback {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--red);
  margin-top: 6px;
}

.input-group .form-control { border-radius: var(--radius-sm); }
.input-group-btn .btn,
.input-group-append .btn,
.input-group-prepend .btn { border-radius: var(--radius-sm); }

.custom-control-label::before { border-radius: 5px; border: 1px solid var(--border); background: var(--field); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--green); border-color: var(--green); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }

/* Search box in the header */
.search-categories {
  display: flex;
  align-items: center;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  overflow: hidden;
  width: 100%;
  transition: border-color .2s, background .2s;
}
.search-categories:focus-within { border-color: var(--green); background: #fff; }
.search-categories select {
  border: 0;
  background: transparent;
  border-right: 1px solid var(--border);
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 11px 14px;
  max-width: 165px;
}
.search-categories select:focus { box-shadow: none; background: transparent; }
.search-categories input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: 14px;
  padding: 11px 16px;
  min-width: 0;
}
.search-categories input[type="search"]:focus { box-shadow: none; background: transparent; }
.search-categories .btn {
  border-radius: var(--pill);
  padding: 9px 18px;
  margin: 4px;
  flex: none;
}

/* --------------------------------------------------------------------------
   5. BOOTSTRAP — BADGES, ALERTS, TABLES, CARDS
   -------------------------------------------------------------------------- */
.badge {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 5px 10px;
  border-radius: var(--pill);
}
.badge-secondary, .badge-primary { background: var(--green); color: #fff; }
.badge-danger { background: var(--pink); color: #fff; }
.badge-success { background: var(--lime); color: var(--green-dark); }
.badge-warning { background: var(--yellow); color: var(--green-dark); }
.badge-dark { background: var(--green-dark); color: var(--lime); }
.badge-light { background: var(--soft); color: var(--text); }

.alert {
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.alert-success { background: #e7f5e4; border-color: #cbe6c2; color: #1d6b34; }
.alert-danger  { background: #fdeaea; border-color: #f6cdcd; color: #a52630; }
.alert-warning { background: #fff6da; border-color: #f6e3ac; color: #8a6614; }
.alert-info    { background: var(--band); border-color: #d8e2be; color: var(--green-mid); }
.alert .close { font-size: 20px; opacity: .45; text-shadow: none; }
.alert .close:hover { opacity: .9; }

.table {
  font-size: 13px;
  color: var(--text);
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.table thead th {
  background: var(--band);
  border-bottom: 0;
  border-top: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-mid);
  padding: 14px 16px;
  white-space: nowrap;
}
.table td, .table th { border-top: 1px solid var(--border); padding: 14px 16px; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: #fcfcf6; }
.table-hover tbody tr:hover { background: var(--band); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border); }
.table-responsive {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
}
.table-responsive > .table { margin-bottom: 0; }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
.card-header {
  background: var(--band);
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 14px;
  color: var(--green-dark);
  padding: 16px 20px;
}
.card-body { padding: 20px; }
.card-footer { background: #fcfcf6; border-top: 1px solid var(--border); padding: 16px 20px; }

.list-group-item { border-color: var(--border); font-size: 13px; padding: 13px 18px; }
.list-group-item.active { background: var(--green); border-color: var(--green); }

.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header { background: var(--band); border-bottom: 1px solid var(--border); padding: 18px 24px; }
.modal-title { font-size: 18px; font-weight: 800; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border); padding: 16px 24px; }
.close { font-size: 22px; font-weight: 700; opacity: .5; text-shadow: none; color: var(--text); }
.close:hover { opacity: 1; color: var(--text); }

/* Plain text breadcrumb — ecom-next shop.tsx renders "Home / Title" as muted
   text on the cream page, not as a coloured banner. */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.breadcrumb-item a { color: var(--muted); }
.breadcrumb-item a:hover { color: var(--green); }
.breadcrumb-item.active { color: var(--text); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); content: "/"; padding: 0 8px; }

/* Pagination — ecom-next shop.tsx: borderless rounded-lg chips, the active
   page filled green-dark. */
.pagination { gap: 6px; margin-top: 48px; justify-content: center; flex-wrap: wrap; }
.page-link {
  border: 0;
  border-radius: 8px !important;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  background: #fff;
}
.page-link:hover { background: var(--soft); color: var(--green); }
.page-item.active .page-link { background: var(--green-dark); color: #fff; }
.page-item.disabled .page-link { color: rgba(111, 125, 116, .5); background: transparent; }

.nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; }
.nav-tabs .nav-link {
  border: 0;
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 18px;
}
.nav-tabs .nav-link:hover { color: var(--text); background: var(--soft); }
.nav-tabs .nav-link.active {
  background: var(--green);
  color: #fff;
  font-weight: 700;
}

.progress { background: var(--soft); border-radius: var(--pill); height: 8px; }
.progress-bar { background: var(--green); }

/* --------------------------------------------------------------------------
   6. TOPBAR (Freshly announcement strip)
   -------------------------------------------------------------------------- */
.fx-topbar {
  background: var(--green);
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 9px 12px;
}
.fx-topbar a { color: var(--lime); }

/* --------------------------------------------------------------------------
   7. HEADER  (.header-area > .header-mini / .header-maxi / .header-navi)
   -------------------------------------------------------------------------- */
/* The header rows use .container-fluid, which is 100% wide, while every body
   section uses the 1160px .fx-container. That left the logo hard against the
   viewport edge while the hero started ~365px in. Constraining the header's
   containers to the same box lines the logo up with the hero's left edge.

   max-width 1190 + Bootstrap's 15px gutters = a 1160px content box, matching
   .fx-container exactly. The gutters are kept because .row inside carries
   -15px margins; zeroing them would push each row 15px past the edge. */
.header-area .container-fluid,
.footer-area .container-fluid {
  width: 92%;
  max-width: 1190px;
  margin-inline: auto;
}
/* .pagealignment also sets a width; inside an already-constrained header
   container it would shrink the row a second time.

   `width: auto`, not `100%`: Cchange4.css pins `margin-left/right: 2rem
   !important` on .pagealignment, and mediachange.css only zeroes that below
   768px. A 100%-wide box plus 64px of margin overflows its parent by 64px, so
   between 769px and desktop the header row ran past the container and gave the
   page a horizontal scroll. `auto` fills whatever the margins leave, which is
   the intended inset and can never overflow. */
.header-area .container-fluid .pagealignment,
.header-area .container-fluid .pagealignment1 {
  width: auto;
  max-width: none;
}

.header-area,
.header-area.bg-primary,
.header-area.bg-white {
  background: #fff !important;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(20, 50, 35, .03);
}

/* --- utility strip: language + account links --- */
.header-mini {
  background: var(--band);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.header-mini .navbar { padding: 0; }
.header-mini .navbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.header-mini .nav-link {
  color: var(--ink-soft) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px !important;
}
.header-mini .nav-link:hover { color: var(--green) !important; }
.header-mini .nav-item .p-pic img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 7px;
  vertical-align: middle;
  border: 1px solid var(--border);
}
.header-mini .navbar-toggler {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 5px 9px;
}
.header-mini .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2342544a' stroke-width='2.4' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
  width: 20px; height: 20px;
}

/* language <select> */
.change-language,
#change_language {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 14px;
  height: auto;
}

/* --- main bar: logo + search + wishlist/cart --- */
.header-maxi { background: #fff; padding: 14px 0; }

.header-maxi .logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--green-dark);
}
.header-maxi .logo:hover { color: var(--green); }
/* `height`, not `max-height` — the source PNGs are larger than the box, so a
   cap left the mark rendering small. Fixed height scales it to the row. */
.header-maxi .logo img { height: 58px; max-height: none; width: auto; }

.top-right-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-right-list > li { position: relative; }

.top-right-list .wishlist-header > a,
.top-right-list .cart-header > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  transition: background .2s, border-color .2s, color .2s;
}
.top-right-list .wishlist-header > a:hover,
.top-right-list .cart-header > a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* the stacked fa icon the wishlist uses */
.top-right-list .fa-stack { width: 1.2em; height: 1.2em; line-height: 1.2em; font-size: 15px; }
.top-right-list .fa-stack .fa-shopping-bag { display: none; }
.top-right-list .fa-stack .fa-heart { font-size: 1em; line-height: inherit; }

.wish-count,
#wishlist-count,
.wishlist-count,
.cart-count {
  background: var(--lime);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  border-radius: var(--pill);
  padding: 1px 7px;
  line-height: 1.5;
}

/* the cart button + dropdown injected by AJAX into .head-cart-content */
.head-cart-content { position: relative; }
.head-cart-content > .dropdown-toggle::after { display: none; }
.head-cart-content > a .bi-cart { font-size: 16px; }

.head-cart-content .cart_item_price,
.head-cart-content .total_price { font-weight: 800; color: var(--green-dark); }

/* ==========================================================================
   BASKET DRAWER

   The basket is a Bootstrap 4.1 dropdown (public/js/app.js) but presents as a
   right-hand slide-in drawer. Two things that forces:

   1. Popper writes `position:absolute; top; left; transform:translate3d(...)`
      as INLINE styles on an open .dropdown-menu, and 4.1 predates the
      data-display="static" opt-out — so every box-placement property here
      needs !important to survive. Both transform states carry it, and the
      open state wins on specificity (.fx-basket-panel.show), not on order.
   2. .dropdown-menu is display:none when closed. The drawer stays displayed
      and is hidden with visibility + transform instead, so the slide can
      animate. position:fixed means the off-screen panel adds no page scroll.
   ========================================================================== */
.head-cart-content .fx-basket-panel {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 1300;
  width: 396px;
  max-width: 100vw;
  min-width: 0;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: -18px 0 48px rgba(23, 49, 38, .18);
  overflow: visible;
  visibility: hidden;
  transform: translateX(100%) !important;
  transition: transform .32s cubic-bezier(.32, .72, 0, 1), visibility .32s;
}
.head-cart-content .fx-basket-panel.show {
  visibility: visible;
  transform: translateX(0) !important;
}

/* Dimmed page behind the drawer. A real element, not a pseudo-element, so it
   can be clicked to close — see the handler in common/scripts.blade.php — and
   a sibling that FOLLOWS the panel rather than a child, because the panel's
   transform would otherwise become its containing block and shrink it to the
   drawer. Following the panel is also what makes the `~` selector possible. */
.fx-basket-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(23, 49, 38, .38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s, visibility .32s;
}
.fx-basket-panel.show ~ .fx-basket-backdrop { opacity: 1; visibility: visible; }

/* set by scripts.blade.php — the back-to-top outranks the drawer's stacking
   context, so it has to be taken out of the way rather than layered under. */
body.fx-basket-open .floating-top { opacity: 0; visibility: hidden; }

.fx-basket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--border);
}
.fx-basket-head .label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.fx-basket-head h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0; }

.fx-basket-close {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 0;
  background: #f1f2ea; color: #5b6b62;
  font-size: 21px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.fx-basket-close:hover { background: var(--green); color: #fff; }

/* the item list — the only part that scrolls */
.fx-basket-body {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cfd6cc transparent;
}
.fx-basket-body::-webkit-scrollbar { width: 6px; }
.fx-basket-body::-webkit-scrollbar-thumb { background: #cfd6cc; border-radius: 999px; }
.fx-basket-body::-webkit-scrollbar-track { background: transparent; }
.fx-basket-body .basket-item:last-child { margin-bottom: 0; }

/* Roomier rows than the old dropdown: bigger thumb, price on its own line,
   and a plain white card so the product photo carries the colour. */
.fx-basket-body .basket-item {
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.fx-basket-body .basket-item:hover {
  border-color: #cfe0c4;
  box-shadow: 0 4px 14px rgba(23, 49, 38, .07);
}
.fx-basket-body .basket-item .thumb {
  width: 64px; height: 64px;
  background: var(--soft);
  border-radius: 12px;
}
.fx-basket-body .basket-item .thumb img { object-fit: contain; padding: 6px; }
.fx-basket-body .basket-item .name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  /* long product names truncate instead of pushing the price out of the row */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* quantity reads as a chip, so it never gets mistaken for part of the name */
.fx-basket-body .basket-item .sub {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--soft);
  border-radius: var(--pill);
  padding: 3px 9px;
  margin-bottom: 8px;
}
.fx-basket-body .basket-item .amount {
  font-size: 16px;
  font-weight: 800;
  color: var(--green-dark);
}

.fx-basket-remove {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  transition: background .2s, border-color .2s, color .2s;
}
.fx-basket-remove:hover { background: var(--red); border-color: var(--red); color: #fff; }

.fx-basket-foot {
  flex: none;
  border-top: 1px solid var(--border);
  padding: 18px 24px 24px;
  background: #fff;
}
.fx-basket-foot .tt-summary { margin-bottom: 16px; }
.fx-basket-foot .fx-sum { font-size: 14px; padding: 5px 0; }
.fx-basket-foot .fx-sum.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding: 12px 0 0;
  font-size: 17px;
}
.fx-basket-foot .buttons { display: flex; flex-direction: column; gap: 9px; }
.fx-basket-foot .buttons .btn {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
}

.fx-basket-panel .basket-empty {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 4px;
  padding: 40px 24px;
  text-align: center;
}
.fx-basket-panel .basket-empty .big {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 30px;
}
.fx-basket-panel .basket-empty strong { font-size: 17px; font-weight: 800; color: var(--text); }
.fx-basket-panel .basket-empty .hint { font-size: 13px; color: var(--muted); max-width: 250px; line-height: 1.5; }

@media (max-width: 460px) {
  .head-cart-content .fx-basket-panel { width: 100vw; }
  .fx-basket-head { padding: 18px 18px 16px; }
  .fx-basket-body { padding: 14px 16px; }
  .fx-basket-foot { padding: 16px 18px 20px; }
}

/* --- nav strip --- */
.header-navi { background: var(--green-dark); }
.header-navi .navbar { padding: 0; }
.header-navi .navbar-nav { align-items: center; gap: 2px; }

.header-area .header-navi .navbar .navbar-nav .nav-item > .nav-link,
.header-navi .nav-link {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 14px 16px !important;
  border-radius: var(--pill);
  transition: background .2s, color .2s;
}
.header-area .header-navi .navbar .navbar-nav .nav-item > .nav-link:hover,
.header-area .header-navi .navbar .navbar-nav .nav-item.active > .nav-link,
.header-navi .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .1);
}
.header-navi .nav-item.first .nav-link { color: var(--lime) !important; font-size: 15px; }
.header-navi .nav-item.last .nav-link {
  color: var(--lime) !important;
  font-weight: 800;
  background: rgba(200, 237, 72, .12);
  margin-left: 6px;
}
.header-navi .nav-item.last .nav-link span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.header-navi .badge-secondary { background: var(--lime); color: var(--green-dark); margin-left: 6px; }

.header-navi .navbar-toggler {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  margin: 10px 0;
}

/* dropdowns */
.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  font-size: 13px;
  margin-top: 4px;
}
.dropdown-item {
  border-radius: 9px;
  padding: 9px 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--band); color: var(--green-dark); }
.dropdown-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  padding: 10px 13px 6px;
}
.dropdown-header.underline { border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.dropdown-header a { color: var(--green-dark); }

.mega-dropdown { position: static; }
.mega-dropdown-menu {
  width: 100%;
  padding: 22px;
  margin: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mega-dropdown-menu ul { list-style: none; padding: 0; }
.mega-dropdown-menu li a { font-size: 13px; color: var(--ink-soft); display: block; padding: 5px 0; }
.mega-dropdown-menu li a:hover { color: var(--green); }
.mega-dropdown-menu .carousel-item img { border-radius: var(--radius-sm); }
.mega-dropdown-menu .price { font-weight: 800; color: var(--green-dark); }
.mega-dropdown-menu .line-through { text-decoration: line-through; color: var(--ink-faint); font-weight: 400; margin-right: 6px; }

/* --------------------------------------------------------------------------
   8. HERO / BANNER / CAROUSEL
   -------------------------------------------------------------------------- */
.carousel-content { padding-top: 26px; }

/* Single dynamic banner — mirrors HeroCard in ecom-next home.tsx:
   relative, mt-6.5 (26px), min-h-[390px], rounded-3xl, bg #0b3a22. */
.fx-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 26px;
  min-height: 390px;
  border-radius: 24px;
  background: #0b3a22;
}

.fx-hero-link { position: absolute; inset: 0; z-index: 1; display: block; }

.fx-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fx-hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(6,41,28,.95) 0%, rgba(6,41,28,.88) 38%, rgba(6,41,28,.35) 68%, rgba(6,41,28,.15) 100%);
}

/* px-8 py-13, lg:px-13 */
.fx-hero-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 40px;
  width: 100%;
  padding: 52px 32px;
  pointer-events: none;   /* let clicks fall through to .fx-hero-link ... */
}
.fx-hero-inner a,
.fx-hero-inner button { pointer-events: auto; }   /* ...except real controls */

@media (min-width: 1024px) {
  .fx-hero-inner { padding: 52px 52px; }
}
.fx-hero-content { max-width: 470px; color: #fff; }

/* text-4xl by default, lg:text-[52px] */
.fx-hero h1 {
  font-size: 36px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 16px;
}
@media (min-width: 1024px) {
  .fx-hero h1 { font-size: 52px; }
}
.fx-hero h1 .accent { color: var(--lime); }

.fx-hero p {
  font-size: 15px;
  line-height: 1.625;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 28px;
  max-width: 400px;
}

.fx-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* px-6.5 py-3.5 — the hero CTAs are larger than a default .btn */
.fx-hero-buttons .btn,
.fx-hero-buttons .btn-lime,
.fx-hero-buttons .btn-ghost {
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 700;
}

/* mb-5 inline-flex gap-1.5 rounded-full border-white/20 bg-white/10
   px-3.5 py-1.5 text-[11px] font-bold tracking-[0.12em] uppercase */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--lime);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.45;
  padding: 6px 14px;
  border-radius: var(--pill);
  margin-bottom: 20px;
}

/* ml-auto hidden w-[230px] flex-col gap-3 xl:flex — shown only from 1280px,
   so the headline keeps its space on mid-size laptops. */
.fx-hero-features { display: none; }
@media (min-width: 1280px) {
  .fx-hero-features {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 230px;
  }
}
.fx-feature {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  padding: 14px;
  color: #fff;
}
.fx-feature-icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  display: grid; place-items: center;
  font-size: 15px;
}
.fx-feature h4 { font-size: 13px; font-weight: 700; margin: 0 0 2px; color: #fff; }
.fx-feature span { font-size: 11px; color: rgba(255, 255, 255, .7); }

/* owl / bootstrap carousels inside the hero slot */
.carousel-content .owl-carousel .item img,
.carousel-content .carousel-item img { border-radius: var(--radius-lg); }

.owl-theme .owl-dots .owl-dot span {
  background: rgba(6, 41, 28, .25);
  width: 8px; height: 8px;
  border-radius: var(--pill);
  transition: width .25s, background .25s;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: var(--green); width: 22px; }

.owl-theme .owl-nav [class*="owl-"] {
  background: #fff;
  color: var(--green-dark);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 38px; height: 38px;
  line-height: 36px;
  box-shadow: var(--shadow);
}
.owl-theme .owl-nav [class*="owl-"]:hover { background: var(--green); color: #fff; border-color: var(--green); }

.carousel-indicators li { border-radius: var(--pill); background: rgba(255, 255, 255, .5); height: 6px; }
.carousel-indicators .active { background: var(--lime); width: 26px; }

/* --------------------------------------------------------------------------
   9. SECTION HEADINGS
   -------------------------------------------------------------------------- */
.fx-section { padding: 56px 0 0; }

.fx-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.fx-section-label,
.section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}
.fx-section h2 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin: 0; }

.link-muted { font-size: 13px; font-weight: 600; color: var(--muted); }
.link-muted:hover { color: var(--green); }

.fx-rule { border-top: 1px solid var(--border); margin-bottom: 26px; }

/* the theme's own section titles */
.site-content .title,
.heading {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   10. CATEGORY TILES
   -------------------------------------------------------------------------- */
/* Aisle strip — mirrors AisleGrid in ecom-next home.tsx:
   a horizontal scroller on small screens, an 8-column grid from lg up, so
   eight tiles are never crushed into one row on a phone. */
.fx-categories {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px 8px;
  scrollbar-width: none;
}
.fx-categories::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .fx-categories {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    overflow: visible;
  }
}

/* px-2 pt-4 pb-3.5 with a 26px glyph gives a tile roughly 68px tall in
   ecom-next. Ours were running ~130px because the icon was too large. */
.fx-cat {
  display: block;
  min-width: 110px;
  text-align: center;
  border-radius: 18px;
  padding: 14px 8px 12px;
  background: var(--band);
  transition: transform .2s, box-shadow .2s;
}
.fx-cat:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(20, 50, 35, .09); }

/* mb-2.5 text-[26px] leading-none */
.fx-cat .emoji { display: block; font-size: 26px; line-height: 1; margin-bottom: 10px; }

/* ecom-next's aisle icon is a 26px emoji glyph. This install stores real image
   icons instead. 30px was too small for a photographic icon to read, so they
   sit at 40px in a white disc — that gives every tile the same silhouette even
   though the source images are a mix of transparent PNGs and rectangular JPGs,
   and a missing file degrades to an empty disc rather than a broken-image mark. */
.fx-cat img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin: 0 auto 8px;
  display: block;
  /* alt text and the broken-image glyph are both suppressed, so a category
     whose icon file is missing shows a clean gap rather than a torn-page mark */
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
}
.fx-cat span { font-size: 12px; font-weight: 600; color: #2f4438; display: block; line-height: 1.35; }

/* Vertical category list — common/categories.blade.php, used in the shop sidebar */
.fx-cat-list,
.fx-cat-list-sub { list-style: none; margin: 0; padding: 0; }

.fx-cat-list > li + li { border-top: 1px solid var(--border); }

.fx-cat-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.fx-cat-list a:hover { background: var(--band); color: var(--green-dark); }
.fx-cat-list img { width: 22px; height: 22px; object-fit: contain; flex: none; }

.fx-cat-list-sub { padding-left: 14px; margin-bottom: 6px; }
.fx-cat-list-sub a { font-size: 12px; font-weight: 500; padding: 7px 12px; color: var(--muted); }
.fx-cat-list-sub img { width: 18px; height: 18px; }

/* legacy sidebar category list */
.category-list, .categories-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.category-list li a, .categories-list li a { display: block; padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--border); }
.category-list li a:hover, .categories-list li a:hover { background: var(--band); color: var(--green-dark); }

/* --------------------------------------------------------------------------
   11. FILTER TABS
   -------------------------------------------------------------------------- */
.fx-tabs {
  display: inline-flex;
  gap: 2px;
  background: #f1f1e7;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: 4px;
}
.fx-tab {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--pill);
  color: var(--muted);
  background: transparent;
  border: 0;
  white-space: nowrap;
  transition: all .2s;
}
.fx-tab:hover { color: var(--text); }
.fx-tab.active {
  background: #fff;
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(20, 50, 35, .12);
}

/* --------------------------------------------------------------------------
   12. PRODUCT CARDS
   Applies to the theme's .product / .product-item markup AND to the
   Freshly .fx-product markup, so both render identically.
   -------------------------------------------------------------------------- */
/* .fx-product-grid is defined once, in section 23h, with ecom-next's
   breakpoints. Do not redeclare it here. */

.product,
.product-item,
.fx-product {
  position: relative;
  background: #fff;
  border: 1px solid #eeefe6;
  border-radius: var(--radius);
  padding: 10px;
  transition: transform .2s, box-shadow .2s;
  height: 100%;
}
.product:hover,
.product-item:hover,
.fx-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.product .thumb,
.product-item .thumb,
.fx-product-image {
  position: relative;
  height: 192px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fdf6ec;
  display: block;
}
.product .thumb img,
.product-item .thumb img,
.fx-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s;
  /* products whose image file is missing showed their alt text sprawling
     across the tile — keep the frame clean instead */
  font-size: 0;
  color: transparent;
}
.product:hover .thumb img,
.fx-product:hover .fx-product-image img { transform: scale(1.04); }

/* discount / tag / eta chips */
/* sizes taken from ecom-next components/storefront/product-card.tsx */
.badge-off,
.new-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--pill);
  line-height: 1;
  z-index: 2;
}
.badge-tag {
  position: absolute; top: 10px; right: 10px;
  background: #fff;
  color: #3b3b3b;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: var(--pill);
  line-height: 1;
  z-index: 2;
}
.eta {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  color: #33413a;
  padding: 4px 10px;
  border-radius: var(--pill);
  line-height: 1;
  z-index: 2;
}
.eta svg { display: block; flex: none; }

/* wishlist heart + quick-view, top-right of the thumb */
.product .icons,
.product-item .icons,
.fx-product .icons {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 3;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .22s, transform .22s;
}
.product:hover .icons,
.product-item:hover .icons,
.fx-product:hover .icons { opacity: 1; transform: translateX(0); }

.product .icons .fa,
.product .icons .bi,
.fx-product .icons .fa,
.fx-product .icons .bi,
.is_liked, .wishlist_liked {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .2s, color .2s, border-color .2s;
}
.product .icons .fa:hover,
.fx-product .icons .fa:hover,
.is_liked:hover, .wishlist_liked:hover { background: var(--green); border-color: var(--green); color: #fff; }
.is_liked.fa-heart, .icon-liked, .wishlist_liked.fa-heart {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}
.is_liked .badge { display: none; }

/* body of the card — px-1.5 pt-3.5 pb-1 */
.product-info { padding: 14px 6px 4px; }

.product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.product-category,
.product .tag,
.product-item .tag {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #2f4438; }
.rating .star, .rating .fa-star { color: var(--star); }

.product-name,
.product h5, .product-item h5,
.fx-product h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #1d2b23;
  margin-bottom: 3px;
  letter-spacing: 0;
}
.product-name a, .product h5 a, .fx-product h5 a { color: inherit; }
.product-name a:hover, .product h5 a:hover { color: var(--green); }

.product-sub { font-size: 12px; font-weight: 400; color: #a3ab9f; margin-bottom: 12px; }

.product-meta,
.product .block,
.product-item .block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.price { font-size: 17px; font-weight: 700; line-height: 1.2; color: #1d2b23; }
.price b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; color: #1d2b23; }
.price s,
.price .line-through,
.line-through,
.discount_price {
  display: block;
  font-size: 12px;
  color: #a3ab9f;
  font-weight: 400;
  text-decoration: line-through;
}

.product .buttons, .product-item .buttons, .fx-product .buttons { display: flex; gap: 8px; }
.product .buttons .btn, .fx-product .buttons .btn { font-size: 13px; padding: 9px 17px; border-radius: 8px; }

/* stock flags */
.stock-cart { color: var(--green); font-size: 12px; font-weight: 700; }
.stock-out-cart { color: var(--red); font-size: 12px; font-weight: 700; }

/* grid/list toggle used on shop, news, wishlist */
#grid, #list, #grid_news, #list_news, #grid_wishlist, #list_wishlist {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
#grid:hover, #list:hover, #grid_news:hover, #list_news:hover,
#grid_wishlist:hover, #list_wishlist:hover { background: var(--band); color: var(--green-dark); }

.sortby, .sortbynews, .sortbywishlist {
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
}

/* quantity stepper (.qtyminus / .qty / .qtyplus) */
.qtyminus, .qtyplus, .qtyminus1, .qtyplus1, .qtyminuscart, .qtypluscart {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--green-deep);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s;
}
.qtyminus:hover, .qtyplus:hover, .qtyminus1:hover, .qtyplus1:hover,
.qtyminuscart:hover, .qtypluscart:hover { background: var(--green); }

input.qty, .qty {
  width: 54px;
  text-align: center;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 4px;
}

/* --------------------------------------------------------------------------
   13. PROMO PANELS
   -------------------------------------------------------------------------- */
/* .fx-promos grid is defined once, in section 23h. */
.fx-promo { border-radius: 20px; padding: 30px 32px; position: relative; overflow: hidden; }
.fx-promo-yellow { background: var(--yellow); color: var(--green-dark); }
.fx-promo-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .62; margin-bottom: 10px;
}
.fx-promo h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; max-width: 330px; }
.fx-promo p { font-size: 13px; line-height: 1.6; opacity: .75; max-width: 330px; margin-bottom: 22px; }
.fx-promo-pills { position: absolute; top: 26px; right: 28px; display: flex; gap: 7px; }
.pill {
  font-size: 10px; font-weight: 800;
  padding: 5px 11px; border-radius: var(--pill);
  background: rgba(6, 41, 28, .1); color: var(--green-dark);
}
.pill.dark { background: var(--green-dark); color: var(--lime); }
.fx-promo-art { position: absolute; right: 24px; bottom: -14px; width: 170px; opacity: .95; pointer-events: none; }

.fx-promo-green { background: var(--green-dark); color: #fff; display: flex; flex-direction: column; }
.fx-promo-green .fx-promo-label { color: var(--lime); opacity: 1; }
.fx-promo-green h3 { font-size: 22px; margin-bottom: 18px; color: #fff; }

.fx-promo-list { list-style: none; margin-bottom: 22px; padding: 0; }
.fx-promo-list li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: rgba(255, 255, 255, .82); padding: 5px 0;
}
.fx-promo-list .check {
  width: 17px; height: 17px; flex: none;
  border-radius: 50%;
  background: var(--lime); color: var(--green-dark);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
}
.btn-lime-block {
  margin-top: auto;
  display: block; width: 100%;
  text-align: center;
  background: var(--lime);
  border: 0;
  color: var(--green-dark);
  font-weight: 800; font-size: 13px;
  padding: 13px;
  border-radius: var(--pill);
  transition: background .2s;
}
.btn-lime-block:hover { background: var(--lime-hover); color: var(--green-dark); }

/* ---------- SERVICE STRIP (banner.blade.php / newsletter.blade.php) ------- */
.fx-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 48px 0 0;
}
.fx-service {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--band);
  border: 1px solid #dfe8c9;
  border-radius: var(--radius);
  padding: 18px 20px;
}
.fx-service-icon {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-dark);
  display: grid; place-items: center;
  font-size: 17px;
}
.fx-service .title,
.fx-service h4 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 3px;
  color: var(--green-dark);
}
.fx-service p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }

/* ---------- HOME BANNERS / OFFERS (offers.blade.php) --------------------- */
.fx-offers { display: grid; gap: 16px; margin-top: 26px; }
.fx-offer { border-radius: 20px; overflow: hidden; }
.fx-offer-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 190px;
  border-radius: 20px;
  transition: transform .3s;
}
.fx-offer:hover .fx-offer-img { transform: scale(1.02); }

/* legacy banner blocks */
.banner-single img { border-radius: 20px; overflow: hidden; }

/* --------------------------------------------------------------------------
   14. STATS BAND
   -------------------------------------------------------------------------- */
/* .fx-stats / .fx-stats-grid are defined once, in section 23h. */

/* A grid item defaults to `min-width: auto`, i.e. never narrower than its own
   content — `minmax(0, 1fr)` on the TRACK does not stop the ITEM overflowing
   it. The fourth stat is the hotline number (index.blade.php: setting[11],
   e.g. 18002345678), one unbreakable 11-character string at 32px. On a phone
   that is wider than its column, so it pushed the whole document ~19px past
   the viewport and every section inherited the horizontal scroll.
   Measured with Chrome at 390px: scrollWidth 399 vs clientWidth 380. */
.fx-stat { min-width: 0; }
.fx-stat b {
  display: block;
  font-size: 32px; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--green-dark);
  margin-bottom: 5px;
  overflow-wrap: anywhere;   /* a long phone number breaks instead of overflowing */
}
.fx-stat span { font-size: 12px; color: var(--muted); font-weight: 500; }

@media (max-width: 575px) {
  .fx-stat b { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   15. JOURNAL / NEWS CARDS
   -------------------------------------------------------------------------- */
/* .fx-journal grid is defined once, in section 23h. */

.post,
.news-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  height: 100%;
}
.post:hover, .news-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* h-30 (120px) and p-4.5 (18px), matching JournalRow in ecom-next home.tsx */
.post img, .news-item img { height: 120px; width: 100%; object-fit: cover; }
.post-body, .news-item .body { padding: 18px; }
.post-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 9px;
}
.post h4, .news-item h4 { font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 14px; }
.post .more, .news-item .more { font-size: 12px; font-weight: 700; color: var(--muted); }
.post .more:hover { color: var(--green); }

/* --------------------------------------------------------------------------
   16. BREADCRUMB BANNER (.breadcum-area)
   -------------------------------------------------------------------------- */
/* Page header — matches the shop.tsx header block: breadcrumb, then a large
   title with a muted result count beside it. Previously a dark-green band. */
.breadcum-area {
  background: transparent;
  color: var(--text);
  padding: 40px 0 0;
  margin-bottom: 28px;
}
.breadcum-area h1, .breadcum-area h2, .breadcum-area .title {
  color: var(--text);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 10px 0 4px;
}
.breadcum-area p { font-size: 14px; color: var(--muted); margin: 0; }
.breadcum-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   17. SIDEBARS (account / shop filters / news / info)
   -------------------------------------------------------------------------- */
.fx-sidebar,
.sidebar-account, .sidebar-shop, .sidebar-news, .sidebar-info {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.fx-sidebar h4, .fx-sidebar .title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.fx-sidebar ul { list-style: none; padding: 0; margin: 0; }
.fx-sidebar li a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.fx-sidebar li a:hover { background: var(--band); color: var(--green-dark); }
.fx-sidebar li a.active { background: var(--green); color: #fff; }

/* price range slider (jquery-ui) */
.ui-slider { background: var(--soft); border: 0; border-radius: var(--pill); height: 6px; }
.ui-slider .ui-slider-range { background: var(--green); border-radius: var(--pill); }
.ui-slider .ui-slider-handle {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--green);
  box-shadow: var(--shadow);
  top: -6px;
  cursor: grab;
}
.ui-slider .ui-slider-handle:focus { outline: 0; box-shadow: 0 0 0 4px rgba(8, 120, 63, .18); }

/* --------------------------------------------------------------------------
   18. CART / CHECKOUT
   -------------------------------------------------------------------------- */
.fx-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.fx-panel > .fx-panel-title,
.fx-panel-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.fx-summary { background: var(--band); border: 1px solid #dfe8c9; border-radius: var(--radius); padding: 22px; }
.fx-summary .sum,
.fx-sum {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 0;
}
.fx-summary .sum.total,
.fx-sum.total {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  border-top: 1px solid #dfe8c9;
  margin-top: 8px;
  padding: 14px 0 4px;
}
.fx-sum .free { color: var(--green); font-weight: 700; }

.payment_btns { display: flex; flex-wrap: wrap; gap: 10px; }
.payment_method + label, label.payment_method { cursor: pointer; }

/* coupon row */
#apply_coupon { display: flex; gap: 10px; flex-wrap: wrap; }
#apply_coupon .form-control { flex: 1; min-width: 160px; }
#coupon_error, #coupon_require_error, #postcode_error, #billing_zip_error,
#delivery_phone_error, #pincode_error, #pincode_error1, #insta_mojo_error,
#paymentError, .error_shipping, .err, .err1 {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   19. BASKET DRAWER (optional — used when a page opts in)
   -------------------------------------------------------------------------- */
.fx-backdrop {
  position: fixed; inset: 0;
  background: rgba(23, 49, 38, .38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 90;
}
.fx-backdrop.open { opacity: 1; visibility: visible; }

.fx-drawer {
  position: fixed; top: 0; right: 0;
  height: 100%; width: 400px; max-width: 100%;
  background: #fff;
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -8px 0 40px rgba(20, 50, 35, .14);
}
.fx-drawer.open { transform: translateX(0); }
.fx-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--border);
}
.fx-drawer-head .label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.fx-drawer-head h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fx-drawer-close {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%; border: 0;
  background: #f1f2ea; color: #5b6b62;
  display: grid; place-items: center;
  font-size: 15px;
}
.fx-drawer-close:hover { background: #e4e6da; }
.fx-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.fx-drawer-foot { border-top: 1px solid var(--border); padding: 20px 24px 24px; }

.basket-item {
  display: flex; gap: 13px;
  background: #eef6e6;
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.basket-item .thumb { width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm); background: #fdf6ec; overflow: hidden; }
.basket-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.basket-item .detail { flex: 1; min-width: 0; }
.basket-item .name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.basket-item .sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.basket-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.basket-row .amount { font-size: 15px; font-weight: 800; }
.basket-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 60px 20px; }
.basket-empty .big { font-size: 34px; display: block; margin-bottom: 12px; }

.stepper { display: inline-flex; align-items: center; gap: 3px; background: var(--green-deep); border-radius: var(--pill); padding: 3px; }
.stepper button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: none; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.stepper button:hover { background: rgba(255, 255, 255, .18); }
.stepper .qty { min-width: 26px; height: 22px; width: auto; border-radius: 6px; background: #fff; color: var(--green-dark); font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0; border: 0; }

.btn-checkout {
  display: block; width: 100%;
  text-align: center;
  background: var(--green);
  border: 0;
  color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 15px;
  border-radius: var(--pill);
}
.btn-checkout:hover { background: #066532; color: #fff; }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.footer-area,
footer.footer-area,
#footer-area {
  background: var(--green-dark);
  color: #fff;
  margin-top: 64px;
  padding: 52px 0 30px;
}
.footer-area a { color: rgba(255, 255, 255, .62); }
.footer-area a:hover { color: #fff; }

.footer-area h4, .footer-area h5, .footer-area .title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 16px;
}
.footer-area p { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .6); }
.footer-area ul { list-style: none; padding: 0; margin: 0; }
.footer-area li { margin-bottom: 11px; font-size: 13px; }

.footer-brand .logo { color: #fff; font-weight: 800; font-size: 19px; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.footer-brand .logo img { max-height: 44px; }

.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
}

/* ---------- NEWSLETTER BAND ----------
   Mirrors the Newsletter section in ecom-next home.tsx: mt-16, bg band, py-14,
   centred column capped at 720px. */
.fx-newsletter-band {
  margin-top: 64px;
  background: var(--band);
  padding: 56px 0;
}
.fx-newsletter-inner {
  width: min(720px, 92%);
  margin-inline: auto;
  text-align: center;
}
.fx-newsletter-inner .fa { font-size: 26px; color: var(--green); margin-bottom: 12px; display: block; }
.fx-newsletter-inner h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 8px;
}
.fx-newsletter-inner p {
  font-size: 14px;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto;
}

.fx-newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 24px auto 0;
}
.fx-newsletter-form input {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: 13px 20px;
  font-size: 14px;
}
.fx-newsletter-form input:focus { border-color: var(--green); }
.fx-newsletter-form .btn { flex: none; padding: 13px 28px; font-size: 14px; }

.fx-newsletter-band .success-subscribte,
.fx-newsletter-band .error-subscribte {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}
.fx-newsletter-band .success-subscribte { color: var(--green); }
.fx-newsletter-band .error-subscribte { color: var(--pink); }

@media (max-width: 620px) {
  .fx-newsletter-band { padding: 40px 0; margin-top: 44px; }
  .fx-newsletter-inner h2 { font-size: 22px; }
  .fx-newsletter-form { flex-direction: column; }
}

/* footer-column newsletter/search field */
.fx-newsletter {
  display: flex;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--pill);
  padding: 5px 5px 5px 18px;
  max-width: 340px;
}
.fx-newsletter input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  font-size: 13px;
  color: #fff;
  padding: 0;
  min-width: 0;
}
.fx-newsletter input:focus { background: none; box-shadow: none; color: #fff; }
.fx-newsletter input::placeholder { color: rgba(255, 255, 255, .45); }
.fx-newsletter .btn,
.fx-newsletter button {
  width: 34px; height: 34px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--green-dark);
  font-weight: 800;
  display: grid;
  place-items: center;
}
.fx-newsletter .btn:hover, .fx-newsletter button:hover { background: var(--lime-hover); color: var(--green-dark); }

.success-subscribte { color: var(--lime); font-size: 12px; font-weight: 700; margin-top: 8px; display: block; }
.error-subscribte { color: #ff9d9d; font-size: 12px; font-weight: 700; margin-top: 8px; display: block; }

/* social icons */
.footer-area .social a,
.social-icons a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  font-size: 14px;
}
.footer-area .social a:hover, .social-icons a:hover { background: var(--lime); color: var(--green-dark); border-color: var(--lime); }

/* --------------------------------------------------------------------------
   21. MISC THEME BITS
   -------------------------------------------------------------------------- */
.site-content { padding-bottom: 20px; }

.error-content {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  display: block;
  margin-top: 5px;
}

/* back-to-top — JS fades opacity 0 -> 1 past 150px of scroll, so start at 0 */
.floating-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  z-index: 60;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s, background .2s;
}
.floating-top:hover { background: var(--green-dark); }
.floating-top a { color: #fff; font-size: 20px; line-height: 1; display: grid; place-items: center; width: 100%; height: 100%; }
.floating-top a:hover { color: #fff; }

.overlay {
  position: fixed; inset: 0;
  background: rgba(23, 49, 38, .38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 89;
}

/* Full-screen AJAX loader.
   Hidden by default; scripts.blade.php shows it with .css('display','flex')
   and hides it again with .hide(), so `none` must be the resting state. */
#loader {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(251, 250, 241, .72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 200;
}
#loader img { width: 64px; height: auto; }

/* Toast target for notification() in common/scripts.blade.php.
   That function does `x.className = "show"` then strips "show" after 3s —
   it REPLACES the class list, so visibility must hang off `.show` alone and
   every other rule must be bound to the id.

   app.css also styles #message_content (bottom: 30px, margin-left: -125px,
   min-width: 250px). Same specificity, so the properties this block does NOT
   name stay live — and a fixed box with BOTH top and bottom set stretches to
   fill the viewport, which turned the toast into a full-height column. Every
   one of those inherited properties is therefore reset explicitly below. */
#message_content {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: auto;                 /* kills app.css `bottom: 30px` — see above */
  left: auto;                   /* kills app.css `left: 50%` */
  margin: 0;                    /* kills app.css `margin-left: -125px` */
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  width: -webkit-max-content;
  width: max-content;
  min-width: 0;                 /* kills app.css `min-width: 250px` */
  max-width: min(360px, calc(100vw - 40px));
  background: #fff;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  padding: 13px 18px 13px 15px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(23, 49, 38, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(16px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

/* green tick, so the toast reads as a confirmation at a glance */
#message_content::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green) center / 11px 11px no-repeat
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}

#message_content.show {
  /* app.css runs `animation: fadein .5s, fadeout .5s 2.5s` here, and those
     keyframes animate `bottom` — which would re-stretch the box for the first
     half second. The transition above replaces them. */
  -webkit-animation: none;
  animation: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
#message_content .alert { margin: 0; background: none; border: 0; color: inherit; padding: 0; }

@media (max-width: 575px) {
  #message_content {
    top: auto;
    bottom: 20px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: translateY(16px);
  }
  #message_content.show { transform: translateY(0); }
}

.color-panel { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

.b-rad-30 { border-radius: var(--pill) !important; }

.spaceright-0 { padding-right: 0; }
.spaceleft-0 { padding-left: 0; }

.img-thumbnail { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; background: #fff; }

.commentsandnotes_bg { background: rgba(23, 49, 38, .38); }
.commentsandnotes_container {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}

/* Google map container */
#googleMap { border-radius: var(--radius); overflow: hidden; min-height: 320px; }

/* --------------------------------------------------------------------------
   22. RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .top-right-list { justify-content: flex-start; }
[dir="rtl"] .fx-hero-features { margin-left: 0; margin-right: auto; }
[dir="rtl"] .badge-off, [dir="rtl"] .new-tag { left: auto; right: 10px; }
[dir="rtl"] .badge-tag { right: auto; left: 10px; }
[dir="rtl"] .eta { left: auto; right: 10px; }
[dir="rtl"] .product .icons, [dir="rtl"] .fx-product .icons { right: auto; left: 10px; }
[dir="rtl"] .fx-promo-pills { right: auto; left: 28px; }
[dir="rtl"] .fx-promo-art { right: auto; left: 24px; }
[dir="rtl"] .fx-drawer { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .fx-drawer.open { transform: translateX(0); }
[dir="rtl"] .search-categories select { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .floating-top { right: auto; left: 22px; }

/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */
/* The product grid, promo row, stats and journal columns are governed by the
   min-width breakpoints in section 23h, transcribed from ecom-next. The
   max-width rules that used to live here fought them, so they are gone. */

@media (max-width: 991px) {
  .header-maxi .logo { margin-bottom: 12px; font-size: 20px; }
  .header-maxi .logo img { height: 46px; }
  .top-right-list { justify-content: flex-start; margin-top: 12px; }
  .header-navi .navbar-nav { align-items: stretch; }
  .header-area .header-navi .navbar .navbar-nav .nav-item > .nav-link { border-radius: 10px; }
  .mega-dropdown-menu { border-radius: var(--radius); }
  .spaceright-0, .spaceleft-0 { padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 1080px) {
  .fx-services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .fx-hero-inner { padding: 38px 30px; }
  .fx-drawer { width: 100%; }
  .fx-section { padding-top: 40px; }
  .fx-section h2 { font-size: 24px; }
}

@media (max-width: 767px) {
  body { font-size: 13px; }
  .search-categories select { max-width: 120px; font-size: 12px; }
  .breadcum-area { padding: 24px 0; margin-bottom: 24px; }
  .breadcum-area h1, .breadcum-area h2, .breadcum-area .title { font-size: 22px; }
  .fx-panel, .fx-summary { padding: 16px; }
}

@media (max-width: 620px) {
  .fx-services { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .fx-product-grid { gap: 12px; }   /* stays 2-up, as ecom-next does below lg */
  .product .thumb, .product-item .thumb, .fx-product-image { height: 150px; }
  .fx-hero { min-height: 320px; }
  .fx-hero h1 { font-size: 29px; }
  .fx-promo { padding: 22px; }
  .fx-promo h3 { font-size: 21px; }
  .fx-promo-art { display: none; }
}

/* --------------------------------------------------------------------------
   23b. PRODUCTS PARTIAL SECTIONS
   common/products.blade.php renders the visible body of the home page through
   five custom sections. These rules bring them onto the Freshly system.
   -------------------------------------------------------------------------- */

/* .pagealignment* width is set once at the top of this file, alongside
   .container — do not redefine it here or it wins by source order. */

/* ---- .product_info : icon + title + copy strip ---- */
.product_info { padding: 48px 0 0; }
.product_info .product_info1 { }
.product_info main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--band);
  border: 1px solid #dfe8c9;
  border-radius: var(--radius);
  padding: 24px 18px;
  height: 100%;
  position: relative;
}
.product_info main.bnone { border-right: 1px solid #dfe8c9; }
.product_info .product_icon { margin: 0 !important; }
.product_info .product_icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.product_info .head_desc {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--green-dark);
  margin: 0 0 4px;
}
.product_info .point_desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ---- .deal ---- */
.deal { padding: 48px 0 0; }
.deal .main1 {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.deal1 ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.deal1 ul li {
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--pill);
  cursor: pointer;
}
.deal1 ul li.active,
.deal1 ul li:hover { background: var(--band); color: var(--green-dark); }

.heading_deal {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 18px;
}

/* ---- .shopnow : full-bleed advert panel ---- */
.shopnow { padding: 48px 0 0; }
.shopnow .shopnow1 {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 300px;
  display: flex;
  align-items: center;
}
.shopnow .shopnow1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6,41,28,.92) 0%, rgba(6,41,28,.72) 45%, rgba(6,41,28,.18) 100%);
}
.shopnow .shopnow1 main { position: relative; z-index: 2; width: 100%; padding: 44px; }
.shopnow .shopnow1 .product_desc1 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 10px;
}
.shopnow .shopnow1 .product_desc2 h3,
.shopnow .shopnow1 h3.product_desc2 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #fff;
  max-width: 520px;
  margin-bottom: 22px;
}

/* ---- .Newestproducts ---- */
.Newestproducts { padding: 48px 0 0; }
.Newestproducts .main1 {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  height: auto !important;
}
.Newestproducts .products-4x,
.products-4x {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* older grid variants used by wishlist / related-product strips */
.products-3x { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.products-2x { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.products { padding-right: 0 !important; width: auto !important; margin-left: 0 !important; }

/* ---- float-era leftovers, neutralised for every Freshly grid ----
   These grids are CSS grid, but three legacy sheets still describe the old
   float layout and win on !important or specificity:

     Cchange4.css  .product              { float: left !important;
                                           padding-left: 3px !important;
                                           margin-bottom: 15px !important }
     Cchange4.css  .products-4x .product { width: 25% !important }
     Cchange4.css  .shop-area .products  { display: block; margin-left: 17px !important }
     app.css       .shop-area .products  { display: block }

   `float` is already ignored on a grid item, but the 3px pad and 15px bottom
   margin are not — they were adding to every `gap` and knocking rows out of
   alignment on the homepage, shop, wishlist and product detail alike. Scoped
   to .fx-product so the legacy cards in the unused common/products*.blade.php
   are left alone. */
.products.products-4x,
.products.products-3x,
.products.products-2x {
  display: grid !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.products .fx-product,
.fx-product-grid .fx-product {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  /* `1fr` is `minmax(auto, 1fr)`, and that `auto` floor is the item's
     min-content width — a long product name or the ADD TO CART button could
     hold a track open and push the grid past the viewport on a phone.
     min-width: 0 lets the track shrink; the card's own text clamps handle the
     overflow. Same root cause as .fx-stat in section 14. */
  min-width: 0;
}
.blogs .blog-post { min-width: 0; }

/* ---- .flexisel_carousel : brand strip ---- */
.flexisel_carousel { padding: 48px 0 0; }
.flexisel_carousel .nbs-flexisel-container .nbs-flexisel-inner {
  background: transparent;
  border: 0;
}
.flexisel_carousel .nbs-flexisel-item img {
  border-radius: var(--radius-sm);
  filter: grayscale(1);
  opacity: .55;
  transition: filter .25s, opacity .25s;
}
.flexisel_carousel .nbs-flexisel-item img:hover { filter: none; opacity: 1; }

@media (max-width: 1080px) {
  .Newestproducts .products-4x, .products-4x { grid-template-columns: repeat(3, 1fr); }
  .products-3x { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .shopnow .shopnow1 { min-height: 240px; }
  .shopnow .shopnow1 main { padding: 30px; }
  .shopnow .shopnow1 .product_desc2 h3,
  .shopnow .shopnow1 h3.product_desc2 { font-size: 26px; }
}
@media (max-width: 620px) {
  .Newestproducts .products-4x, .products-4x { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .products-3x, .products-2x { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product_info main { padding: 18px 14px; }
}

/* --------------------------------------------------------------------------
   23c. SHOP + LOGIN
   Replaces the inline <style> blocks removed from shop.blade.php and
   login.blade.php. The old shop rule was `.products-4x .product{width:25%
   !important}` — a float-era hack that breaks the CSS grid, so it is gone;
   column count is handled by the grid definition instead.
   -------------------------------------------------------------------------- */

.site-content .pagealignmentproduct { width: 100%; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 22px;
}
.toolbar .form-group { margin: 0; }
.toolbar .form-group label { margin: 0 8px 0 0; font-size: 12px; }
.toolbar select { padding: 8px 14px; border-radius: var(--pill); font-size: 13px; }
.toolbar .display1 { display: flex; gap: 6px; align-items: center; }

.showing_record, .showing_total_record { font-weight: 700; color: var(--green-dark); }

/* login / OTP screen */
.site-content #llogin,
.site-content #elogin { margin-top: 10px; }

#otprow, #passwdrow, #passwdrow2 { margin-top: 6px; }

#forgotpasswd, #forgotpasswd2 {
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 10px;
}
#forgotpasswd:hover, #forgotpasswd2:hover { color: var(--green-dark); }

/* auth card shell */
.site-content .login-area,
.site-content .signup-area {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

/* --------------------------------------------------------------------------
   23d. PRODUCT DETAIL
   Replaces the inline <style> removed from product-detail.blade.php.
   -------------------------------------------------------------------------- */

.product-detail-area .detail-area {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

#product-slider .carousel-inner { border-radius: var(--radius-sm); overflow: hidden; background: #fdf6ec; }
#product-slider .carousel-item img {
  width: 100%;
  height: 420px;
  object-fit: contain;
  background: #fdf6ec;
}

.detail-area .thumbnail {
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-right: 8px;
  cursor: pointer;
  background: #fdf6ec;
  transition: border-color .2s;
}
.detail-area .thumbnail.active,
.detail-area .thumbnail:hover { border-color: var(--green); }
.detail-area .thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.detail-area h1, .detail-area .title { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; }

.detail-area .price { font-size: 26px; font-weight: 800; color: var(--green-dark); }
.detail-area .price.line-through { font-size: 15px; color: var(--ink-faint); font-weight: 400; text-decoration: line-through; }
.detail-area .change_price { color: var(--green-dark); }

.price-box, .stock-box {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.price-box .total_price {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-dark);
}
.stock-box #current_stocks { font-weight: 700; color: var(--green); }

/* quantity stepper on the detail page */
.detail-area .input-group { align-items: center; gap: 6px; }
.detail-area .input-group .qty { width: 64px; }

/* attribute selects */
.attributes_data, .currentstock { border-radius: var(--radius-sm); }

/* description / review tabs */
#myTab { gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
#myTab .nav-link {
  border: 0;
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 18px;
}
#myTab .nav-link.active { background: var(--green); color: #fff; font-weight: 700; }
.tab-content .tab-pane { font-size: 14px; line-height: 1.75; color: var(--ink-soft); }

/* quick-add modal */
#myModalview .modal-dialog { max-width: 520px; }

/* ---------- SHOP CARD BODY ---------- */
.block-panel { padding: 14px 5px 4px; }
.block-panel .description,
.block-panel .description p {
  font-size: 12px;
  line-height: 1.5;
  color: #a3ab9f;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.block-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.wrap-dot-1 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   SHOP / CATEGORY LISTING  (shop.blade.php + common/sidebar_shop.blade.php)

   Mirrors the Sidebar component in ecom-next shop.tsx: a plain 240px column of
   sections with small uppercase headings, not a stack of bordered cards.
   ========================================================================== */

/* --- page head: breadcrumb, title + count, sort/per-page --- */
.fx-shop-crumbs {
  background: none;
  padding: 22px 0 6px;
  margin: 0;
  font-size: 13px;
}

.fx-shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 26px;
}
.fx-shop-heading h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--green-dark);
  margin: 0 0 5px;
}
.fx-shop-count { font-size: 13px; color: var(--muted); margin: 0; }

.fx-shop-tools { display: flex; gap: 10px; flex: none; }
.fx-shop-tools select {
  width: auto;
  min-width: 150px;
  height: 42px;
  padding: 0 34px 0 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  /* native arrow off, own chevron in the 34px reserved on the right */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff right 14px center / 11px 7px no-repeat
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235b6b62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
}
[dir="rtl"] .fx-shop-tools select {
  padding: 0 16px 0 34px;
  background-position: left 14px center;
}
.fx-shop-tools select::-ms-expand { display: none; }
.fx-shop-tools select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8, 120, 63, .13); }

/* --- sidebar --- */
.fx-shop-filters { padding-bottom: 30px; }
.fx-filter-group { margin-bottom: 26px; }
.fx-filter-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* the "All products" row sits in its own .fx-cat-list above the category
   partial, so it needs the divider the partial's own items get */
.fx-filter-group .fx-cat-list + .fx-cat-list > li:first-child { border-top: 1px solid var(--border); }
.fx-cat-list a.active {
  background: var(--band);
  color: var(--green-dark);
  font-weight: 700;
}

/* collections — pill chips, one per `type` the sort dropdown offers */
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .2s, border-color .2s, color .2s;
}
.fx-chip:hover { background: var(--band); border-color: #cfe0c4; color: var(--green-dark); }
.fx-chip.active { background: var(--green); border-color: var(--green); color: #fff; }

/* price range */
#slider-range { margin: 6px 4px 16px; }
#slider-values { display: flex; align-items: center; gap: 8px; }
#slider-values > div {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
#slider-values .cur { font-size: 13px; font-weight: 700; color: var(--muted); }
.fx-range-dash { color: var(--muted); flex: none; }
.fx-price-input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
}
.fx-price-input:focus { outline: 0; }

/* attribute checkboxes */
.fx-filter-group .list { list-style: none; margin: 0; padding: 0; }
.fx-shop-filters .filters_box { margin-right: 8px; accent-color: var(--green); }
.fx-shop-filters .form-check { padding: 0; }
.fx-shop-filters .form-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
}
.fx-shop-filters .form-check-label:hover { background: var(--soft); color: var(--text); }

.fx-filter-actions { display: flex; gap: 8px; }
.fx-filter-actions .btn { flex: 1; padding: 11px 14px; font-size: 13px; }
#filters_applied { font-size: 12px; font-weight: 700; color: var(--green); }

/* --- grid column ---
   The float-era overrides these grids inherit are neutralised once, in the
   product-grid section above. What is left here is the column count: the
   listing sits beside a 240px sidebar, so it needs to step down earlier than
   the full-width grids on the homepage do. */
.shop-area .products.products-4x { grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1200px) {
  .shop-area .products.products-4x { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .shop-area .products.products-4x { grid-template-columns: repeat(2, 1fr); }
}
/* stays 2-up on phones, matching the homepage grid — a single card per row
   made the listing an unreasonably long scroll */
@media (max-width: 480px) {
  .shop-area .products.products-4x { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 359px) {
  .shop-area .products.products-4x { grid-template-columns: 1fr; }
}

/* --- load more --- */
.fx-shop-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 0 8px;
}
.fx-shop-more .btn {
  min-width: 220px;
  padding: 14px 34px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--green-dark);
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 700;
}
.fx-shop-more .btn:hover:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.fx-shop-more .btn:disabled { opacity: .6; cursor: default; }
.fx-more-left { color: var(--muted); font-weight: 600; }
.fx-shop-more .btn:hover:not(:disabled) .fx-more-left { color: rgba(255, 255, 255, .8); }

/* busy state — the button keeps its width so the row does not jump */
.fx-shop-more .btn.is-loading { color: transparent; position: relative; }
.fx-shop-more .btn.is-loading .fx-more-left { color: transparent; }
.fx-shop-more .btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(8, 120, 63, .25);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: fx-spin .7s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* the whole catalogue is shown — replaces the button, never sits beside it */
.fx-shop-end { font-size: 13px; color: var(--muted); }

.fx-shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 70px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fx-shop-empty .big {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 30px;
}
.fx-shop-empty strong { font-size: 18px; font-weight: 800; color: var(--text); }
.fx-shop-empty .hint { font-size: 13px; color: var(--muted); max-width: 320px; line-height: 1.5; }
.fx-shop-empty .btn { margin-top: 16px; }

@media (max-width: 991px) {
  .fx-shop-head { align-items: flex-start; }
  .fx-shop-heading h1 { font-size: 24px; }
  .fx-shop-tools { width: 100%; }
  .fx-shop-tools select { flex: 1; min-width: 0; }
  .fx-shop-filters { padding-bottom: 8px; }

  /* Stacked, the sidebar put nine aisles, four chips and a price slider above
     the first product. The aisles become a horizontal scroller so the grid
     stays roughly a thumb's reach from the top of the page.

     The scroller lives on the GROUP, not on each list: sidebar_shop renders
     "All products" in its own .fx-cat-list ahead of the one from
     common/categories.blade.php, and scrolling them separately left
     "All products" stranded on a row of its own. */
  .fx-shop-filters > .fx-filter-group:first-child {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .fx-shop-filters > .fx-filter-group:first-child::-webkit-scrollbar { display: none; }
  .fx-filter-group .fx-cat-list {
    display: inline-flex;
    vertical-align: top;
    gap: 8px;
    margin-right: 8px;
  }
  .fx-filter-group .fx-cat-list > li { flex: none; }
  .fx-filter-group .fx-cat-list > li + li { border-top: 0; }
  .fx-filter-group .fx-cat-list a {
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: var(--pill);
    padding: 8px 14px;
  }
  .fx-cat-list a.active { border-color: var(--green); }

  /* sub-categories would break the single row; the parent aisle still reaches them */
  .fx-filter-group .fx-cat-list-sub { display: none; }
}

/* shop layout: 240px filter column + fluid grid */
@media (min-width: 992px) {
  .shop-area .row > [class*="col-lg-3"] { flex: 0 0 240px; max-width: 240px; }
  .shop-area .row > [class*="col-lg-9"] { flex: 1 1 0; max-width: none; }
}

@media (max-width: 767px) {
  #product-slider .carousel-item img { height: 40vh; object-fit: cover; }
  .detail-area .thumbnail { width: 56px; height: 56px; }
  .product-detail-area .detail-area { padding: 16px; }
}

/* --------------------------------------------------------------------------
   23e. CART, CHECKOUT AND ACCOUNT PAGES
   These templates keep their own markup (their inline CSS drives functional
   responsive tables), so the Freshly look is applied through their container
   classes rather than by rewriting them.
   -------------------------------------------------------------------------- */

.cart-area,
.checkout-area,
.payment-area,
.shipping-methods,
.payment-methods,
.coupons,
.shop-area,
.blog-area,
.contact-area,
.info-pages-area,
.my-order-area,
.orders-detail-area,
.registration-area,
.login-area,
.wishlist-area {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}

/* section headings on these pages */
.heading,
.heading.text-secondary {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text) !important;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.heading h2, .heading h3, .heading h4 { font-size: inherit; font-weight: inherit; margin: 0; }
.heading small { font-size: 12px; font-weight: 600; }
.heading small a { color: var(--green); }

/* cart line-item table */
.cart-area .table thead th { white-space: nowrap; }
.cart-area .table td img,
#tableresp1 td img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 10px;
  background: #fdf6ec;
}

/* totals column */
#subtotal56, #subtotal561, #subtotal562, #subtotal5625 { font-weight: 700; color: var(--green-dark); }
#discount { color: var(--green); font-weight: 700; }
.table .last { color: var(--green-dark) !important; }

/* coupon block */
.coupons .form-control { max-width: 260px; }
.coupons label { font-weight: 700; }

/* shipping + payment option rows */
.shipping-methods label,
.payment-methods label,
.payment_btns label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.shipping-methods label:hover,
.payment-methods label:hover { border-color: var(--green); background: #fff; }

.payment-methods img, .payment_btns img { max-height: 26px; width: auto; }

/* the paypal / razorpay / stripe button row */
.payment_btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* order status pills */
.order-area .badge, .table .badge { font-size: 11px; padding: 6px 12px; }

/* profile avatar upload */
.upload-choose-icon,
.inputFile + label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tint);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#uploaded_image {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--border);
}

/* --------------------------------------------------------------------------
   23f. SIDEBARS
   Replaces the inline <style> removed from sidebar_account / sidebar_info /
   sidebar_news (each held one small mobile margin tweak on #pagealignment6;
   sidebar_news's block also opened with a stray "<<style>" that printed a
   literal "<" onto the page).
   -------------------------------------------------------------------------- */

.sidebar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}
.sidebar .widget + .widget { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }

.sidebar .block-title h2,
.sidebar .block-title h3 {
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green) !important;
  margin-bottom: 14px;
}

.sidebar .list-categories,
.sidebar .block-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar .list-categories li,
.sidebar .block-content li { margin: 0; }
.sidebar .list-categories a,
.sidebar .block-content li > a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.sidebar .list-categories a:hover,
.sidebar .block-content li > a:hover { background: var(--band); color: var(--green-dark); }
.sidebar .list-categories a.active,
.sidebar .block-content li.active > a { background: var(--green); color: #fff; }

@media (max-width: 576px) {
  .sidebar { padding: 14px; }
}

/* --------------------------------------------------------------------------
   23g. NEWS / BLOG LISTING
   The blog markup uses .blog-post > .blog-thumb with an overlay, a date chip
   and the title stacked on the image. Reworked into the Freshly post card.
   -------------------------------------------------------------------------- */

/* The grid container is .blogs (news.blade.php: `<div class="blogs blogs-4x">`),
   NOT .blog-block — .blog-block is one post's text well. This rule used to sit
   on .blog-block, which left the listing as app.css's float layout and turned
   each post's title / excerpt / read-more into three side-by-side columns. */
.blogs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.blogs.blogs-4x { grid-template-columns: repeat(4, 1fr); }
.blogs.blogs-2x { grid-template-columns: repeat(2, 1fr); }
.blog-area .blogs { padding-right: 0; width: auto; }

/* app.css floats each post at 25% / 33% and adds its own gutters — !important
   because `.blog-area .blogs.blogs-4x .blog-post` outranks anything sane here */
.blogs .blog-post {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.blog-block { display: block; }

@media (max-width: 1080px) {
  .blogs, .blogs.blogs-4x { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blogs, .blogs.blogs-4x, .blogs.blogs-2x { grid-template-columns: 1fr; }
}

.blog-post {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.blog-post:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.blog-thumb { position: relative; }
.blog-thumb > img { width: 100%; height: 190px; object-fit: cover; display: block; }

.blog-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding: 16px 18px 6px;
  margin: 0;
}
.blog-title a { color: var(--text); }
.blog-title a:hover { color: var(--green); }

.blog-date {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #fff;
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.25;
  box-shadow: var(--shadow);
}
.blog-date strong { display: block; font-size: 16px; color: var(--green-dark); letter-spacing: -.02em; }

.blog-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 41, 28, .45);
  opacity: 0;
  transition: opacity .25s;
}
.blog-thumb:hover .blog-overlay { opacity: 1; }
.blog-overlay a {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.blog-text { overflow: hidden; padding: 0 18px 12px; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* .blog-link is the <a> itself in news.blade.php, not a wrapper around one —
   `.blog-link a` matched nothing, so Readmore rendered as unstyled body text */
.blog-link {
  display: inline-block;
  padding: 0 18px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}
.blog-link:hover { color: var(--green-dark); }

@media (max-width: 860px) { .blog-block { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-block { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   23h. ECOM-NEXT HOME LAYOUT
   Transcribed from D:\M2\ecom-next resources/js/pages/storefront/home.tsx.
   Tailwind's breakpoints are used verbatim: sm 640, md 768, lg 1024, xl 1280.
   -------------------------------------------------------------------------- */

/* w-[92%] max-w-[1160px] mx-auto — the wrapper every section sits in */
.fx-container {
  width: 92%;
  max-width: 1160px;
  margin-inline: auto;
}

/* section header: flex-col items-start sm:flex-row sm:items-end */
.fx-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
@media (min-width: 640px) {
  .fx-section-header { flex-direction: row; align-items: flex-end; }
}
.fx-section-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

.fx-viewall {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
.fx-viewall:hover { color: var(--green-dark); text-decoration: underline; }

/* grid-cols-2 gap-6 lg:grid-cols-3 xl:grid-cols-4 */
.fx-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 1024px) { .fx-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .fx-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- promo row: mt-13 gap-4.5 lg:grid-cols-[1.55fr_1fr] ---- */
.fx-promos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 52px;
}
@media (min-width: 1024px) {
  .fx-promos { grid-template-columns: 1.55fr 1fr; }
}

.fx-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--pill);
  transition: transform .18s;
}
.fx-btn-dark:hover { transform: translateY(-2px); color: #fff; }

.fx-btn-lime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--pill);
  margin-top: 24px;
  transition: background .2s;
}
.fx-btn-lime:hover { background: #fff; color: var(--green-dark); }

/* ---- deal of the day: mt-14 rounded-3xl bg-[#0b3a22] ---- */
.fx-deal {
  margin-top: 56px;
  overflow: hidden;
  border-radius: 24px;
  background: #0b3a22;
  color: #fff;
}
.fx-deal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 32px;
}
@media (min-width: 640px) { .fx-deal-inner { padding: 44px; } }
@media (min-width: 1024px) { .fx-deal-inner { grid-template-columns: minmax(0, 1fr) 320px; } }

.fx-deal-label {
  display: inline-block;
  margin-bottom: 12px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--pill);
}
.fx-deal h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0;
}
@media (min-width: 640px) { .fx-deal h2 { font-size: 36px; } }

.fx-deal-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.fx-deal-price .amount { font-size: 30px; font-weight: 800; }
.fx-deal-price s { font-size: 18px; color: rgba(255, 255, 255, .5); }
.fx-deal-off {
  background: var(--pink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--pill);
}
.fx-deal-countdown { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--lime); }
.fx-deal-countdown:empty { display: none; }

.fx-deal-art { overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.fx-deal-art img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- stats: mt-16 py-11, grid-cols-2 lg:grid-cols-4 ---- */
.fx-stats { margin-top: 64px; background: var(--band); padding: 44px 0; }
.fx-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 1024px) { .fx-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- journal: gap-4.5 md:grid-cols-3 ---- */
.fx-journal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 768px) { .fx-journal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fx-journal .post { display: block; }
.fx-journal .post-label { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   23i. HEADER STYLE THREE
   settings[80] = 'three', so common/header_three.blade.php is the live header.
   Its 642-line inline <style> block was injected mid-body — after freshly.css —
   and therefore repainted the header in the old theme. The block is gone; the
   three rules from it that were doing real work are reproduced here.
   -------------------------------------------------------------------------- */

/* Mobile search toggle: hidden by default, revealed under 576px.
   `display: contents` is what the original used — it lets the input sit in the
   parent's flex flow rather than forming a box of its own. */
#searchmobile { display: none; }
/* #searchmobile holds the phone-width search box, wishlist and basket. It was
   invisible at EVERY width: css/mediachange.css line 67 carries a bare
   `#searchmobile { display: none !important }` that sits outside any media
   query, so it applied globally and beat the rule below.

   Net effect on a phone: .hidden-xs (change1.css, <=575px) hid the desktop
   search and account columns, and this block — their replacement — was hidden
   too, so the header rendered as a bare logo with no way to reach the cart.

   Same specificity, but this file loads last, so !important here wins. */
@media (max-width: 575px) {
  /* Reclaim the header row. Measured at 390px before this: the row was 262px
     wide inside a 350px container, inset 44px left and 29px right — the
     template's inline `style="margin-left:-1rem"` on .container-fluid plus the
     leftover .pagealignment gutters. */
  .logo_sec .header-maxi > .container-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px;
    padding-right: 14px;
    width: 100%;
    max-width: none;
  }
  .logo_sec .header-maxi .row.pagealignment {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
  }

  /* Logo shares row one with the icons instead of taking a col-12 to itself. */
  .logo_sec .header-maxi .row > .col-md-3 {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
  }

  /* #searchmobile wraps the search form and the wishlist/basket in two levels
     of layout div. `display: contents` on that chain promotes the form and the
     .mail block to direct children of the header row, so they can be ordered
     independently: icons beside the logo, search full-width beneath.

     Without this the form and .mail shared one 262px line and .mail took 238px
     of it — the search box computed to 2px wide, which is the sliver that was
     showing on phones. */
  #searchmobile,
  #searchmobile > [class*="col-"],
  #searchmobile > [class*="col-"] > .row { display: contents !important; }

  #searchmobile .mail { order: 2; flex: 0 0 auto; width: auto; margin-left: auto; }

  /* mediachange: `.header-area .header-maxi .mail .top-right-list
     { margin-top: -40px !important; margin-right: -1.5rem }` — a hack that
     dragged the icons up over the old search row. It also stretched .mail to
     the full width of the header, pushing the logo onto its own line. */
  #searchmobile .mail .top-right-list {
    margin: 0 !important;
    width: auto;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end !important;
  }

  /* "Hello / Sign In · Register" duplicates the Login and Register links that
     the .head1 strip already shows above; it cost ~150px of the header row. */
  #searchmobile .logfont { display: none; }

  /* let the wordmark give way so the icons stay on the logo's line */
  .logo_sec .header-maxi .row > .col-md-3 { flex: 0 1 auto; min-width: 0; }
  .header-maxi .logo { max-width: 100%; overflow: hidden; }

  #searchmobile form {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* the basket pill loses its label on a phone — the icon and count carry it */
  #searchmobile .cart-header > a { padding: 10px 13px; }
  #searchmobile .cart-header > a > span:not(.badge) { display: none; }
}

/* Scrolling notice (settings[92]). The .head1 copy shows on desktop, the .marq
   copy under 768px, so exactly one is visible at a time. */
.marq .marq1 { display: none; }
@media (max-width: 767px) {
  .marq .marq1 { display: block; font-size: 15px; }
}
.marq { background: var(--band); }
.marq marquee, .head1 marquee {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 6px 0;
}
@media (max-width: 767px) {
  .head1 #b { display: none; }
}

/* --- slim utility strip ---------------------------------------------------
   ecom-next has no band above the header at all, but this one carries the
   only "My Account" and "Logout" links a signed-in customer has, so it stays —
   compressed to a single quiet line instead of the three-row block it was.

   The block was breaking because the marquee wrapper (#b) carries an inline
   `width: 100%`, which pushed the account list onto its own centred row. */
.head1 { background: var(--band); border-bottom: 1px solid var(--border); }
.head1 .header-mini { background: transparent; border: 0; }
.head1 .navbar { flex-wrap: nowrap; padding: 0; min-height: 0; }
.head1 .navbar-collapse { display: flex !important; flex-wrap: nowrap; align-items: center; }

.head1 #b {
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.head1 #b marquee { width: 100%; }

.head1 .navbar-nav {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin-left: auto;
  white-space: nowrap;
}
.head1 .navbar-nav .nav-item { display: flex; align-items: center; }

.head1 .nav-link,
.head1 .text-light {
  color: var(--ink-soft) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px !important;
  line-height: 1.4;
}
.head1 .text-light:hover,
.head1 .nav-link:hover { color: var(--green) !important; }
.head1 .myaccount { font-weight: 700; }

/* the avatar was rendering at full size and stretching the strip */
.head1 .p-pic img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
  vertical-align: middle;
}

.logo_sec .header-maxi { padding: 14px 0; }

/* This container carries an inline `margin-left: -1rem`, so it needs
   !important to cancel. It must resolve to auto, not 0 — setting 0 here pinned
   the logo/search row to the left while every other row centred. */
.logo_sec .container-fluid {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- the single header row: logo | search | account + basket -------------
   storefront-layout.tsx lays this out with flex — the logo takes its natural
   width, the search grows to fill, and the controls hug the right edge.

   The markup here is a 12-column grid instead: col-md-3 / col-md-4 / col-md-5,
   then col-lg-4 / 4 / 4. Equal thirds box the logo into a third of the header
   and cap the search at a third regardless of the space available, which is
   what threw the alignment out. The grid is converted to a flex row from md up;
   below md the columns stack as Bootstrap intends. */
@media (min-width: 768px) {
  .logo_sec .header-maxi .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
  }
  .logo_sec .header-maxi .row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* search column — the one carrying px-0 — takes the remaining width */
  .logo_sec .header-maxi .row > .px-0 {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* account + basket column hugs the right edge */
  .logo_sec .header-maxi .row > .mailalign {
    margin-left: auto;
    text-align: right;
  }
}

.logo_sec .search-categories { max-width: 460px; margin-left: auto; margin-right: auto; }
.logo_sec .search-categories input[type="search"] { height: 44px; }
.logo_sec .search-categories .btn-grey {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  border-radius: var(--pill);
  padding: 9px 16px;
  margin: 4px;
}
.logo_sec .search-categories .btn-grey:hover { background: #066532; color: #fff; }

.logo_sec .top-right-list { gap: 8px; }
.logo_sec .top-right-list > li { position: relative; display: flex; align-items: center; }

/* wishlist + account icon buttons */
.logoicon1, .logoicon3 {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--tint);
  color: var(--ink-soft) !important;
  font-size: 17px;
  padding: 0 !important;
  transition: background .2s, border-color .2s, color .2s;
}
.logoicon1:hover, .logoicon3:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff !important;
}

/* the wishlist counter rides on the heart */
.logo_sec .wishlist-count,
.logo_sec #wishlist-count {
  position: absolute !important;
  top: -4px;
  right: -6px;
  left: auto;
  transform: none !important;
  background: var(--lime) !important;
  color: var(--green-dark) !important;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--pill);
  line-height: 1.4;
}

/* Hello / Sign In · Register */
.logfont {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
}
.logfont .logoicon2 { color: var(--text) !important; font-size: 13px; }
.logfont .logoicon2:hover { color: var(--green) !important; }

/* basket button */
.logo_sec .cart-header > a {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  padding: 11px 18px;
}
.logo_sec .cart-header > a:hover { background: #066532; color: #fff; }
/* The basket count is a .badge, so app.css's
   `.header-area .header-maxi .top-right-list li > a .badge` was absolutely
   positioning it at left:-5px — it floated off the left edge of the pill
   instead of following "My Cart". Selector below is deliberately long so it
   outweighs that rule; put the chip back in the button's flex row. */
.header-area .header-maxi .top-right-list .cart-header > a .cart-count,
.logo_sec .cart-header > a .cart-count {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  margin: 0;
  background: var(--lime);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border-radius: var(--pill);
}

@media (max-width: 991px) {
  .logo_sec .search-categories { margin-left: 0; }
  .logo_sec .top-right-list { justify-content: flex-end; margin-top: 0; }
}

/* Tablet portrait / large phone. `.hidden-sm` is referenced by the template but
   defined by no stylesheet, so above 575px the desktop columns all stay on —
   and their col-sm-* widths (12 / 7 / 12) drop the logo, search and account
   list onto three separate rows. Pull the logo and the account list onto one
   row and give the search its own full-width line beneath. */
@media (min-width: 576px) and (max-width: 767px) {
  .logo_sec .header-maxi .row { align-items: center; }
  .logo_sec .header-maxi .row > .col-md-3 {           /* logo */
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
  .logo_sec .header-maxi .row > .mailalign {          /* wishlist + account + basket */
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .logo_sec .header-maxi .row > .col-md-4 {           /* search */
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 12px;
  }
  .logo_sec .search-categories { max-width: none; }
}

/* the caret on the account dropdown was hidden by the removed block */
.logo_sec .dropdown-toggle::after,
.head1 .dropdown-toggle::after { display: none; }

/* --------------------------------------------------------------------------
   23j. MOBILE CORRECTIONS

   css/mediachange.css and css/change1.css are the pre-Freshly responsive
   sheets. Their phone blocks still describe the OLD header, and because they
   are scoped two or three selectors deep they outrank the theme's own rules —
   so the storefront reverted to the old design below 768px even though the
   desktop layout was current.

   Every rule below names the legacy rule it corrects. Delete a rule here only
   once the matching legacy rule is gone.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* mediachange (340-575 and 240-340): `.header-area .header-mini
     { background: #ced4da }` — a grey slab painted over the Freshly band. */
  .header-area .head1 .header-mini { background: transparent; min-height: 0; }

  /* the utility strip has to breathe once it is the full width of a phone */
  .head1 .navbar-nav { gap: 0 14px; flex-wrap: wrap; }
  .head1 .nav-link { padding: 4px 0 !important; font-size: 12px; }
}

@media (max-width: 575px) {
  /* mediachange: `.header-area .header-maxi .logo img { width: 50%;
     margin-top: -20px; object-fit: cover }` — halved the mark, cropped it and
     pulled it up out of the header row. */
  .header-area .header-maxi .logo img {
    width: auto !important;
    height: 42px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  .header-maxi .logo { font-size: 18px; gap: 8px; margin-bottom: 0; }

  /* mediachange: `.search-categories { display: contents !important }`. An
     element set to `contents` generates no box, so the pill's border, radius
     and background never painted — and the companion rule
     `.header-area .header-maxi .search-categories { border: 2px solid ... }`
     was painting onto nothing. Rebuilt as a real input group. */
  .header-area .header-maxi .search-categories {
    display: flex !important;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border) !important;
    border-radius: var(--pill);
    overflow: hidden;
    padding: 0;
  }
  .header-area .header-maxi .search-categories input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    border: 0;
    background: none;
    padding: 0 8px 0 16px;
    font-size: 14px;
  }
  .header-area .header-maxi .search-categories input[type="search"]:focus { outline: 0; box-shadow: none; }

  /* mediachange: `.btn-grey { margin-right: 4.1rem; margin-left: -6px }` —
     shoved the search button 66px in from the right edge of its own pill. */
  .header-area .header-maxi .search-categories .btn-grey {
    flex: 0 0 auto;
    width: 36px;
    height: 36px !important;
    margin: 0 3px 0 0 !important;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: #fff;
  }

  /* change1: `.search-categories { display: none }` hid the search box outright
     below 576px — the rules above re-assert it, this is just the note. */

  /* change1: `.product article .discount-tag { background:#2e6b4f;
     border-radius:0; top:9px; right:9px }` repainted the sale badge dark green,
     squared it off and moved it to the opposite corner — so the same card
     looked like a different component on a phone. Selector matches theirs at
     0,3,0 and wins on order. */
  .product article .discount-tag,
  .product article .badge-off,
  .product article .new-tag {
    top: 10px;
    right: auto;
    left: 10px;
    border-radius: var(--pill);
    background-color: var(--pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    min-width: 0;
  }
  .product article .badge-tag { left: auto; right: 10px; }

  /* change1: `.product article .thumb { height: 135px }` (0,3,0) beat the
     theme's 150px, so mobile tiles were shorter on listing pages than the
     product cards elsewhere. Matched at the same weight. */
  .product article .thumb,
  .product article .fx-product-image { height: 150px; }

  /* content: headings and the breadcrumb banner scale down with the page */
  .fx-section-header h2, .section-title, .breadcum-area h1, .breadcum-area h2 { font-size: 21px; }
  .site-content { padding-top: 8px; }

  /* The tab pills are `white-space: nowrap` inside an inline-flex pill, so on a
     phone the group wrapped to two lines and the rounded background wrapped
     with it. Scroll them sideways instead — one clean row, as everywhere else. */
  .fx-tabs {
    display: flex;
    /* the markup is `class="fx-tabs nav nav-pills"`, and Bootstrap's .nav sets
       flex-wrap: wrap — without this the row wraps instead of scrolling */
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fx-tabs::-webkit-scrollbar { display: none; }
  .fx-tab { flex: none; padding: 8px 14px; }
}

/* mediachange (240-340): `.btn { font-size: 1rem; color: #212529;
   padding-left: 5px; padding-top: 0 }` resets every button on the site to the
   browser default at the narrowest widths. Colour is already re-asserted by
   the .btn-* rules in section 3; size and padding are restored here. */
@media (max-width: 340px) {
  body .btn { font-size: 13px; padding: 11px 18px; line-height: 1.2; }
  body .fx-shop-more .btn { min-width: 0; width: 100%; }
}

/* ---- footer ---- */
@media (max-width: 767px) {
  .footer-area { margin-top: 40px; padding: 36px 0 24px; }
  .fx-newsletter-band { margin-top: 40px; padding: 36px 0; }
  .fx-newsletter-inner h2 { font-size: 21px; }
  .fx-newsletter-inner p { font-size: 13px; }
}
@media (max-width: 420px) {
  /* input + button side by side leaves the field too narrow to read a typed
     address on a small phone */
  .fx-newsletter-form { flex-direction: column; }
  .fx-newsletter-form .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   24. CASCADE GUARD

   Several templates still carry their own <style> block in the body
   (products, viewcart, shop, login, view-order, header_three, …). Those load
   AFTER this file, and some use !important, so they would otherwise win and
   repaint the page in the old palette.

   The rules below re-assert only the Freshly *colour* tokens, at a higher
   specificity than those blocks use, so layout tweaks in the templates keep
   working while the palette stays consistent. Remove a rule here once the
   matching template's inline <style> has been migrated into this file.
   -------------------------------------------------------------------------- */

/* ---- product card text -------------------------------------------------
   app.theme.2.css sets `.product article .title { display:flex;
   justify-content:center; min/max-height:30px }`, which centred every product
   name and clipped it to one squashed line. ecom-next left-aligns the name and
   lets it wrap to two lines. Specificity here has to beat 0,2,1. */
body .product article .title,
body .fx-product article .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  min-height: 0;
  max-height: none;
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #1d2b23;
}
body .product article .title a,
body .fx-product article .title a { color: inherit; }
body .product article .title a:hover { color: var(--green); }

body .product article .tag,
body .fx-product article .tag {
  display: block;
  text-align: left;
  padding-top: 0;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

body .product article .price,
body .fx-product article .price { text-align: left; }

/* Out-of-stock reads as an ordinary green "buy" button because .btn-add is
   declared after .btn-danger and was overriding its background. */
body .btn-danger.btn-add {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
body .btn-danger.btn-add:hover { background: #c72532; border-color: #c72532; }

/* "Added" state — ecom-next dims the control rather than recolouring it */
body .btn-add.active { background: var(--green-deep); opacity: .55; }

/* ---- filter tabs -------------------------------------------------------
   `.products-area .nav .nav-link.active` painted the active tab #1b86ee blue.
   ecom-next's active tab is white on the #f1f1e7 track. */
body .products-area .nav .fx-tab,
body .fx-tabs .fx-tab {
  background: transparent;
  color: var(--muted);
  border: 0;
  /* app.theme.2.css: `.products-area .nav .nav-link { width: 140px;
     margin-right: 1px }` at 0,3,0 — a fixed track width from the old square
     tab bar. It stretched all three pills to 140px each and blew the group out
     to 437px. These selectors are 0,3,1 so they carry. */
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  margin-right: 0;
  margin-bottom: 0;
  padding: 9px 17px;
  white-space: nowrap;
}
body .products-area .nav .fx-tab:hover,
body .fx-tabs .fx-tab:hover {
  background: transparent;
  color: var(--text);
}
body .products-area .nav .fx-tab.active,
body .products-area .nav .nav-link.fx-tab.active,
body .fx-tabs .fx-tab.active {
  background: #fff;
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(20, 50, 35, .12);
}

/* old yellow #f4c340 badges -> Freshly pink / lime */
body .product article .new-tag,
body .product article .discount-tag,
body .fx-product .new-tag,
body .fx-product .discount-tag {
  background: var(--pink) !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  font-weight: 700 !important;
}
body .product article .upcomming-tag,
body .fx-product .upcomming-tag {
  background: #fff !important;
  color: var(--green-dark) !important;
}

/* product card frame */
body .product article,
body .fx-product article {
  border: 0 !important;
  background: transparent !important;
  height: auto !important;
}

/* old amber CTAs -> Freshly green */
body .btn-outline-warning {
  background: transparent !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  border-radius: var(--pill) !important;
}
body .btn-outline-warning:hover {
  background: var(--green) !important;
  color: #fff !important;
}
body .slidersign_btn,
body .sign_btn {
  background: var(--lime) !important;
  color: var(--green-dark) !important;
  border-radius: var(--pill) !important;
  font-weight: 700 !important;
}
body .slidersign_btn:hover,
body .sign_btn:hover { background: var(--lime-hover) !important; color: var(--green-dark) !important; }

body .phonebtn {
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--pill) !important;
  padding: 10px 20px !important;
}

/* section headings inside the products partial */
body .heading_deal,
body .shopnow .shopnow1 h3 {
  font-family: var(--ff) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: var(--text) !important;
}

/* legacy footer band -> Freshly dark green */
body .footer,
body section.footer {
  background: var(--green-dark) !important;
  color: #fff !important;
}
body .footer h5, body section.footer h5 { color: var(--lime) !important; }
body .footer p, body section.footer p { color: rgba(255, 255, 255, .6) !important; }
body .footer a, body section.footer a { color: rgba(255, 255, 255, .62) !important; }
body .footer a:hover, body section.footer a:hover { color: #fff !important; }

/* ---- order-status timeline (inline <style> in view-order.blade.php) ----
   Hardcoded #d6dce0 / #ddd / white against the Freshly palette. The inline
   block loads after this file, so these need to outrank it: `body` prefix for
   the plain rules, `!important` where the template already uses it. */
body .timeline .status { border-top-color: var(--border); }
body .timeline .status::before {
  background-color: #fff;
  border-color: var(--border);
}
body .timeline li.complete .status::before {
  background-color: var(--green);
  border-color: var(--green);
}
body .timeline li.complete .status { border-top-color: var(--green); }
body .timeline .status label { color: var(--text); font-size: 13px; }

/* ---- cart line-item thumbnail (inline <style> in viewcart.blade.php) ----
   Template sets `border: 1px solid #ced4da !important` — matched here so the
   grey does not read as a different component to the rest of the cart. */
body .table .item .cart-thumb {
  border-color: var(--border) !important;
  border-radius: 12px !important;
  background: var(--soft);
}

/* --------------------------------------------------------------------------
   25. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header-area, .footer-area, .fx-topbar, .floating-top, .fx-drawer, .fx-backdrop { display: none !important; }
  body { background: #fff; }
}