/* flatpickr's base stylesheet is structural, not just skin (layout/positioning
   rules the calendar popup depends on) — imported here, as the literal first
   line of this file, so postcss-import (webpack.mix.js) inlines it before
   Tailwind's own @layer components overrides below. Deliberately NOT
   imported from JS (style-loader): that would inject it into <head> at
   runtime *after* this file's own <link> (already present at page load, see
   _layout.blade.php), letting flatpickr's base rules win the cascade over
   our overrides further down this file. */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;box-sizing:border-box;touch-action:manipulation;background:#fff;box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }

::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{width:100% !important;margin-right:auto !important;margin-left:auto !important;padding-right:16px !important;padding-left:16px !important}
.container{width:100%;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}
@media (min-width: 640px){
.\!container{max-width:640px !important}
.container{max-width:640px}}
@media (min-width: 768px){
.\!container{max-width:768px !important}
.container{max-width:768px}}
@media (min-width: 1024px){
.\!container{max-width:1024px !important;padding-right:24px !important;padding-left:24px !important}
.container{max-width:1024px;padding-right:24px;padding-left:24px}}
@media (min-width: 1280px){
.\!container{max-width:1280px !important}
.container{max-width:1280px}}
@media (min-width: 1536px){
.\!container{max-width:1536px !important}
.container{max-width:1536px}}
    /* Primary CTA: Mustard Yellow bg + dark text (DESIGN.md "Buttons") */
    .btn-primary{display:inline-flex;align-items:center;justify-content:center;border-radius:0.25rem;--tw-bg-opacity:1;background-color:rgb(var(--store-secondary, 255 211 126) / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-family:IBM Plex Sans, Noto Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(26 28 26 / var(--tw-text-opacity, 1));transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .btn-primary:hover{--tw-shadow:0px 4px 20px rgba(0,0,0,0.04);--tw-shadow-colored:0px 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}

    /* Secondary button: Deep Green bg + white text */
    .btn-secondary{display:inline-flex;align-items:center;justify-content:center;border-radius:0.25rem;--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-family:IBM Plex Sans, Noto Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .btn-secondary:hover{--tw-shadow:0px 4px 20px rgba(0,0,0,0.04);--tw-shadow-colored:0px 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}

    /* Ghost button: 1px Green border */
    .btn-ghost{display:inline-flex;align-items:center;justify-content:center;border-radius:0.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1));padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-family:IBM Plex Sans, Noto Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .btn-ghost:hover{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}

    /* Product card: white bg + 1px light-gray border + 8px (lg) radius */
    .card-product{border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1rem;transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .card-product:hover{--tw-shadow:0px 4px 20px rgba(0,0,0,0.04);--tw-shadow-colored:0px 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}

    /* Discount badge: high-contrast red pill, 16px radius */
    .badge-sale{display:inline-flex;align-items:center;border-radius:1rem;--tw-bg-opacity:1;background-color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-bg-opacity, 1));padding-left:0.625rem;padding-right:0.625rem;padding-top:0.25rem;padding-bottom:0.25rem;font-family:IBM Plex Sans, Noto Sans, sans-serif;font-size:0.75rem;line-height:1rem;font-weight:500;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}

    /* Optional secondary ribbon (e.g. "New") — additive to .badge-sale, never
       a replacement for it, since a product can be both newly listed and
       discounted at once. Driven by which HomeSection is rendering the card
       (see home.blade.php's $sectionBadge), not a product attribute. */
    .badge-new{display:inline-flex;align-items:center;border-radius:1rem;--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1));padding-left:0.625rem;padding-right:0.625rem;padding-top:0.25rem;padding-bottom:0.25rem;font-family:IBM Plex Sans, Noto Sans, sans-serif;font-size:0.75rem;line-height:1rem;font-weight:500;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}

    /* Input field: 1px gray border, Deep Green on focus */
    .input-field{display:block;width:100%;border-radius:0.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(192 201 186 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}
    .input-field:focus{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}

    /* Select field: same border/focus contract as .input-field, but with a
       more rounded shape and a custom chevron replacing the native OS arrow
       (appearance-none hides it). Chevron is raw CSS, not a Tailwind
       bg-[url(...)] arbitrary value, because this Mix/Tailwind 3.4 pipeline
       mis-escapes commas inside arbitrary-value class strings (see
       .categories-grid below for the confirmed prior incident); the SVG data
       URI is full of commas/quotes and would hit the same bug.
       pe-10/ps-3 are Tailwind's logical padding utilities (site RTL
       convention, see addresses.blade.php's header comment) so text padding
       flips automatically with dir="rtl"/"ltr"; background-position has no
       reliable logical-keyword support, so it needs the explicit
       [dir="rtl"] override below. */

    /* Disabled cascading selects (address-form/checkout country->gov->area):
       mute the chevron to match the outline/gray tone implied by
       disabled:bg-surface-container-low elsewhere in the class list. */

    /* Custom listbox trigger/panel (_dropdown.blade.php) - replaces
       .select-field for selects that need a stylable option list, which a
       native <select> popup can't provide cross-browser. Trigger is a real
       <button>, chevron is a real icon span (not a background-image data
       URI), so flexbox row direction handles RTL for free - no [dir="rtl"]
       override needed here, unlike .select-field's chevron. */
    .select-trigger{display:block;width:100%;border-radius:0.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(192 201 186 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}
    .select-trigger:focus{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
    .select-trigger{display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:0.5rem;border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1));text-align:start;font-family:IBM Plex Sans, Noto Sans, sans-serif}
    .select-trigger:disabled{cursor:not-allowed;opacity:0.6}
    .select-trigger .select-chevron{flex-shrink:0;font-size:1.125rem;line-height:1.75rem;--tw-text-opacity:1;color:rgb(64 73 62 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}

    /* Single-country mobile-field badge — the non-interactive counterpart to
       .select-trigger for when there's nothing to actually choose (see
       auth/register.blade.php's $onlyCountry). Auto width instead of a fixed
       w-28/w-32 so the country name is never dropped; max-w keeps it from
       dominating the row on narrow screens (mobile input flex-shrinks to fill
       whatever's left, same mechanism .select-trigger's fixed-width sibling
       already relies on). */
    .country-badge{display:block;width:100%;border-radius:0.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(192 201 186 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}
    .country-badge:focus{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
    .country-badge{display:flex;width:auto;max-width:60%;flex-shrink:0;cursor:default;align-items:center;gap:0.5rem;border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1));text-align:start;font-family:IBM Plex Sans, Noto Sans, sans-serif}
    .country-badge-flag{height:1.25rem;width:1.25rem;flex-shrink:0;border-radius:9999px;-o-object-fit:cover;object-fit:cover}
    .country-badge-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}

    /* Mobile input with an inline "(+966)"-style country-code adornment
       (Task: show mobile code inside the mobile field). Same border/bg/focus
       contract as .input-field, but focus-within instead of focus since the
       actual focusable element is the nested <input>, not this wrapper -
       and the code/border/padding live on the wrapper so the inner input
       can be borderless and just fill the remaining space. */
    .mobile-input-group{display:flex;width:100%;align-items:center;border-radius:0.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(192 201 186 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .mobile-input-group:focus-within{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
    .mobile-code-prefix{flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-top:0.5rem;padding-bottom:0.5rem;padding-inline-start:0.75rem;--tw-text-opacity:1;color:rgb(64 73 62 / var(--tw-text-opacity, 1))}
    .mobile-input-group input{min-width:0px;flex:1 1 0%;border-width:0px;background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}
    .mobile-input-group input:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}

    /* Floating option panel: rounded-xl + shadow-lg is this design system's
       elevated-surface convention (see _header.blade.php's mobile search
       panel), vs. rounded-lg + border for static cards. max-h-60 +
       overflow-y-auto so long gov/area lists scroll instead of growing
       unbounded. start-0 (logical) keeps alignment correct under RTL.
       min-w-full (not w-full): the trigger can be narrower than its own
       option labels (e.g. the sort dropdown's compact button vs. "Price:
       high to low"), so the panel must be free to grow past the trigger's
       width to fit its content instead of forcing that content to wrap into
       a column as narrow as the trigger. w-max sizes it to the widest
       option (shrink-to-fit avoids wrapping when it fits); max-w-xs caps
       runaway width for pathologically long labels, which then wrap
       normally (no white-space:nowrap) instead of overflowing the box. */
    /* z-30, not z-20: product cards below the toolbar (_product-card.blade.php)
       position their own cart-add/favorite controls at z-20 in the SAME
       stacking context (the card's wrapping div is only `position:relative`,
       with no z-index of its own, so it never becomes a new stacking
       context) - at equal z-index the later-painted DOM node wins ties, and
       the product grid comes after this toolbar, so an open sort panel was
       rendering underneath the favorite button of the row directly below it. */
    .dropdown-panel{position:absolute;z-index:30;margin-top:0.25rem;max-height:15rem;width:-moz-max-content;width:max-content;min-width:100%;max-width:20rem;overflow-y:auto;border-radius:0.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.25rem;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
    .dropdown-option{display:flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:0.5rem;border-radius:0.5rem;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}
    .dropdown-option-active{--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1))}
    .dropdown-option-selected{font-weight:500;--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
    .dropdown-empty{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(64 73 62 / var(--tw-text-opacity, 1))}

    /* Subtle dot texture for the mid-page/category promo gradient banners —
       avoids the "flat placeholder gradient" look without hotlinking any
       image asset. Meant to sit on a colored/dark background. */
    .bg-pattern-dots {
        background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0);
        background-size: 18px 18px;
    }

    /* "Shop by category" tile row (home.blade.php). repeat(auto-fit, minmax(8rem, 1fr))
       instead of a fixed grid-cols-2/3/6: with plain fractional columns, an
       empty column still reserves its 1/N share of the row even when no tile
       fills it, so fewer categories than the breakpoint's column count left
       tiles packed against the start edge with dead space trailing on the
       end side. auto-fit collapses empty tracks and lets the occupied 1fr
       tracks grow to fill the freed space, so a short row spreads/centers
       across the full width exactly like a full row does.

       Written here (not as a Tailwind arbitrary value, e.g.
       grid-cols-[repeat(auto-fit,minmax(8rem,1fr))]) because this project's
       Tailwind 3.4 + Laravel Mix pipeline emits a broken selector for that
       arbitrary value — the comma inside minmax(...) gets escaped as the
       literal text "2c" with no leading backslash (confirmed in the compiled
       public/css/store.css: `.grid-cols-\[repeat\(auto-fit2c
       minmax\(8rem2c 1fr\)\)\]`), which cannot match the class attribute the
       HTML actually renders, so the rule silently never applied (categories
       fell back to the anchor's own `flex` display, stacking one per line
       instead of forming a row). A named component class has no characters
       needing escaping, so it isn't subject to that bug. */
    .categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }

    /* AJAX loading spinner (storefront polish pass): a small CSS-only
       rotating ring, sized to drop into an existing 44x44 icon button or an
       inline text button without needing per-call-site sizing. Currentcolor
       border so it inherits whatever text color the button already had
       (danger-colored remove buttons get a red spinner, primary buttons get
       a green one, etc.) rather than needing a separate color per context. */
    .spinner{display:inline-block;height:1.25rem;width:1.25rem;border-radius:9999px;border-width:2px;border-color:currentColor;border-top-color:transparent;vertical-align:middle;
        animation: spin 0.6s linear infinite}
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Results-container loading overlay (filters/sort/pagination swaps) -
       dims the current results while the next page fetches, and blocks
       further clicks so a fast double-click on pagination can't fire two
       overlapping swaps. */
    .results-loading{pointer-events:none;position:relative}
    .results-loading > *{opacity:0.4;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .results-loading::after {
        content: '';
        position:absolute;
        inset:0px;
        z-index:10;
    }
    /* Combined with .spinner in the markup (class="spinner
       results-loading-spinner"), not composed here via @apply, since
       @apply-ing one @layer components class from another is unreliable
       under this project's Mix/Tailwind 3.4 pipeline (see .select-field's
       and .categories-grid's own comments above for prior escaping/pipeline
       bugs hit in this exact build setup).

       Centered with -ms-4 (margin-inline-start: -1rem, i.e. -50% of this
       element's own w-8/2rem width), NOT -translate-x-1/2, deliberately:
       .spinner's `spin` keyframe animates `transform: rotate(360deg)` with
       no `from` clause, so its implicit start value is this element's own
       base `transform`. A static translateX(-50%) here would combine with
       the rotation into a single matrix the browser has to interpolate
       between two different transform functions every frame, producing a
       visible wobble/jitter instead of a clean spin (confirmed on the "My
       Orders" status-tab/pagination loading spinner, which uses both
       classes together - see filters.js's setResultsLoading()). Margin-based
       centering leaves `transform` free for pure rotation, and start-1/2 +
       -ms-4 stays RTL-safe like the rest of this file's logical-property
       convention. */
    .results-loading-spinner{position:absolute;top:2rem;inset-inline-start:50%;z-index:30;margin-inline-start:-1rem;height:2rem;width:2rem;border-width:3px;--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
    /* Excluded from the `.results-loading > *` opacity-40 dimming rule above:
       the spinner is appended as a real DOM child of the same
       `.results-loading` container (see filters.js's setResultsLoading()),
       so without this override it would get dimmed to 40% opacity right
       along with the results it's layered over, making it faint/hard to
       see. This selector is already more specific than `.results-loading > *`
       (`*` contributes zero specificity), so it wins regardless of source
       order, but it's kept after that rule for readability. */
    .results-loading > .results-loading-spinner {
        opacity: 1;
    }

    /* Free-delivery progress widget (cart order-summary) - bar TRACK.
       h-2 (not the 8px .results-loading-spinner-sized thick.) keeps it
       visually subordinate to the subtotal figure above it - this page's
       job is "get to checkout", not "gamify the cart" - while still being
       thick enough to read as a real progress affordance rather than a
       hairline. rounded-full + overflow-hidden so the sibling
       .free-delivery-fill's inline `width: N%` (server-computed per
       request, see _cart-summary.blade.php) never squares off past the
       track's own rounded corners at partial fill values. */
    .free-delivery-track{height:0.5rem;width:100%;overflow:hidden;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1))}
    /* ...bar FILL. No width utility here on purpose - width is set inline
       per-request from server-computed $freeDelivery['percent'] (0-100),
       not a fixed class, so this rule only owns color/shape/motion.
       bg-primary-light (never a hardcoded hex) so a merchant's
       admin-configured storefront brand color - the same --store-primary
       CSS custom property driving the checkout button's focus ring and the
       applied-coupon icon elsewhere in this same partial - drives this bar
       too. transition-[width] (scoped, not a blanket transition-all)
       exists for the rare case the browser actually interpolates a width
       change on this exact element - #cart-summary is normally replaced
       wholesale via .outerHTML on every AJAX update (cart-page.js/
       cart-coupon.js), which swaps in the new width instantly with nothing
       to animate from, so this is "free" insurance rather than the primary
       mechanism. motion-reduce:transition-none honors reduced-motion
       users on the rare path where it would otherwise animate. */
    .free-delivery-fill{height:100%;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1));transition-property:width;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}
    @media (prefers-reduced-motion: reduce){
.free-delivery-fill{transition-property:none}}
    /* ...bar FILL, achieved-state modifier. Swaps to `secondary` (this
       storefront's existing reward/CTA accent - already the checkout
       button's own background) instead of primary-light, so reaching the
       limit reads as a small, deliberate reward moment distinct from
       ordinary progress, using only an existing admin-configurable token -
       never a new color. */
    .free-delivery-fill--achieved{--tw-bg-opacity:1;background-color:rgb(var(--store-secondary, 255 211 126) / var(--tw-bg-opacity, 1))}
    /* Achieved-state check icon entrance - the one authored motion moment
       this widget earns (see animate.md: "one authored moment, not
       scattered effects"). Fade + scale-up from 0.8, not a spring/bounce
       curve - confident-arrival easing per this project's motion
       guidance. Kept brief (200ms) rather than a bigger "celebration"
       because #cart-summary re-renders on every cart update while the
       server is stateless about whether the threshold was *just* crossed
       or crossed several updates ago, so this plays on every render where
       $freeDelivery['achieved'] is true, not only the first one. */
    .free-delivery-check-in {
        animation: free-delivery-check-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes free-delivery-check-in {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .free-delivery-check-in {
            animation: none;
        }
    }

    /* Cart-line delete animation (Task: "show red color transition then
       delete"): two classes applied in sequence by cart-page.js, not one -
       .cart-line-removing plays the red flash first (background-color only,
       so nothing else moves yet), then .cart-line-collapsing is added once
       that finishes to animate the height/spacing down to 0. Splitting them
       lets the collapse start from a JS-computed inline height (fixed right
       before the class is added) while still getting a real CSS transition
       on it. */
    .cart-line-removing {
        transition: background-color 200ms ease;
        background-color: rgba(204, 51, 51, 0.12); /* danger token (#CC3333) at low opacity - keeps line text readable */
    }
    .cart-line-collapsing {
        transition: height 300ms ease, margin 300ms ease, padding 300ms ease, opacity 300ms ease;
        overflow: hidden;
    }

    /* Wishlist heart-pop micro-interaction: a brief scale bounce applied to
       the heart icon span on toggle (both add and remove), removed after it
       finishes playing. */
    .heart-pop {
        animation: heart-pop 300ms ease;
    }
    @keyframes heart-pop {
        0% {
            transform: scale(1);
        }
        40% {
            transform: scale(1.35);
        }
        100% {
            transform: scale(1);
        }
    }

    /* Checkout failure page icon-circle entrance (polish pass) — the single
       authored moment on that page: a quick settle-with-a-wobble read as "no"
       rather than a generic fade-in. Starts already mostly visible (scale
       0.9/opacity 0.7), never from fully hidden, so a slow paint never shows
       a blank circle. Plays once on load; the sitewide prefers-reduced-motion
       block at the top of this file already collapses it for users who have
       that preference set. */
    .failure-icon-enter {
        animation: failure-icon-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes failure-icon-in {
        0% {
            transform: scale(0.9);
            opacity: 0.7;
        }
        50% {
            transform: scale(1.04) rotate(-2deg);
        }
        75% {
            transform: scale(0.98) rotate(1.5deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
    }

    /* Header cart/wishlist badge bump: applied whenever the count actually
       changes (see _header.blade.php), removed after it finishes playing. */
    .badge-bump {
        animation: badge-bump 300ms ease;
    }
    @keyframes badge-bump {
        0% {
            transform: scale(1);
        }
        40% {
            transform: scale(1.3);
        }
        100% {
            transform: scale(1);
        }
    }

    /* flatpickr skin overrides (Task: date/time picker enhancement) — remaps
       flatpickr's default skin (imported at the top of this file) onto this
       project's own tokens instead of shipping its stock look. Targets
       flatpickr's own fixed class names (not configurable), confirmed against
       node_modules/flatpickr/dist/flatpickr.min.css. */
    .flatpickr-day.today{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}
    .flatpickr-day.selected,
    .flatpickr-day.selected:hover{--tw-border-opacity:1;border-color:rgb(var(--store-primary, 13 91 25) / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(var(--store-primary, 13 91 25) / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}

    /* Time-only picker (mode 2's order_hour widget) — matches .input-field's
       border/token treatment instead of flatpickr's default skin. */

    /* flatpickr altInput / native-fallback field shape (Task: input field
       enhancement) — a dedicated variant of .input-field's border/focus
       contract, not a change to .input-field itself (that class is shared
       sitewide by every other storefront form; scoping this to the
       date/time widgets keeps the blast radius to just this flow). Bigger
       radius (rounded-xl, matches the calendar popup + day-chip radius)
       plus a leading calendar/clock icon and a trailing chevron read as
       "this opens a picker" at a glance — the same chevron-affordance
       convention .select-field already uses elsewhere in this file, just
       as a real icon span instead of a background-image data URI, since
       .datetime-input-icon/.datetime-input-chevron sit in the same
       position-relative wrapper as the input rather than being painted
       inside it. ps-11/pe-10 (not ps-3/pe-3 like .input-field) reserve
       room for those two icons without the input text overlapping them. */
    .datetime-input{display:block;width:100%;cursor:pointer;border-radius:0.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(192 201 186 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:0.75rem;padding-bottom:0.75rem;padding-inline-start:2.75rem;padding-inline-end:2.5rem;font-family:Noto Sans, IBM Plex Sans, sans-serif;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .datetime-input:hover{border-color:rgb(var(--store-primary-light, 44 116 47) / 0.6)}
    .datetime-input:focus{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / 0.3)}
    /* `inset-y-0 flex items-center`, not `top-1/2 -translate-y-1/2`: the
       percentage-based version centered against whatever the wrapper's
       rendered height happened to be at that instant, which drifted a
       couple of pixels between the empty/placeholder state and the
       populated state (flatpickr's altInput text vs. the placeholder don't
       render at quite the same line height) — visible as the icon sitting
       a little low before a value was picked and a little further off
       after. Stretching to the full height (inset-y-0) and centering the
       icon inside that via flexbox is immune to those sub-pixel
       differences, since it's not measuring a percentage of a height that
       can itself shift. Requires a wrapping <span> around each <x-icon>
       (a bare <svg> can't be its own flex container for this) — see
       delivery.blade.php's five usages. */
    .datetime-input-icon{pointer-events:none;position:absolute;top:0px;bottom:0px;inset-inline-start:0.875rem;display:flex;align-items:center;font-size:1.25rem;line-height:1.75rem;--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
    .datetime-input-chevron{pointer-events:none;position:absolute;top:0px;bottom:0px;inset-inline-end:0.875rem;display:flex;align-items:center;font-size:1.125rem;line-height:1.75rem;--tw-text-opacity:1;color:rgb(64 73 62 / var(--tw-text-opacity, 1))}

    /* Date-selector "shape" (Task: input field enhancement follow-up) —
       wraps the day-chip row and the date input together as one cohesive
       card instead of two loose elements stacked under a label. Gives the
       richer date picker (chips + calendar) its own visual weight now that
       it can sit directly beside the plain, unwrapped time input in mode
       2's side-by-side grid. */
    .date-selector-panel > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}
    .date-selector-panel{border-radius:0.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1));background-color:rgb(243 244 243 / 0.6);padding:0.75rem}
    @media (min-width: 640px){
.date-selector-panel{padding:1rem}}

    /* Quick-pick day chips (checkout/delivery.blade.php's date widget) —
       translate the original Stitch reference's chip styling
       (w-24 h-24 rounded-lg, selected = border-primary bg-surface-container-low
       ring-1 ring-primary — .claude/website design/screens/checkout-delivery/
       reference.html) onto this project's real token names. */
    .date-chip{display:flex;height:5rem;min-height:44px;width:5rem;flex-direction:column;align-items:center;justify-content:center;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-family:IBM Plex Sans, Noto Sans, sans-serif;--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .date-chip:hover{border-color:rgb(var(--store-primary-light, 44 116 47) / 0.5)}
    @media (min-width: 640px){
.date-chip{height:6rem;width:6rem}}
    .date-chip-selected{--tw-border-opacity:1;border-color:rgb(var(--store-primary, 13 91 25) / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary, 13 91 25) / var(--tw-ring-opacity, 1))}
    .date-chip-label{font-size:0.75rem;line-height:1rem;font-weight:500;--tw-text-opacity:1;color:rgb(64 73 62 / var(--tw-text-opacity, 1))}
    .date-chip-day{font-size:1.25rem;line-height:1.75rem;font-weight:700}
    .date-chip-month{font-size:0.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(64 73 62 / var(--tw-text-opacity, 1))}
    .date-chip-more{gap:0.25rem;border-color:rgb(var(--store-primary-light, 44 116 47) / 0.4);--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
    .date-chip-more:hover{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}

    /* Time-period slot grid (checkout/delivery.blade.php) — named classes for
       the selected/unselected states, replacing the inline :class ternary
       that used to live directly in the Blade template; adds a
       ring-1 ring-primary-light for visual parity with .date-chip-selected. */
    .slot-btn{display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:0.5rem;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1));padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .slot-btn:hover{border-color:rgb(var(--store-primary-light, 44 116 47) / 0.5)}
    .slot-btn-selected{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1));background-color:rgb(var(--store-primary-light, 44 116 47) / 0.05);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}
.pointer-events-none{pointer-events:none}
.visible{visibility:visible}
.invisible{visibility:hidden}
.collapse{visibility:collapse}
.static{position:static}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:sticky}
.inset-0{inset:0px}
.inset-x-0{left:0px;right:0px}
.inset-x-4{left:1rem;right:1rem}
.inset-y-0{top:0px;bottom:0px}
.-end-2{inset-inline-end:-0.5rem}
.-end-4{inset-inline-end:-1rem}
.-left-4{left:-1rem}
.-right-4{right:-1rem}
.-top-1{top:-0.25rem}
.-top-4{top:-1rem}
.bottom-0{bottom:0px}
.bottom-1{bottom:0.25rem}
.bottom-12{bottom:3rem}
.bottom-3{bottom:0.75rem}
.bottom-4{bottom:1rem}
.end-0{inset-inline-end:0px}
.end-1{inset-inline-end:0.25rem}
.end-2{inset-inline-end:0.5rem}
.end-3{inset-inline-end:0.75rem}
.end-4{inset-inline-end:1rem}
.left-3{left:0.75rem}
.start-0{inset-inline-start:0px}
.start-2{inset-inline-start:0.5rem}
.start-3{inset-inline-start:0.75rem}
.start-4{inset-inline-start:1rem}
.top-0{top:0px}
.top-1{top:0.25rem}
.top-1\/2{top:50%}
.top-2{top:0.5rem}
.top-3{top:0.75rem}
.top-4{top:1rem}
.top-5{top:1.25rem}
.z-10{z-index:10}
.z-20{z-index:20}
.z-50{z-index:50}
.z-\[100\]{z-index:100}
.z-\[60\]{z-index:60}
.z-\[70\]{z-index:70}
.order-1{order:1}
.order-2{order:2}
.m-0{margin:0px}
.-mx-1{margin-left:-0.25rem;margin-right:-0.25rem}
.-mx-margin-mobile{margin-left:-16px;margin-right:-16px}
.mx-3{margin-left:0.75rem;margin-right:0.75rem}
.mx-auto{margin-left:auto;margin-right:auto}
.-mb-2{margin-bottom:-0.5rem}
.-mt-0\.5{margin-top:-0.125rem}
.mb-0\.5{margin-bottom:0.125rem}
.mb-1{margin-bottom:0.25rem}
.mb-1\.5{margin-bottom:0.375rem}
.mb-10{margin-bottom:2.5rem}
.mb-16{margin-bottom:4rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.ms-1{margin-inline-start:0.25rem}
.ms-2{margin-inline-start:0.5rem}
.ms-auto{margin-inline-start:auto}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-1\.5{margin-top:0.375rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.flex{display:flex}
.inline-flex{display:inline-flex}
.table{display:table}
.grid{display:grid}
.contents{display:contents}
.hidden{display:none}
.aspect-\[3\/2\]{aspect-ratio:3/2}
.aspect-\[3\/4\]{aspect-ratio:3/4}
.aspect-\[4\/5\]{aspect-ratio:4/5}
.aspect-\[9\/18\]{aspect-ratio:9/18}
.aspect-square{aspect-ratio:1 / 1}
.h-0\.5{height:0.125rem}
.h-1{height:0.25rem}
.h-1\.5{height:0.375rem}
.h-10{height:2.5rem}
.h-11{height:2.75rem}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-2{height:0.5rem}
.h-2\.5{height:0.625rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-3{height:0.75rem}
.h-32{height:8rem}
.h-4{height:1rem}
.h-48{height:12rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-64{height:16rem}
.h-7{height:1.75rem}
.h-72{height:18rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-\[1\.375rem\]{height:1.375rem}
.h-\[140px\]{height:140px}
.h-\[300px\]{height:300px}
.h-\[380px\]{height:380px}
.h-full{height:100%}
.min-h-\[132px\]{min-height:132px}
.min-h-\[220px\]{min-height:220px}
.min-h-\[44px\]{min-height:44px}
.min-h-\[56px\]{min-height:56px}
.min-h-\[76px\]{min-height:76px}
.min-h-screen{min-height:100vh}
.w-1\/2{width:50%}
.w-1\/3{width:33.333333%}
.w-10{width:2.5rem}
.w-11{width:2.75rem}
.w-12{width:3rem}
.w-14{width:3.5rem}
.w-16{width:4rem}
.w-2{width:0.5rem}
.w-2\.5{width:0.625rem}
.w-20{width:5rem}
.w-24{width:6rem}
.w-28{width:7rem}
.w-3{width:0.75rem}
.w-3\/4{width:75%}
.w-32{width:8rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-56{width:14rem}
.w-6{width:1.5rem}
.w-7{width:1.75rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-\[168px\]{width:168px}
.w-\[180px\]{width:180px}
.w-\[240px\]{width:240px}
.w-auto{width:auto}
.w-fit{width:-moz-fit-content;width:fit-content}
.w-full{width:100%}
.min-w-0{min-width:0px}
.min-w-4{min-width:1rem}
.min-w-\[1\.375rem\]{min-width:1.375rem}
.min-w-\[100px\]{min-width:100px}
.min-w-\[44px\]{min-width:44px}
.min-w-\[480px\]{min-width:480px}
.min-w-\[7\.5rem\]{min-width:7.5rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-\[480px\]{max-width:480px}
.max-w-container{max-width:1280px}
.max-w-lg{max-width:32rem}
.max-w-none{max-width:none}
.max-w-sm{max-width:24rem}
.max-w-xs{max-width:20rem}
.flex-1{flex:1 1 0%}
.flex-none{flex:none}
.shrink-0{flex-shrink:0}
.flex-grow{flex-grow:1}
.grow{flex-grow:1}
.border-collapse{border-collapse:collapse}
.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-translate-y-full{--tw-translate-y:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.translate-y-2{--tw-translate-y:0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-rotate-12{--tw-rotate:-12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.rotate-12{--tw-rotate:12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.scale-50{--tw-scale-x:.5;--tw-scale-y:.5;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.scale-75{--tw-scale-x:.75;--tw-scale-y:.75;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.cursor-default{cursor:default}
.cursor-not-allowed{cursor:not-allowed}
.cursor-pointer{cursor:pointer}
.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.resize-none{resize:none}
.resize{resize:both}
.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}
.snap-mandatory{--tw-scroll-snap-strictness:mandatory}
.snap-start{scroll-snap-align:start}
.list-disc{list-style-type:disc}
.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}
.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}
.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}
.grid-cols-\[repeat\(auto-fit2c minmax\(8rem2c 1fr\)\)\]{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.flex-row-reverse{flex-direction:row-reverse}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-0\.5{gap:0.125rem}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-gutter{gap:24px}
.gap-x-2{-moz-column-gap:0.5rem;column-gap:0.5rem}
.gap-x-3{-moz-column-gap:0.75rem;column-gap:0.75rem}
.gap-x-gutter{-moz-column-gap:24px;column-gap:24px}
.gap-y-1{row-gap:0.25rem}
.gap-y-10{row-gap:2.5rem}
.space-y-0 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}
.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}
.space-y-10 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))}
.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}
.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}
.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}
.space-y-5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}
.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}
.space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}
.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}
.divide-border-light > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(224 226 224 / var(--tw-divide-opacity, 1))}
.divide-primary-light\/15 > :not([hidden]) ~ :not([hidden]){border-color:rgb(var(--store-primary-light, 44 116 47) / 0.15)}
.self-start{align-self:flex-start}
.justify-self-start{justify-self:start}
.justify-self-end{justify-self:end}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.scroll-smooth{scroll-behavior:smooth}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-line{white-space:pre-line}
.rounded{border-radius:0.25rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-\[1\.5rem\]{border-radius:1.5rem}
.rounded-\[1\.75rem\]{border-radius:1.75rem}
.rounded-\[2\.5rem\]{border-radius:2.5rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.5rem}
.rounded-md{border-radius:0.375rem}
.rounded-sm{border-radius:0.125rem}
.rounded-xl{border-radius:0.75rem}
.rounded-e-full{border-start-end-radius:9999px;border-end-end-radius:9999px}
.rounded-e-lg{border-start-end-radius:0.5rem;border-end-end-radius:0.5rem}
.rounded-s-full{border-start-start-radius:9999px;border-end-start-radius:9999px}
.rounded-s-lg{border-start-start-radius:0.5rem;border-end-start-radius:0.5rem}
.border{border-width:1px}
.border-2{border-width:2px}
.border-4{border-width:4px}
.border-\[2px\]{border-width:2px}
.border-y{border-top-width:1px;border-bottom-width:1px}
.border-b{border-bottom-width:1px}
.border-b-2{border-bottom-width:2px}
.border-t{border-top-width:1px}
.border-dashed{border-style:dashed}
.\!border-danger{--tw-border-opacity:1 !important;border-color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-border-opacity, 1)) !important}
.border-black\/10{border-color:rgb(0 0 0 / 0.1)}
.border-border-light{--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1))}
.border-danger{--tw-border-opacity:1;border-color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-border-opacity, 1))}
.border-outline-variant{--tw-border-opacity:1;border-color:rgb(192 201 186 / var(--tw-border-opacity, 1))}
.border-outline-variant\/60{border-color:rgb(192 201 186 / 0.6)}
.border-outline\/20{border-color:rgb(112 122 109 / 0.2)}
.border-outline\/30{border-color:rgb(112 122 109 / 0.3)}
.border-primary-light{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}
.border-primary-light\/20{border-color:rgb(var(--store-primary-light, 44 116 47) / 0.2)}
.border-secondary-container{--tw-border-opacity:1;border-color:rgb(var(--store-secondary-light, 253 209 124) / var(--tw-border-opacity, 1))}
.border-tertiary\/25{border-color:rgb(var(--store-tertiary, 204 51 51) / 0.25)}
.border-transparent{border-color:transparent}
.bg-\[\#EAF3EB\]{--tw-bg-opacity:1;background-color:rgb(234 243 235 / var(--tw-bg-opacity, 1))}
.bg-black\/40{background-color:rgb(0 0 0 / 0.4)}
.bg-border-light{--tw-bg-opacity:1;background-color:rgb(224 226 224 / var(--tw-bg-opacity, 1))}
.bg-danger\/10{background-color:rgb(var(--store-tertiary, 204 51 51) / 0.1)}
.bg-danger\/5{background-color:rgb(var(--store-tertiary, 204 51 51) / 0.05)}
.bg-neutral{--tw-bg-opacity:1;background-color:rgb(245 246 245 / var(--tw-bg-opacity, 1))}
.bg-on-surface{--tw-bg-opacity:1;background-color:rgb(25 28 28 / var(--tw-bg-opacity, 1))}
.bg-on-surface\/50{background-color:rgb(25 28 28 / 0.5)}
.bg-outline-variant{--tw-bg-opacity:1;background-color:rgb(192 201 186 / var(--tw-bg-opacity, 1))}
.bg-primary{--tw-bg-opacity:1;background-color:rgb(var(--store-primary, 13 91 25) / var(--tw-bg-opacity, 1))}
.bg-primary-container{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.bg-primary-light{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.bg-primary-light\/10{background-color:rgb(var(--store-primary-light, 44 116 47) / 0.1)}
.bg-primary-light\/5{background-color:rgb(var(--store-primary-light, 44 116 47) / 0.05)}
.bg-primary-light\/50{background-color:rgb(var(--store-primary-light, 44 116 47) / 0.5)}
.bg-primary\/10{background-color:rgb(var(--store-primary, 13 91 25) / 0.1)}
.bg-primary\/5{background-color:rgb(var(--store-primary, 13 91 25) / 0.05)}
.bg-secondary{--tw-bg-opacity:1;background-color:rgb(var(--store-secondary, 255 211 126) / var(--tw-bg-opacity, 1))}
.bg-secondary-container{--tw-bg-opacity:1;background-color:rgb(var(--store-secondary-light, 253 209 124) / var(--tw-bg-opacity, 1))}
.bg-secondary-container\/80{background-color:rgb(var(--store-secondary-light, 253 209 124) / 0.8)}
.bg-surface{--tw-bg-opacity:1;background-color:rgb(249 249 248 / var(--tw-bg-opacity, 1))}
.bg-surface-container{--tw-bg-opacity:1;background-color:rgb(237 238 237 / var(--tw-bg-opacity, 1))}
.bg-surface-container-high{--tw-bg-opacity:1;background-color:rgb(231 232 231 / var(--tw-bg-opacity, 1))}
.bg-surface-container-low{--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1))}
.bg-tertiary{--tw-bg-opacity:1;background-color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-bg-opacity, 1))}
.bg-tertiary\/10{background-color:rgb(var(--store-tertiary, 204 51 51) / 0.1)}
.bg-tertiary\/5{background-color:rgb(var(--store-tertiary, 204 51 51) / 0.05)}
.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}
.bg-white\/20{background-color:rgb(255 255 255 / 0.2)}
.bg-white\/50{background-color:rgb(255 255 255 / 0.5)}
.bg-white\/70{background-color:rgb(255 255 255 / 0.7)}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}
.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}
.from-black\/60{--tw-gradient-from:rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.from-black\/80{--tw-gradient-from:rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.from-primary-light{--tw-gradient-from:rgb(var(--store-primary-light, 44 116 47) / 1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--store-primary-light, 44 116 47) / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.via-black\/10{--tw-gradient-to:rgb(0 0 0 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(0 0 0 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to)}
.via-black\/55{--tw-gradient-to:rgb(0 0 0 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(0 0 0 / 0.55) var(--tw-gradient-via-position), var(--tw-gradient-to)}
.to-primary{--tw-gradient-to:rgb(var(--store-primary, 13 91 25) / 1) var(--tw-gradient-to-position)}
.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}
.bg-cover{background-size:cover}
.bg-center{background-position:center}
.object-contain{-o-object-fit:contain;object-fit:contain}
.object-cover{-o-object-fit:cover;object-fit:cover}
.p-1{padding:0.25rem}
.p-1\.5{padding:0.375rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-margin-mobile{padding-left:16px;padding-right:16px}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-section{padding-top:80px;padding-bottom:80px}
.pb-1{padding-bottom:0.25rem}
.pb-16{padding-bottom:4rem}
.pb-2{padding-bottom:0.5rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pb-5{padding-bottom:1.25rem}
.pb-6{padding-bottom:1.5rem}
.pb-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\]{padding-bottom:calc(4rem + env(safe-area-inset-bottom))}
.pb-\[env\(safe-area-inset-bottom\)\]{padding-bottom:env(safe-area-inset-bottom)}
.pe-11{padding-inline-end:2.75rem}
.pe-12{padding-inline-end:3rem}
.pe-3{padding-inline-end:0.75rem}
.pe-4{padding-inline-end:1rem}
.ps-11{padding-inline-start:2.75rem}
.ps-5{padding-inline-start:1.25rem}
.ps-6{padding-inline-start:1.5rem}
.pt-1{padding-top:0.25rem}
.pt-12{padding-top:3rem}
.pt-2{padding-top:0.5rem}
.pt-3{padding-top:0.75rem}
.pt-4{padding-top:1rem}
.pt-6{padding-top:1.5rem}
.pt-8{padding-top:2rem}
.text-center{text-align:center}
.text-start{text-align:start}
.text-end{text-align:end}
.align-text-bottom{vertical-align:text-bottom}
.font-body{font-family:Noto Sans, IBM Plex Sans, sans-serif}
.font-heading{font-family:IBM Plex Sans, Noto Sans, sans-serif}
.font-ui{font-family:IBM Plex Sans, Noto Sans, sans-serif}
.\!text-3xl{font-size:1.875rem !important;line-height:2.25rem !important}
.\!text-5xl{font-size:3rem !important;line-height:1 !important}
.\!text-base{font-size:1rem !important;line-height:1.5rem !important}
.\!text-lg{font-size:1.125rem !important;line-height:1.75rem !important}
.\!text-sm{font-size:0.875rem !important;line-height:1.25rem !important}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[14px\]{font-size:14px}
.text-\[18px\]{font-size:18px}
.text-\[20px\]{font-size:20px}
.text-\[32px\]{font-size:32px}
.text-\[7rem\]{font-size:7rem}
.text-\[9px\]{font-size:9px}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.uppercase{text-transform:uppercase}
.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}
.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.625}
.leading-tight{line-height:1.25}
.tracking-wide{letter-spacing:0.025em}
.text-\[\#1A1C1A\]{--tw-text-opacity:1;color:rgb(26 28 26 / var(--tw-text-opacity, 1))}
.text-danger{--tw-text-opacity:1;color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-text-opacity, 1))}
.text-on-surface{--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}
.text-on-surface-variant{--tw-text-opacity:1;color:rgb(64 73 62 / var(--tw-text-opacity, 1))}
.text-on-surface-variant\/40{color:rgb(64 73 62 / 0.4)}
.text-outline{--tw-text-opacity:1;color:rgb(112 122 109 / var(--tw-text-opacity, 1))}
.text-outline-variant{--tw-text-opacity:1;color:rgb(192 201 186 / var(--tw-text-opacity, 1))}
.text-primary-light{--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
.text-primary-light\/70{color:rgb(var(--store-primary-light, 44 116 47) / 0.7)}
.text-primary-on-container{--tw-text-opacity:1;color:rgb(170 247 162 / var(--tw-text-opacity, 1))}
.text-secondary{--tw-text-opacity:1;color:rgb(var(--store-secondary, 255 211 126) / var(--tw-text-opacity, 1))}
.text-secondary-container{--tw-text-opacity:1;color:rgb(var(--store-secondary-light, 253 209 124) / var(--tw-text-opacity, 1))}
.text-secondary-on-container{--tw-text-opacity:1;color:rgb(120 88 13 / var(--tw-text-opacity, 1))}
.text-tertiary{--tw-text-opacity:1;color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-text-opacity, 1))}
.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.text-white\/70{color:rgb(255 255 255 / 0.7)}
.text-white\/80{color:rgb(255 255 255 / 0.8)}
.text-white\/85{color:rgb(255 255 255 / 0.85)}
.line-through{text-decoration-line:line-through}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.opacity-0{opacity:0}
.opacity-100{opacity:1}
.opacity-15{opacity:0.15}
.opacity-30{opacity:0.3}
.opacity-40{opacity:0.4}
.opacity-50{opacity:0.5}
.opacity-70{opacity:0.7}
.opacity-80{opacity:0.8}
.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.shadow-ambient{--tw-shadow:0px 4px 20px rgba(0,0,0,0.04);--tw-shadow-colored:0px 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.outline{outline-style:solid}
.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.ring-primary-light{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
.ring-primary-light\/30{--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / 0.3)}
.ring-offset-2{--tw-ring-offset-width:2px}
.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.duration-100{transition-duration:100ms}
.duration-150{transition-duration:150ms}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.duration-700{transition-duration:700ms}
.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}
.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}

/* cssnano 4.1.10 (bundled with laravel-mix 5) strips custom properties whose
   value is empty, which is exactly how Tailwind ships the inert defaults for
   its gradient color-stop positions:

       *,::before,::after { --tw-gradient-from-position: ; ... }

   With those gone from the production build, every `from-*`/`via-*`/`to-*`
   utility resolves `var(--tw-gradient-*-position)` to nothing, making
   `--tw-gradient-from` invalid and collapsing `linear-gradient(...)` to
   render no gradient at all (works under `npm run dev`, breaks under
   `npm run prod`). Re-declare them here with explicit position values
   cssnano will keep — this restores every storefront gradient (hero scrim,
   ad-banner caption strip, category placeholder circles, …). */
*,
::before,
::after {
    --tw-gradient-from-position: 0%;
    --tw-gradient-via-position: 50%;
    --tw-gradient-to-position: 100%;
}

[x-cloak] {
    display: none !important;
}

/* Respect the OS-level "reduce motion" accessibility preference sitewide —
   collapses every animation/transition (card hover-lifts, dropdown/mobile-menu
   x-transitions, category-avatar hover scale, etc.) to effectively instant
   for users who have this turned on, without having to special-case each
   individual transition utility across every view. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Belt-and-suspenders (Task 0.3, Homepage Section Shapes): the universal
       `*` rule above already neutralizes `scroll-smooth` everywhere,
       including the two horizontal scroll-snap rows
       (_home-section-thumbnails.blade.php / _home-section-scroll.blade.php,
       arrange_type 1 and 3), but this makes that intent explicit for the
       shared .snap-row marker class those two partials use, rather than
       relying solely on the wildcard selector for this specific case. */
    .snap-row {
        scroll-behavior: auto !important;
    }
}

/* Hides the scrollbar on horizontally-scrolling rows (header category nav,
   see reference.html's own .hide-scrollbar) while keeping them scrollable
   on narrow/mobile viewports. */
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/*
 * Small set of repeated Stitch component patterns from DESIGN.md's
 * "Components" section. Keep this list short — screens add more utility
 * combinations directly in Blade as they're built; only promote a pattern
 * here once it's clearly repeated across multiple views.
 */

/* --- Mapbox GL JS control-chrome restyle (Phase 1: shared infra) ---
   Targets Mapbox's own fixed class names (.mapboxgl-ctrl-*), not Tailwind
   utilities — overridden with a plain CSS block using theme() values per
   the "Organic Harvest" design tokens (tailwind.config.js, DESIGN.md).
   The attribution control stays visible (Mapbox ToS requirement), only
   skin/typography is restyled; its position stays at Mapbox's default
   (bottom-right). */
.mapboxgl-ctrl-group {
    background: #FFFFFF ;
    border: 1px solid #E0E2E0 ;
    border-radius: 0.375rem ;
    box-shadow: none;
}
.mapboxgl-ctrl-group > button {
    width: 32px;
    height: 32px;
}
.mapboxgl-ctrl-group > button:hover {
    background-color: #F3F4F3 ;
}
.mapboxgl-ctrl-group > button span {
    filter: invert(0);
}
.mapboxgl-ctrl-attrib {
    font-family: Noto Sans, IBM Plex Sans, sans-serif;
    font-size: 0.625rem;
    line-height: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    color: #40493E ;
}
.mapboxgl-ctrl-attrib a {
    color: #40493E ;
}

/* Custom marker: Material Symbols location_on glyph, filled-icon weight,
   brand green (matches the "use my location" button's own primary-light
   color, not the danger/red this used to be — a location pin isn't an
   error state), with a subtle CSS drop-shadow for grounding against
   map tiles (filter, not box-shadow — the glyph is a transparent-
   background shape). While being dragged, scales up slightly as tactile
   drag feedback. */
.mapbox-custom-marker {
    cursor: pointer;
    color: rgb(var(--store-primary-light, 44 116 47) / 1) ;
    font-size: 70px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    transition: transform 150ms ease;
    outline: none;
}
/* Small-map variant (e.g. _address-details.blade.php's h-[140px] read-only
   preview) — see address-map.js's _createMarkerEl(), which measures the
   real container instead of guessing from context. 70px on a 140px-tall
   map is half the map; 36px keeps the same rough proportion as the 70px
   pin has on the full-size h-[300px]+ pickers. */
.mapbox-custom-marker--compact {
    font-size: 36px;
}
.mapbox-custom-marker:focus-visible {
    outline: 2px solid rgb(var(--store-primary-light, 44 116 47) / 1) ;
    outline-offset: 2px;
    border-radius: 4px;
}
.mapbox-custom-marker:active {
    transform: scale(1.1);
}

/* Map-area skeleton loading box: reserves height before Mapbox initializes
   so there's no layout shift. Shown via x-show="!mapReady" in the Blade
   template, not hard-applied to the canvas itself. */
.map-skeleton-box{border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1));
    min-height: 280px}

/* CDN-error fallback message box — calm, non-alarming inline message.
   Shown via x-show="mapError" in the Blade template. */
.map-error-box{display:flex;align-items:center;justify-content:center;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(224 226 224 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;text-align:center;
    min-height: 280px}
.first\:pt-0:first-child{padding-top:0px}
.last\:border-0:last-child{border-width:0px}
.last\:border-b-0:last-child{border-bottom-width:0px}
.last\:pb-0:last-child{padding-bottom:0px}
.checked\:border-primary-light:checked{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}
.checked\:bg-primary-light:checked{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:-translate-y-\[-2px\]:hover{--tw-translate-y:2px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:border-outline-variant:hover{--tw-border-opacity:1;border-color:rgb(192 201 186 / var(--tw-border-opacity, 1))}
.hover\:border-primary-light:hover{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}
.hover\:border-primary-light\/30:hover{border-color:rgb(var(--store-primary-light, 44 116 47) / 0.3)}
.hover\:bg-danger\/10:hover{background-color:rgb(var(--store-tertiary, 204 51 51) / 0.1)}
.hover\:bg-danger\/5:hover{background-color:rgb(var(--store-tertiary, 204 51 51) / 0.05)}
.hover\:bg-primary-light:hover{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.hover\:bg-primary-light\/10:hover{background-color:rgb(var(--store-primary-light, 44 116 47) / 0.1)}
.hover\:bg-primary-light\/15:hover{background-color:rgb(var(--store-primary-light, 44 116 47) / 0.15)}
.hover\:bg-surface:hover{--tw-bg-opacity:1;background-color:rgb(249 249 248 / var(--tw-bg-opacity, 1))}
.hover\:bg-surface-container-high:hover{--tw-bg-opacity:1;background-color:rgb(231 232 231 / var(--tw-bg-opacity, 1))}
.hover\:bg-surface-container-low:hover{--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1))}
.hover\:bg-surface-container-low\/50:hover{background-color:rgb(243 244 243 / 0.5)}
.hover\:bg-surface-container-lowest:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}
.hover\:bg-tertiary-container\/10:hover{background-color:rgb(193 43 44 / 0.1)}
.hover\:bg-white\/80:hover{background-color:rgb(255 255 255 / 0.8)}
.hover\:font-semibold:hover{font-weight:600}
.hover\:text-danger:hover{--tw-text-opacity:1;color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-text-opacity, 1))}
.hover\:text-on-surface:hover{--tw-text-opacity:1;color:rgb(25 28 28 / var(--tw-text-opacity, 1))}
.hover\:text-primary-light:hover{--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
.hover\:text-tertiary:hover{--tw-text-opacity:1;color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-text-opacity, 1))}
.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.hover\:underline:hover{text-decoration-line:underline}
.hover\:opacity-100:hover{opacity:1}
.hover\:opacity-80:hover{opacity:0.8}
.hover\:opacity-90:hover{opacity:0.9}
.hover\:shadow-ambient:hover{--tw-shadow:0px 4px 20px rgba(0,0,0,0.04);--tw-shadow-colored:0px 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.focus\:border-primary-light:focus{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.focus\:ring-danger:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-tertiary, 204 51 51) / var(--tw-ring-opacity, 1))}
.focus\:ring-primary-light:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
.focus\:ring-primary-light\/40:focus{--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / 0.4)}
.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}
.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.focus-visible\:ring-primary-light:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
.focus-visible\:ring-primary-light\/30:focus-visible{--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / 0.3)}
.focus-visible\:ring-white\/70:focus-visible{--tw-ring-color:rgb(255 255 255 / 0.7)}
.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}
.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.active\:scale-\[0\.985\]:active{--tw-scale-x:0.985;--tw-scale-y:0.985;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.active\:bg-primary-light\/10:active{background-color:rgb(var(--store-primary-light, 44 116 47) / 0.1)}
.active\:shadow-none:active{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}
.disabled\:bg-surface-container-low:disabled{--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1))}
.disabled\:opacity-40:disabled{opacity:0.4}
.disabled\:opacity-50:disabled{opacity:0.5}
.disabled\:opacity-60:disabled{opacity:0.6}
.group:hover .group-hover\:inline-block{display:inline-block}
.group:hover .group-hover\:hidden{display:none}
.group:hover .group-hover\:-rotate-12{--tw-rotate:-12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.group:hover .group-hover\:border-primary-light{--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}
.group:hover .group-hover\:bg-primary-container{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.group:hover .group-hover\:bg-primary-light{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.group:hover .group-hover\:bg-tertiary-container{--tw-bg-opacity:1;background-color:rgb(193 43 44 / var(--tw-bg-opacity, 1))}
.group:hover .group-hover\:text-primary-light{--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
.group:hover .group-hover\:text-primary-on-container{--tw-text-opacity:1;color:rgb(170 247 162 / var(--tw-text-opacity, 1))}
.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.group:hover .group-hover\:shadow-ambient{--tw-shadow:0px 4px 20px rgba(0,0,0,0.04);--tw-shadow-colored:0px 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.group:active .group-active\:bg-primary-light{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.group:active .group-active\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.peer:checked ~ .peer-checked\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.peer:checked ~ .peer-checked\:bg-primary-light{--tw-bg-opacity:1;background-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-bg-opacity, 1))}
.peer:checked ~ .peer-checked\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.peer:checked ~ .peer-checked\:opacity-100{opacity:1}
.peer:checked ~ .peer-checked\:shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.peer:focus-visible ~ .peer-focus-visible\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.peer:focus-visible ~ .peer-focus-visible\:ring-primary-light{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-ring-opacity, 1))}
.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2{--tw-ring-offset-width:2px}
.peer:disabled ~ .peer-disabled\:opacity-50{opacity:0.5}
.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled){cursor:not-allowed}
.has-\[\:checked\]\:border-primary-light:has(:checked){--tw-border-opacity:1;border-color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-border-opacity, 1))}
.has-\[\:checked\]\:bg-primary\/5:has(:checked){background-color:rgb(var(--store-primary, 13 91 25) / 0.05)}
.has-\[\:checked\]\:bg-surface-container-low:has(:checked){--tw-bg-opacity:1;background-color:rgb(243 244 243 / var(--tw-bg-opacity, 1))}
.aria-disabled\:pointer-events-none[aria-disabled="true"]{pointer-events:none}
.aria-disabled\:opacity-60[aria-disabled="true"]{opacity:0.6}
@media (min-width: 640px){
.sm\:inset-x-auto{left:auto;right:auto}
.sm\:end-4{inset-inline-end:1rem}
.sm\:order-1{order:1}
.sm\:order-2{order:2}
.sm\:col-span-2{grid-column:span 2 / span 2}
.sm\:inline{display:inline}
.sm\:hidden{display:none}
.sm\:h-10{height:2.5rem}
.sm\:h-12{height:3rem}
.sm\:h-14{height:3.5rem}
.sm\:h-16{height:4rem}
.sm\:h-\[360px\]{height:360px}
.sm\:h-\[480px\]{height:480px}
.sm\:w-10{width:2.5rem}
.sm\:w-16{width:4rem}
.sm\:w-20{width:5rem}
.sm\:w-40{width:10rem}
.sm\:w-96{width:24rem}
.sm\:w-\[200px\]{width:200px}
.sm\:w-\[220px\]{width:220px}
.sm\:w-\[260px\]{width:260px}
.sm\:w-auto{width:auto}
.sm\:min-w-0{min-width:0px}
.sm\:flex-1{flex:1 1 0%}
.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.sm\:flex-row{flex-direction:row}
.sm\:flex-col{flex-direction:column}
.sm\:items-end{align-items:flex-end}
.sm\:items-center{align-items:center}
.sm\:justify-start{justify-content:flex-start}
.sm\:justify-end{justify-content:flex-end}
.sm\:gap-1\.5{gap:0.375rem}
.sm\:gap-3{gap:0.75rem}
.sm\:gap-5{gap:1.25rem}
.sm\:border-t-0{border-top-width:0px}
.sm\:p-5{padding:1.25rem}
.sm\:p-6{padding:1.5rem}
.sm\:p-8{padding:2rem}
.sm\:pt-0{padding-top:0px}
.sm\:text-base{font-size:1rem;line-height:1.5rem}
.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}}
@media (min-width: 768px){
.md\:mb-16{margin-bottom:4rem}
.md\:flex{display:flex}
.md\:hidden{display:none}
.md\:h-32{height:8rem}
.md\:w-32{width:8rem}
.md\:w-64{width:16rem}
.md\:w-72{width:18rem}
.md\:w-auto{width:auto}
.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
.md\:flex-row{flex-direction:row}
.md\:items-center{align-items:center}
.md\:justify-start{justify-content:flex-start}
.md\:gap-6{gap:1.5rem}
.md\:border-t-0{border-top-width:0px}
.md\:p-10{padding:2.5rem}
.md\:p-6{padding:1.5rem}
.md\:py-16{padding-top:4rem;padding-bottom:4rem}
.md\:py-section{padding-top:80px;padding-bottom:80px}
.md\:pb-0{padding-bottom:0px}
.md\:text-start{text-align:start}
.md\:text-2xl{font-size:1.5rem;line-height:2rem}
.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}
@media (min-width: 1024px){
.lg\:sticky{position:sticky}
.lg\:bottom-6{bottom:1.5rem}
.lg\:top-24{top:6rem}
.lg\:col-span-1{grid-column:span 1 / span 1}
.lg\:col-span-3{grid-column:span 3 / span 3}
.lg\:col-span-4{grid-column:span 4 / span 4}
.lg\:col-span-6{grid-column:span 6 / span 6}
.lg\:mx-0{margin-left:0px;margin-right:0px}
.lg\:mb-10{margin-bottom:2.5rem}
.lg\:mb-12{margin-bottom:3rem}
.lg\:mb-20{margin-bottom:5rem}
.lg\:mb-3{margin-bottom:0.75rem}
.lg\:mb-4{margin-bottom:1rem}
.lg\:h-20{height:5rem}
.lg\:h-72{height:18rem}
.lg\:h-80{height:20rem}
.lg\:h-\[480px\]{height:480px}
.lg\:h-\[560px\]{height:560px}
.lg\:h-full{height:100%}
.lg\:w-20{width:5rem}
.lg\:w-24{width:6rem}
.lg\:w-\[30\%\]{width:30%}
.lg\:w-\[35\%\]{width:35%}
.lg\:w-\[65\%\]{width:65%}
.lg\:w-\[70\%\]{width:70%}
.lg\:flex-1{flex:1 1 0%}
.lg\:grid-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}
.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
.lg\:flex-row{flex-direction:row}
.lg\:gap-12{gap:3rem}
.lg\:gap-6{gap:1.5rem}
.lg\:gap-gutter{gap:24px}
.lg\:p-12{padding:3rem}
.lg\:p-8{padding:2rem}
.lg\:px-0{padding-left:0px;padding-right:0px}
.lg\:px-gutter{padding-left:24px;padding-right:24px}
.lg\:py-16{padding-top:4rem;padding-bottom:4rem}
.lg\:py-24{padding-top:6rem;padding-bottom:6rem}
.lg\:text-2xl{font-size:1.5rem;line-height:2rem}
.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.lg\:text-5xl{font-size:3rem;line-height:1}
.lg\:text-base{font-size:1rem;line-height:1.5rem}
.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}
.lg\:text-sm{font-size:0.875rem;line-height:1.25rem}
.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}}
@media (min-width: 1280px){
.xl\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}
.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *){--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.\[\&\>a\]\:text-primary-light>a{--tw-text-opacity:1;color:rgb(var(--store-primary-light, 44 116 47) / var(--tw-text-opacity, 1))}
.\[\&\>a\]\:underline>a{text-decoration-line:underline}
.\[\&\>ol\]\:list-decimal>ol{list-style-type:decimal}
.\[\&\>ol\]\:ps-6>ol{padding-inline-start:1.5rem}
.\[\&\>p\]\:mb-4>p{margin-bottom:1rem}
.\[\&\>strong\]\:font-semibold>strong{font-weight:600}
.\[\&\>ul\]\:list-disc>ul{list-style-type:disc}
.\[\&\>ul\]\:ps-6>ul{padding-inline-start:1.5rem}
