/*
 * Quill rich text editor for workspace product descriptions
 */

.rich-editor-field .ql-toolbar.ql-snow {
  border: 1px solid rgb(226 232 240);
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  background: rgb(248 250 252);
  font-family: inherit;
}

.rich-editor-field .ql-container.ql-snow {
  border: 1px solid rgb(226 232 240);
  border-radius: 0 0 0.75rem 0.75rem;
  background: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.04);
}

.rich-editor-field .ql-editor {
  min-height: 12rem;
  padding: 0.875rem 1rem;
  line-height: 1.65;
  color: rgb(51 65 85);
}

.rich-editor-field .ql-editor.ql-blank::before {
  color: rgb(148 163 184);
  font-style: normal;
}

.rich-editor-field .ql-container.ql-snow:focus-within {
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
}

.rich-editor-field .ql-toolbar.ql-snow .ql-picker-label,
.rich-editor-field .ql-toolbar.ql-snow .ql-picker-item {
  color: rgb(51 65 85);
}

.rich-editor-field .ql-snow .ql-stroke {
  stroke: rgb(71 85 105);
}

.rich-editor-field .ql-snow .ql-fill {
  fill: rgb(71 85 105);
}

.rich-editor-field .ql-snow.ql-toolbar button:hover,
.rich-editor-field .ql-snow .ql-toolbar button:hover,
.rich-editor-field .ql-snow.ql-toolbar button.ql-active,
.rich-editor-field .ql-snow .ql-toolbar button.ql-active {
  color: rgb(29 78 216);
}

.rich-editor-field .ql-snow.ql-toolbar button:hover .ql-stroke,
.rich-editor-field .ql-snow .ql-toolbar button:hover .ql-stroke,
.rich-editor-field .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.rich-editor-field .ql-snow .ql-toolbar button.ql-active .ql-stroke {
  stroke: rgb(29 78 216);
}

.rich-editor-field .ql-snow.ql-toolbar button:hover .ql-fill,
.rich-editor-field .ql-snow .ql-toolbar button:hover .ql-fill,
.rich-editor-field .ql-snow.ql-toolbar button.ql-active .ql-fill,
.rich-editor-field .ql-snow .ql-toolbar button.ql-active .ql-fill {
  fill: rgb(29 78 216);
}

.product-rich-text {
  line-height: 1.65;
  color: rgb(51 65 85);
  word-wrap: break-word;
}

.product-rich-text h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 1rem 0 0.5rem;
  color: rgb(15 23 42);
}

.product-rich-text h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.875rem 0 0.5rem;
  color: rgb(15 23 42);
}

.product-rich-text p {
  margin: 0.5rem 0;
}

.product-rich-text ul,
.product-rich-text ol {
  margin: 0.5rem 0 0.5rem 1.25rem;
}

.product-rich-text li {
  margin: 0.25rem 0;
}

.product-rich-text a {
  color: rgb(29 78 216);
  text-decoration: underline;
}

.product-rich-text u {
  text-decoration: underline;
}

.product-rich-text mark {
  border-radius: 0.25rem;
  background: rgb(254 240 138);
  padding: 0.05rem 0.18rem;
}

.product-rich-text .rt-text-blue {
  color: #2563eb !important;
}

.product-rich-text .rt-text-green {
  color: #059669 !important;
}

.product-rich-text .rt-text-red {
  color: #dc2626 !important;
}

.product-rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 0.75rem 0;
}

.product-rich-text blockquote {
  border-left: 3px solid rgb(191 219 254);
  padding-left: 1rem;
  margin: 0.75rem 0;
  color: rgb(71 85 105);
}

.product-rich-text pre {
  background: rgb(248 250 252);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
}

.product-rich-text .ql-align-center {
  text-align: center;
}

.product-rich-text .ql-align-right {
  text-align: right;
}

.product-rich-text .ql-align-justify {
  text-align: justify;
}

/* Admin dark theme for Quill editor */
.dark .admin-rich-editor .rich-editor-field .ql-toolbar.ql-snow {
  border-color: rgb(51 65 85);
  background: rgb(2 6 23);
}

.dark .admin-rich-editor .rich-editor-field .ql-container.ql-snow {
  border-color: rgb(51 65 85);
  background: rgb(2 6 23);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2);
}

.dark .admin-rich-editor .rich-editor-field .ql-editor {
  color: rgb(226 232 240);
  min-height: 16rem;
}

.dark .admin-rich-editor .rich-editor-field .ql-editor.ql-blank::before {
  color: rgb(100 116 139);
}

.dark .admin-rich-editor .rich-editor-field .ql-container.ql-snow:focus-within {
  border-color: rgb(14 165 233);
  box-shadow: 0 0 0 3px rgb(14 165 233 / 0.15);
}

.dark .admin-rich-editor .rich-editor-field .ql-toolbar.ql-snow .ql-picker-label,
.dark .admin-rich-editor .rich-editor-field .ql-toolbar.ql-snow .ql-picker-item {
  color: rgb(203 213 225);
}

.dark .admin-rich-editor .rich-editor-field .ql-snow .ql-stroke {
  stroke: rgb(148 163 184);
}

.dark .admin-rich-editor .rich-editor-field .ql-snow .ql-fill {
  fill: rgb(148 163 184);
}

.dark .admin-rich-editor .rich-editor-field .ql-snow.ql-toolbar button:hover,
.dark .admin-rich-editor .rich-editor-field .ql-snow .ql-toolbar button:hover,
.dark .admin-rich-editor .rich-editor-field .ql-snow.ql-toolbar button.ql-active,
.dark .admin-rich-editor .rich-editor-field .ql-snow .ql-toolbar button.ql-active {
  color: rgb(56 189 248);
}

.dark .admin-rich-editor .rich-editor-field .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  z-index: 40;
}

.dark .admin-rich-editor .rich-editor-field .ql-toolbar.ql-snow .ql-picker-options {
  background: rgb(15 23 42);
  border-color: rgb(51 65 85);
}

/* Public blog article body */
.blog-rich-text {
  line-height: 1.75;
  color: rgb(51 65 85);
  word-wrap: break-word;
}

.blog-rich-text h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 1.5rem 0 0.75rem;
  color: rgb(15 23 42);
}

.blog-rich-text h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 1.25rem 0 0.625rem;
  color: rgb(15 23 42);
}

.blog-rich-text p {
  margin: 0.75rem 0;
}

.blog-rich-text ul,
.blog-rich-text ol {
  margin: 0.75rem 0 0.75rem 1.5rem;
}

.blog-rich-text li {
  margin: 0.35rem 0;
}

.blog-rich-text a {
  color: rgb(29 78 216);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 1.25rem 0;
  box-shadow: 0 10px 25px rgb(15 23 42 / 0.08);
}

.blog-rich-text blockquote {
  border-left: 4px solid rgb(59 130 246);
  padding-left: 1rem;
  margin: 1rem 0;
  color: rgb(71 85 105);
  font-style: italic;
}

.blog-rich-text pre {
  background: rgb(248 250 252);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  border: 1px solid rgb(226 232 240);
}

.blog-rich-text .attachment,
.blog-rich-text figure {
  margin: 1.25rem 0;
}

.blog-rich-text .ql-align-center {
  text-align: center;
}

.blog-rich-text .ql-align-right {
  text-align: right;
}
/* Flatpickr admin datetime picker with high contrast on dark admin UI */

.flatpickr-admin-theme.flatpickr-calendar {
  background: rgb(30 41 59) !important;
  border: 1px solid rgb(56 189 248 / 0.45) !important;
  border-radius: 1rem;
  box-shadow:
    0 25px 50px -12px rgb(0 0 0 / 0.65),
    0 0 0 1px rgb(14 165 233 / 0.2);
  color: rgb(248 250 252) !important;
  font-family: inherit;
  overflow: visible;
}

.flatpickr-admin-theme.flatpickr-calendar.hasTime .flatpickr-time {
  height: auto !important;
  min-height: 3.75rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.flatpickr-admin-theme .flatpickr-innerContainer {
  overflow: visible;
}

.flatpickr-admin-theme .flatpickr-months {
  background: linear-gradient(135deg, rgb(14 165 233 / 0.18) 0%, rgb(99 102 241 / 0.14) 100%);
  border-bottom: 1px solid rgb(71 85 105 / 0.8);
  padding: 0.75rem 0.5rem 0.5rem;
}

.flatpickr-admin-theme .flatpickr-months .flatpickr-month {
  height: 2.25rem;
  color: rgb(248 250 252);
}

.flatpickr-admin-theme .flatpickr-current-month {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgb(248 250 252) !important;
}

.flatpickr-admin-theme .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-admin-theme .flatpickr-current-month input.cur-year {
  font-weight: 700;
  color: rgb(248 250 252) !important;
  background: rgb(51 65 85) !important;
  border-radius: 0.5rem;
}

.flatpickr-admin-theme .flatpickr-prev-month,
.flatpickr-admin-theme .flatpickr-next-month {
  fill: rgb(186 230 253) !important;
  color: rgb(186 230 253) !important;
  padding: 0.35rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s, fill 0.15s;
}

.flatpickr-admin-theme .flatpickr-prev-month:hover,
.flatpickr-admin-theme .flatpickr-next-month:hover {
  fill: rgb(255 255 255) !important;
  background: rgb(14 165 233 / 0.25);
}

.flatpickr-admin-theme span.flatpickr-weekday {
  color: rgb(148 163 184) !important;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.flatpickr-admin-theme .flatpickr-days {
  background: rgb(30 41 59) !important;
}

.flatpickr-admin-theme .dayContainer {
  background: transparent;
}

.flatpickr-admin-theme .flatpickr-day {
  border-radius: 0.65rem;
  color: rgb(241 245 249) !important;
  font-weight: 600;
  line-height: 2rem;
  max-width: 2rem;
  height: 2rem;
  border-color: transparent;
}

.flatpickr-admin-theme .flatpickr-day:hover,
.flatpickr-admin-theme .flatpickr-day:focus {
  background: rgb(51 65 85) !important;
  border-color: rgb(56 189 248 / 0.35) !important;
  color: rgb(255 255 255) !important;
}

.flatpickr-admin-theme .flatpickr-day.today {
  border-color: rgb(56 189 248) !important;
  background: rgb(14 165 233 / 0.22) !important;
  color: rgb(186 230 253) !important;
}

.flatpickr-admin-theme .flatpickr-day.selected,
.flatpickr-admin-theme .flatpickr-day.startRange,
.flatpickr-admin-theme .flatpickr-day.endRange,
.flatpickr-admin-theme .flatpickr-day.selected.inRange,
.flatpickr-admin-theme .flatpickr-day.startRange.inRange,
.flatpickr-admin-theme .flatpickr-day.endRange.inRange {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important;
  border-color: transparent !important;
  color: rgb(255 255 255) !important;
  box-shadow: 0 8px 20px -8px rgb(14 165 233 / 0.75);
}

.flatpickr-admin-theme .flatpickr-day.flatpickr-disabled,
.flatpickr-admin-theme .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-admin-theme .flatpickr-day.prevMonthDay,
.flatpickr-admin-theme .flatpickr-day.nextMonthDay {
  color: rgb(100 116 139) !important;
  background: transparent !important;
}

.flatpickr-admin-theme .flatpickr-time {
  border-top: 1px solid rgb(71 85 105) !important;
  background: rgb(15 23 42) !important;
  height: auto !important;
  max-height: none !important;
  line-height: normal !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.65rem 1rem !important;
  box-sizing: border-box;
}

.flatpickr-admin-theme .flatpickr-time .numInputWrapper {
  float: none !important;
  width: auto !important;
  flex: 0 0 auto;
  height: auto !important;
  min-width: 3.25rem;
}

.flatpickr-admin-theme .flatpickr-time input.flatpickr-hour,
.flatpickr-admin-theme .flatpickr-time input.flatpickr-minute,
.flatpickr-admin-theme .flatpickr-time input.flatpickr-second {
  background: rgb(51 65 85) !important;
  border: 1px solid rgb(100 116 139) !important;
  border-radius: 0.65rem;
  color: rgb(255 255 255) !important;
  font-weight: 700;
  font-size: 1rem;
  height: 2.5rem !important;
  line-height: 2.5rem !important;
  width: 2.75rem !important;
  padding: 0 0.25rem !important;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2);
  box-sizing: border-box;
}

.flatpickr-admin-theme .flatpickr-time input:hover,
.flatpickr-admin-theme .flatpickr-time input:focus {
  background: rgb(71 85 105) !important;
  border-color: rgb(56 189 248) !important;
}

.flatpickr-admin-theme .flatpickr-time .flatpickr-time-separator {
  color: rgb(203 213 225) !important;
  font-weight: 700;
  float: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  align-self: center;
  padding: 0 0.15rem;
}

.flatpickr-admin-theme .flatpickr-time .flatpickr-am-pm {
  background: rgb(51 65 85) !important;
  border: 1px solid rgb(100 116 139) !important;
  border-radius: 0.65rem;
  color: rgb(248 250 252) !important;
  font-size: 0.85rem;
  font-weight: 700;
  float: none !important;
  width: auto !important;
  min-width: 2.75rem;
  height: 2.5rem !important;
  line-height: 2.5rem !important;
  align-self: center;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.flatpickr-admin-theme .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-admin-theme .flatpickr-time .flatpickr-am-pm:focus {
  background: rgb(14 165 233 / 0.25) !important;
  border-color: rgb(56 189 248) !important;
}

.flatpickr-admin-theme .numInputWrapper span.arrowUp,
.flatpickr-admin-theme .numInputWrapper span.arrowDown {
  border-color: rgb(71 85 105);
}

.flatpickr-admin-theme .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgb(186 230 253);
}

.flatpickr-admin-theme .numInputWrapper span.arrowDown:after {
  border-top-color: rgb(186 230 253);
}

/* Visible input on dark admin forms */
.datetime-picker-input-shell {
  position: relative;
  width: 100%;
}

.datetime-picker-field .flatpickr-wrapper,
.datetime-picker-wrap {
  display: block !important;
  width: 100% !important;
  position: relative;
}

.datetime-picker-alt-input {
  width: 100% !important;
  box-sizing: border-box;
  border-radius: 0.75rem;
  border: 1px solid rgb(56 189 248 / 0.45) !important;
  background: rgb(30 41 59) !important;
  padding: 0.8rem 2.85rem 0.8rem 1rem !important;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(248 250 252) !important;
  outline: none;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.15);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.datetime-picker-input-shell--ready:focus-within .datetime-picker-alt-input {
  border-color: rgb(56 189 248) !important;
  background: rgb(51 65 85) !important;
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.15),
    0 0 0 3px rgb(14 165 233 / 0.25);
}

.datetime-picker-alt-input::placeholder {
  color: rgb(148 163 184) !important;
  font-weight: 500;
}

.datetime-picker-alt-input:hover {
  border-color: rgb(56 189 248 / 0.7) !important;
  background: rgb(51 65 85) !important;
}

.datetime-picker-alt-input:focus {
  border-color: rgb(56 189 248) !important;
  background: rgb(51 65 85) !important;
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.15),
    0 0 0 3px rgb(14 165 233 / 0.25);
}

.datetime-picker-icon {
  pointer-events: auto;
  position: absolute;
  right: 0.55rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  border: 0;
  border-radius: 0.55rem;
  background: rgb(14 165 233 / 0.12);
  color: rgb(56 189 248);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.datetime-picker-icon:hover {
  background: rgb(14 165 233 / 0.22);
  color: rgb(186 230 253);
}

.datetime-picker-icon svg {
  height: 1.1rem;
  width: 1.1rem;
}

.datetime-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.datetime-picker-action {
  border-radius: 0.65rem;
  border: 1px solid rgb(71 85 105);
  background: rgb(30 41 59);
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgb(203 213 225);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.datetime-picker-action:hover {
  border-color: rgb(56 189 248 / 0.55);
  background: rgb(14 165 233 / 0.15);
  color: rgb(224 242 254);
}

.datetime-picker-action--primary {
  border-color: rgb(14 165 233 / 0.55);
  background: rgb(14 165 233 / 0.2);
  color: rgb(186 230 253);
}

.datetime-picker-field input.flatpickr-input[readonly] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shop / workspace light datetime picker */

.datetime-picker-alt-input--shop {
  border: 1px solid rgb(226 232 240) !important;
  background: linear-gradient(180deg, rgb(255 255 255), rgb(248 250 252)) !important;
  color: rgb(15 23 42) !important;
  letter-spacing: -0.01em;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.05),
    inset 0 1px 0 rgb(255 255 255);
}

.datetime-picker-input-shell--shop:focus-within .datetime-picker-alt-input--shop,
.datetime-picker-alt-input--shop:hover,
.datetime-picker-alt-input--shop:focus {
  border-color: rgb(16 185 129 / 0.65) !important;
  background: rgb(255 255 255) !important;
  box-shadow:
    0 0 0 4px rgb(16 185 129 / 0.14),
    0 8px 20px -12px rgb(5 150 105 / 0.35);
}

.datetime-picker-alt-input--shop::placeholder {
  color: rgb(148 163 184) !important;
}

.datetime-picker-icon--shop {
  background: linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105));
  color: rgb(255 255 255);
  box-shadow: 0 8px 16px -10px rgb(5 150 105 / 0.9);
}

.datetime-picker-icon--shop:hover {
  background: linear-gradient(135deg, rgb(5 150 105), rgb(4 120 87));
  color: rgb(255 255 255);
}

.datetime-picker-field--shop .datetime-picker-action {
  border: 1px solid rgb(226 232 240);
  background: rgb(255 255 255);
  color: rgb(71 85 105);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.datetime-picker-field--shop .datetime-picker-action:hover {
  border-color: rgb(167 243 208);
  background: rgb(236 253 245);
  color: rgb(6 95 70);
}

.datetime-picker-field--shop .datetime-picker-action--primary {
  border-color: transparent;
  background: linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105));
  color: rgb(255 255 255);
  box-shadow: 0 8px 16px -10px rgb(5 150 105 / 0.85);
}

.datetime-picker-field--shop .datetime-picker-action--primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, rgb(5 150 105), rgb(4 120 87));
  color: rgb(255 255 255);
}

.flatpickr-shop-theme.flatpickr-calendar {
  background: rgb(255 255 255) !important;
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 1.25rem;
  box-shadow:
    0 28px 55px -18px rgb(15 23 42 / 0.28),
    0 0 0 1px rgb(16 185 129 / 0.08);
  color: rgb(15 23 42) !important;
  font-family: inherit;
  overflow: hidden;
  width: 328px;
  padding-bottom: 0.15rem;
}

.flatpickr-shop-theme.flatpickr-calendar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, rgb(16 185 129), rgb(52 211 153), rgb(45 212 191));
}

.flatpickr-shop-theme.flatpickr-calendar.hasTime .flatpickr-time {
  height: auto !important;
  min-height: 4.25rem;
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}

.flatpickr-shop-theme .flatpickr-innerContainer {
  overflow: visible;
  padding: 0.35rem 0.65rem 0.55rem;
}

.flatpickr-shop-theme .flatpickr-months {
  background: linear-gradient(180deg, rgb(236 253 245) 0%, rgb(255 255 255) 100%);
  border-bottom: 1px solid rgb(226 232 240 / 0.9);
  padding: 0.95rem 0.65rem 0.7rem;
}

.flatpickr-shop-theme .flatpickr-months .flatpickr-month {
  height: 2.4rem;
  color: rgb(6 95 70);
}

.flatpickr-shop-theme .flatpickr-current-month {
  font-size: 0.98rem;
  font-weight: 800;
  color: rgb(6 95 70) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  left: 12.5%;
  width: 75%;
}

.flatpickr-shop-theme .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-shop-theme .flatpickr-current-month input.cur-year {
  font-weight: 800;
  color: rgb(15 23 42) !important;
  background: rgb(255 255 255) !important;
  border: 1px solid rgb(209 250 229);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  box-shadow: 0 1px 2px rgb(16 185 129 / 0.08);
}

.flatpickr-shop-theme .flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  padding-right: 1.35rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgb(5 150 105) 50%),
    linear-gradient(135deg, rgb(5 150 105) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) calc(50% - 2px),
    calc(100% - 8px) calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.flatpickr-shop-theme .flatpickr-current-month input.cur-year {
  width: 4.2rem;
  text-align: center;
}

.flatpickr-shop-theme .flatpickr-prev-month,
.flatpickr-shop-theme .flatpickr-next-month {
  fill: rgb(5 150 105) !important;
  color: rgb(5 150 105) !important;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  top: 1.05rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255);
  border: 1px solid rgb(209 250 229);
  box-shadow: 0 1px 2px rgb(16 185 129 / 0.1);
  transition: background-color 0.15s, fill 0.15s, transform 0.15s, box-shadow 0.15s;
}

.flatpickr-shop-theme .flatpickr-prev-month {
  left: 0.85rem;
}

.flatpickr-shop-theme .flatpickr-next-month {
  right: 0.85rem;
}

.flatpickr-shop-theme .flatpickr-prev-month:hover,
.flatpickr-shop-theme .flatpickr-next-month:hover {
  fill: rgb(255 255 255) !important;
  color: rgb(255 255 255) !important;
  background: linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105));
  border-color: transparent;
  box-shadow: 0 8px 16px -10px rgb(5 150 105 / 0.9);
  transform: translateY(-1px);
}

.flatpickr-shop-theme .flatpickr-prev-month svg,
.flatpickr-shop-theme .flatpickr-next-month svg {
  width: 12px;
  height: 12px;
}

.flatpickr-shop-theme .flatpickr-weekdays {
  padding: 0.15rem 0 0.35rem;
}

.flatpickr-shop-theme span.flatpickr-weekday {
  color: rgb(100 116 139) !important;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.flatpickr-shop-theme .flatpickr-days {
  background: transparent !important;
  padding-bottom: 0.25rem;
}

.flatpickr-shop-theme .dayContainer {
  background: transparent;
  min-width: 308px;
  max-width: 308px;
  gap: 2px 0;
}

.flatpickr-shop-theme .flatpickr-day {
  border-radius: 999px;
  color: rgb(30 41 59) !important;
  font-weight: 700;
  line-height: 2.25rem;
  max-width: 2.25rem;
  height: 2.25rem;
  margin: 0.08rem 0.12rem;
  border: 1.5px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.flatpickr-shop-theme .flatpickr-day:hover,
.flatpickr-shop-theme .flatpickr-day:focus {
  background: rgb(236 253 245) !important;
  border-color: rgb(167 243 208) !important;
  color: rgb(6 95 70) !important;
  transform: translateY(-1px);
}

.flatpickr-shop-theme .flatpickr-day.today {
  border-color: transparent !important;
  background: rgb(209 250 229) !important;
  color: rgb(4 120 87) !important;
  box-shadow: inset 0 0 0 1.5px rgb(16 185 129 / 0.45);
}

.flatpickr-shop-theme .flatpickr-day.today:hover {
  background: rgb(167 243 208) !important;
}

.flatpickr-shop-theme .flatpickr-day.selected,
.flatpickr-shop-theme .flatpickr-day.startRange,
.flatpickr-shop-theme .flatpickr-day.endRange,
.flatpickr-shop-theme .flatpickr-day.selected.inRange,
.flatpickr-shop-theme .flatpickr-day.startRange.inRange,
.flatpickr-shop-theme .flatpickr-day.endRange.inRange,
.flatpickr-shop-theme .flatpickr-day.selected:hover,
.flatpickr-shop-theme .flatpickr-day.today.selected {
  background: linear-gradient(145deg, rgb(52 211 153), rgb(5 150 105)) !important;
  border-color: transparent !important;
  color: rgb(255 255 255) !important;
  box-shadow:
    0 10px 18px -10px rgb(5 150 105 / 0.9),
    inset 0 1px 0 rgb(255 255 255 / 0.25);
  transform: translateY(-1px);
}

.flatpickr-shop-theme .flatpickr-day.flatpickr-disabled,
.flatpickr-shop-theme .flatpickr-day.flatpickr-disabled:hover {
  color: rgb(203 213 225) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.55;
  cursor: not-allowed;
}

.flatpickr-shop-theme .flatpickr-day.prevMonthDay,
.flatpickr-shop-theme .flatpickr-day.nextMonthDay {
  color: rgb(203 213 225) !important;
  font-weight: 500;
}

.flatpickr-shop-theme .flatpickr-time {
  border-top: 1px solid rgb(226 232 240) !important;
  background: linear-gradient(180deg, rgb(248 250 252), rgb(255 255 255));
  padding: 0.85rem 0.9rem 1rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: relative;
}

.flatpickr-shop-theme .flatpickr-time::before {
  content: 'Time';
  position: absolute;
  top: 0.45rem;
  left: 1rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(148 163 184);
}

.flatpickr-shop-theme .flatpickr-time .numInputWrapper {
  width: 3.4rem;
  height: 2.55rem;
  margin-top: 0.65rem;
}

.flatpickr-shop-theme .flatpickr-time input.flatpickr-hour,
.flatpickr-shop-theme .flatpickr-time input.flatpickr-minute,
.flatpickr-shop-theme .flatpickr-time input.flatpickr-second {
  font-weight: 800;
  font-size: 1.05rem;
  color: rgb(15 23 42) !important;
  background: rgb(255 255 255) !important;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.85rem;
  height: 2.55rem !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.flatpickr-shop-theme .flatpickr-time input:hover,
.flatpickr-shop-theme .flatpickr-time input:focus {
  border-color: rgb(16 185 129 / 0.6) !important;
  box-shadow: 0 0 0 3px rgb(16 185 129 / 0.14);
}

.flatpickr-shop-theme .flatpickr-time .flatpickr-time-separator {
  color: rgb(148 163 184) !important;
  font-weight: 900;
  height: 2.55rem;
  line-height: 2.55rem;
  margin-top: 0.65rem;
}

.flatpickr-shop-theme .flatpickr-time .flatpickr-am-pm {
  width: 3.4rem;
  height: 2.55rem !important;
  line-height: 2.55rem !important;
  margin-top: 0.65rem;
  border-radius: 0.85rem;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgb(236 253 245), rgb(209 250 229)) !important;
  color: rgb(4 120 87) !important;
  font-weight: 900;
  box-shadow: 0 1px 2px rgb(16 185 129 / 0.12);
}

.flatpickr-shop-theme .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-shop-theme .flatpickr-time .flatpickr-am-pm:focus {
  background: linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105)) !important;
  color: rgb(255 255 255) !important;
  border-color: transparent;
}

.flatpickr-shop-theme .numInputWrapper span.arrowUp,
.flatpickr-shop-theme .numInputWrapper span.arrowDown {
  opacity: 0.7;
  border: 0;
}

.flatpickr-shop-theme .numInputWrapper span.arrowUp:hover,
.flatpickr-shop-theme .numInputWrapper span.arrowDown:hover {
  background: rgb(236 253 245);
  opacity: 1;
}

.flatpickr-shop-theme .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgb(5 150 105);
}

.flatpickr-shop-theme .numInputWrapper span.arrowDown:after {
  border-top-color: rgb(5 150 105);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Map pickers (Google Maps) */
.pickup-map {
  z-index: 0;
  height: 100%;
  width: 100%;
}

.pac-container {
  z-index: 10000;
}

/* SortableJS (admin homepage sections reorder) */
.sortable-ghost {
  opacity: 0.4;
  background: rgb(236 253 245) !important;
}

.sortable-chosen {
  background: rgb(255 255 255);
}

.sortable-fallback,
.sortable-drag {
  opacity: 1 !important;
  background: #fff !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  border-radius: 1rem;
  cursor: grabbing !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

.sortable-fallback {
  position: fixed !important;
}

/* Brand gradient sidebar: slim styled scrollbar (admin / workspace) */
.gradient-sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
  scrollbar-gutter: stable;
}

.gradient-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.gradient-sidebar-scroll::-webkit-scrollbar-track {
  margin: 6px 0;
  background: transparent;
}

.gradient-sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  box-shadow: 0 0 6px rgba(15, 23, 42, 0.12);
}

.gradient-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.48) 100%);
}

.gradient-sidebar-scroll::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.9);
}

/* Pagy pagination (nav.pagy-nav): complements Tailwind CDN layout */
.pagy-responsive {
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.pagy-responsive .pagy-nav-desktop {
  display: none;
}

.pagy-responsive .pagy-nav-mobile {
  display: flex;
}

@media (min-width: 640px) {
  .pagy-responsive .pagy-nav-mobile {
    display: none;
  }

  .pagy-responsive .pagy-nav-desktop {
    display: flex;
  }
}

nav.pagy-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}

nav.pagy-nav-mobile {
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: 100%;
  max-width: 22rem;
}

nav.pagy-nav-mobile .page.prev,
nav.pagy-nav-mobile .page.next,
nav.pagy-nav-mobile .page.prev a,
nav.pagy-nav-mobile .page.next a {
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
}

nav.pagy-nav-mobile .pagy-page-status {
  flex: 1 1 auto;
  min-width: 7rem;
  height: 2.75rem;
  gap: 0.35rem;
  padding: 0 1rem;
  font-variant-numeric: tabular-nums;
}

nav.pagy-nav-mobile .pagy-page-sep {
  opacity: 0.7;
  font-weight: 500;
}

nav.pagy-nav-mobile .pagy-page-total {
  opacity: 0.9;
  font-weight: 600;
}

/* Admin-tinted pagy controls */
.pagy-nav-admin nav.pagy-nav .page a {
  border-color: rgb(167 243 208 / 0.9);
  color: rgb(4 120 87);
}

.pagy-nav-admin nav.pagy-nav .page a:hover {
  border-color: rgb(52 211 153);
  background: rgb(236 253 245);
  color: rgb(6 95 70);
}

.pagy-nav-admin nav.pagy-nav .page.active {
  background: linear-gradient(135deg, #047857 0%, #0f766e 55%, #115e59 100%);
  box-shadow: 0 8px 24px -6px rgb(4 120 87 / 0.45);
}

nav.pagy-nav .page {
  display: inline-flex;
  min-width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}

nav.pagy-nav .page a {
  display: inline-flex;
  min-width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  background: rgb(255 255 255 / 0.95);
  color: rgb(37 99 235);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  text-decoration: none;
}

nav.pagy-nav .page a:hover {
  border-color: rgb(147 197 253);
  background: rgb(239 246 255);
  color: rgb(29 78 216);
}

nav.pagy-nav .page.active {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 55%, #0369a1 100%);
  color: white;
  box-shadow: 0 8px 24px -6px rgb(37 99 235 / 0.45);
}

nav.pagy-nav .page.gap {
  border: 1px dashed rgb(226 232 240);
  background: transparent;
  color: rgb(148 163 184);
  font-weight: 500;
}

nav.pagy-nav .page.disabled {
  cursor: not-allowed;
  border: 1px solid rgb(241 245 249);
  background: rgb(248 250 252);
  color: rgb(148 163 184);
}

html.dark nav.pagy-nav .page a {
  border-color: rgb(51 65 85 / 0.8);
  background: rgb(15 23 42 / 0.7);
  color: rgb(125 211 252);
}

html.dark nav.pagy-nav .page a:hover {
  border-color: rgb(56 189 248 / 0.4);
  background: rgb(30 41 59 / 0.9);
  color: rgb(224 242 254);
}

html.dark nav.pagy-nav .page.active {
  background: linear-gradient(135deg, #0284c7 0%, #4f46e5 50%, #312e81 100%);
  color: white;
}

html.dark nav.pagy-nav .page.disabled {
  border-color: rgb(51 65 85);
  background: rgb(15 23 42 / 0.5);
  color: rgb(100 116 139);
}

/* Amber pagination for orders and marketplace account pages */
.pagy-nav-amber nav.pagy-nav .page a {
  border-color: rgb(253 230 138 / 0.9);
  color: rgb(180 83 9);
}

.pagy-nav-amber nav.pagy-nav .page a:hover {
  border-color: rgb(251 191 36);
  background: rgb(255 251 235);
  color: rgb(146 64 14);
}

.pagy-nav-amber nav.pagy-nav .page.active {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 55%, #e11d48 100%);
  box-shadow: 0 8px 24px -6px rgb(234 88 12 / 0.4);
}

body {
  -webkit-overflow-scrolling: touch;
  overflow-x: clip;
}

html {
  background-color: #f1f5f9;
  overflow-x: clip;
}

/* Content above the fixed paint background. Do NOT use transform here —
   it creates a containing block and breaks position:sticky on nav/ticker. */
.site-content-shell {
  isolation: isolate;
  overflow-x: clip;
  min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Ambient page background. Static to avoid scroll jank from blend modes/animation. */
/* -------------------------------------------------------------------------- */

.site-paint-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(168deg, #f8fafc 0%, #eef2ff 38%, #f0f9ff 72%, #f1f5f9 100%);
  contain: paint;
}

.site-paint-bg__plane,
.site-paint-bg__wash,
.site-paint-bg__glow,
.site-paint-bg__grain {
  position: absolute;
  inset: 0;
}

.site-paint-bg__plane {
  transform: none;
}

.site-paint-bg--light .site-paint-bg__plane {
  background:
    radial-gradient(ellipse 130% 90% at 12% 8%, rgb(191 219 254 / 0.55), transparent 52%),
    radial-gradient(ellipse 110% 85% at 92% 12%, rgb(196 181 253 / 0.38), transparent 48%),
    radial-gradient(ellipse 100% 70% at 50% 105%, rgb(254 215 170 / 0.35), transparent 55%);
}

.site-paint-bg--dark .site-paint-bg__plane {
  background:
    radial-gradient(ellipse 120% 80% at 10% 5%, rgb(56 189 248 / 0.12), transparent 50%),
    radial-gradient(ellipse 100% 70% at 95% 20%, rgb(129 140 248 / 0.14), transparent 48%),
    radial-gradient(ellipse 90% 60% at 45% 100%, rgb(14 165 233 / 0.1), transparent 50%);
}

.site-paint-bg--dark {
  background: linear-gradient(165deg, #020617 0%, #0f172a 45%, #172554 100%);
}

.site-paint-bg__wash {
  opacity: 0.45;
  transform: none;
}

.site-paint-bg--light .site-paint-bg__wash {
  background:
    radial-gradient(ellipse 80% 50% at 70% 60%, rgb(99 102 241 / 0.12), transparent 60%),
    radial-gradient(ellipse 60% 45% at 25% 75%, rgb(14 165 233 / 0.1), transparent 55%);
}

.site-paint-bg--dark .site-paint-bg__wash {
  opacity: 0.35;
  background:
    radial-gradient(ellipse 70% 55% at 65% 55%, rgb(99 102 241 / 0.18), transparent 58%),
    radial-gradient(ellipse 55% 40% at 20% 70%, rgb(56 189 248 / 0.12), transparent 52%);
}

.site-paint-bg__glow {
  opacity: 0.28;
  background: linear-gradient(
    118deg,
    transparent 0%,
    rgb(255 255 255 / 0.18) 42%,
    transparent 58%
  );
  transform: none;
}

.site-paint-bg--dark .site-paint-bg__glow {
  opacity: 0.12;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgb(148 163 184 / 0.25) 45%,
    transparent 60%
  );
}

.site-paint-bg__grain {
  opacity: 0.035;
  background-image: radial-gradient(rgb(15 23 42) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}

.site-paint-bg--dark .site-paint-bg__grain {
  opacity: 0.06;
  background-image: radial-gradient(rgb(248 250 252) 0.5px, transparent 0.5px);
}

/* Marketplace offers ticker: seamless right-to-left marquee + attention motion */
@keyframes offers-ticker-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.offers-ticker {
  isolation: isolate;
  overflow-x: clip;
}

.offers-ticker__shine {
  animation: offers-ticker-shine 2.2s ease-in-out infinite;
}

@keyframes offers-ticker-shine {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

.offers-ticker__beam {
  left: 0;
  will-change: transform;
  animation: offers-ticker-beam 4.5s linear infinite;
}

/* Use transform (not left) so the beam never widens document scroll. */
@keyframes offers-ticker-beam {
  0% {
    transform: translateX(-7rem);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(100vw + 2rem));
    opacity: 0;
  }
}

.offers-ticker__headline {
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.25);
}

.offers-ticker__star {
  animation: offers-ticker-star 2.4s ease-in-out infinite;
}

@keyframes offers-ticker-star {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  40% {
    transform: scale(1.06) rotate(-5deg);
  }

  70% {
    transform: scale(1.03) rotate(4deg);
  }
}

.offers-ticker-chip--hot {
  border-color: rgba(251, 191, 36, 0.35);
  background-color: rgba(251, 191, 36, 0.08);
}

.offers-ticker-chip--deal {
  box-shadow: 0 0 0 1px rgba(190, 242, 100, 0.18), 0 8px 22px -10px rgba(132, 204, 22, 0.55);
}

.offers-ticker-chip__discount {
  background: linear-gradient(135deg, #d9f99d 0%, #a3e635 45%, #65a30d 100%);
  color: #14532d;
  border: 1px solid rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(163, 230, 53, 0.45),
    0 0 14px 2px rgba(163, 230, 53, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35);
  animation: offers-ticker-discount-blink 0.7s ease-in-out infinite;
}

@keyframes offers-ticker-discount-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(163, 230, 53, 0.5),
      0 0 10px 1px rgba(163, 230, 53, 0.45),
      0 2px 6px rgba(0, 0, 0, 0.35);
  }

  50% {
    opacity: 1;
    transform: scale(1.14);
    filter: brightness(1.25);
    box-shadow:
      0 0 0 2px rgba(190, 242, 100, 0.95),
      0 0 22px 4px rgba(132, 204, 22, 0.9),
      0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

.offers-ticker-chip__badge {
  animation: offers-ticker-badge-blink 0.85s ease-in-out infinite;
}

.offers-ticker-chip--hot .offers-ticker-chip__badge {
  animation-duration: 0.7s;
}

@keyframes offers-ticker-badge-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
    filter: brightness(1.35);
    box-shadow: 0 0 14px 2px rgba(251, 191, 36, 0.65);
  }
}

.offers-ticker-track--animate {
  animation: offers-ticker-marquee var(--offers-ticker-duration, 50s) linear infinite;
  will-change: transform;
}

.offers-ticker-track--animate > a {
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.offers-ticker-track--animate > a:hover {
  transform: translateY(-1px);
}

@media (max-width: 639px) {
  .offers-ticker-track--animate {
    animation-duration: calc(var(--offers-ticker-duration, 50s) * 0.75);
  }
}

.offers-ticker:hover .offers-ticker-track--animate {
  animation-play-state: paused;
}

.offers-ticker-track--animate.is-paused {
  animation-play-state: paused;
}

.offers-ticker-track--static {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}

.offers-ticker-track--static::-webkit-scrollbar {
  display: none;
}

/* Product show gallery: fixed square viewer with hover zoom */
.product-gallery-viewer {
  min-height: 0;
  background: #fff;
}

.product-gallery-zoom-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0;
}

.product-gallery-zoom-inner {
  display: block;
  height: 100%;
  width: 100%;
  will-change: transform;
  transition: transform 0.12s ease-out;
}

.product-gallery-main-image {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.product-gallery-viewer--zooming .product-gallery-zoom-inner {
  cursor: crosshair;
}

.product-gallery-lightbox:not(.hidden) {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .product-gallery-zoom-inner {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offers-ticker__shine,
  .offers-ticker__beam,
  .offers-ticker__star,
  .offers-ticker-chip__discount,
  .offers-ticker-chip__badge {
    animation: none !important;
  }

  .offers-ticker__shine {
    opacity: 0.85;
  }

  .offers-ticker__beam {
    display: none;
  }

  .offers-ticker-chip__discount {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    box-shadow:
      0 0 0 1px rgba(163, 230, 53, 0.55),
      0 2px 6px rgba(0, 0, 0, 0.35) !important;
  }

  .offers-ticker-track--animate {
    animation: none;
  }

  .offers-ticker:hover .offers-ticker-track--animate {
    animation-play-state: running;
  }
}

/* Load more products */
@keyframes load-more-reveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes load-more-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes load-more-pulse {
  0%, 100% {
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 0 0 0 rgb(99 102 241 / 0.35);
  }

  50% {
    box-shadow: 0 4px 14px rgb(99 102 241 / 0.18), 0 0 0 6px rgb(99 102 241 / 0.08);
  }
}

.load-more-reveal {
  animation: load-more-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Product card discount badge — ticker-speed breathe + red border glow */
@keyframes product-discount-breathe {
  0%,
  100% {
    transform: scale3d(1, 1, 1);
    box-shadow:
      0 0 0 1px rgb(254 202 202 / 0.9),
      0 0 8px 1px rgb(244 63 94 / 0.45),
      0 2px 6px rgb(0 0 0 / 0.2);
  }

  50% {
    transform: scale3d(1.12, 1.12, 1);
    box-shadow:
      0 0 0 2px rgb(254 226 226 / 1),
      0 0 14px 2px rgb(244 63 94 / 0.7),
      0 2px 8px rgb(0 0 0 / 0.25);
  }
}

.product-discount-badge {
  animation: product-discount-breathe 0.7s ease-in-out infinite;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  .product-discount-badge {
    animation: none;
  }
}

.load-more-spinner {
  animation: load-more-spin 0.7s linear infinite;
}

.load-more-btn--loading {
  pointer-events: none;
  animation: load-more-pulse 1.2s ease-in-out infinite;
  border-color: rgb(165 180 252);
  background: linear-gradient(135deg, rgb(238 242 255), rgb(255 255 255));
  color: rgb(67 56 202);
}

@media (prefers-reduced-motion: reduce) {
  .load-more-reveal {
    animation: none;
  }

  .load-more-spinner {
    animation: none;
  }

  .load-more-btn--loading {
    animation: none;
  }
}

/* Legal pages (Terms, Privacy) */
.legal-document {
  color: rgb(51 65 85);
  line-height: 1.7;
  font-size: 0.9375rem;
}

.legal-document h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: rgb(15 23 42);
}

.legal-document h2:first-child {
  margin-top: 0;
}

.legal-document h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgb(30 41 59);
}

.legal-document p {
  margin: 0.75rem 0;
}

.legal-document ul,
.legal-document ol {
  margin: 0.75rem 0 0.75rem 1.25rem;
}

.legal-document li {
  margin: 0.35rem 0;
}

.legal-document a {
  color: rgb(29 78 216);
  font-weight: 600;
  text-decoration: underline;
}

.legal-document strong {
  color: rgb(15 23 42);
  font-weight: 700;
}

/* Mobile nav open: hide sticky elements that overlap the dropdown */
html.mobile-nav-open .offers-ticker {
  display: none !important;
}

/* Storefront promo strip: shimmer + pulsing border glow */
@keyframes storefront-promo-border {
  0%,
  100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }

  50% {
    background-position: 100% 50%;
    filter: brightness(1.25);
  }
}

@keyframes storefront-promo-shimmer {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@keyframes storefront-promo-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(16, 185, 129, 0.35),
      0 0 18px rgba(16, 185, 129, 0.28),
      0 8px 24px rgba(15, 23, 42, 0.06);
  }

  50% {
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, 0.55),
      0 0 28px rgba(16, 185, 129, 0.45),
      0 10px 28px rgba(15, 23, 42, 0.08);
  }
}

@keyframes storefront-promo-live-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.55;
    transform: scale(0.92);
  }
}

@keyframes storefront-promo-code-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.45);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0);
  }
}

.storefront-promo {
  position: relative;
  isolation: isolate;
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(
    120deg,
    #059669,
    #fbbf24,
    #0d9488,
    #34d399,
    #f59e0b,
    #059669
  );
  background-size: 300% 300%;
  animation:
    storefront-promo-border 3.2s ease-in-out infinite,
    storefront-promo-glow 2.4s ease-in-out infinite;
}

.storefront-promo__inner {
  position: relative;
  overflow: hidden;
  border-radius: calc(1rem - 2px);
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(251, 191, 36, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 20%, rgba(16, 185, 129, 0.18), transparent 50%),
    linear-gradient(135deg, #ecfdf5 0%, #fffbeb 48%, #f0fdfa 100%);
}

.storefront-promo__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 45%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.15) 65%,
    transparent 100%
  );
  animation: storefront-promo-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

.storefront-promo__content {
  position: relative;
  z-index: 1;
}

.storefront-promo__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.storefront-promo__live-dot {
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: storefront-promo-live-blink 1.1s ease-in-out infinite;
}

.storefront-promo__code {
  animation: storefront-promo-code-pulse 2s ease-out infinite;
}

.storefront-promo--compact {
  border-radius: 0.9rem;
}

.storefront-promo--compact .storefront-promo__inner {
  border-radius: calc(0.9rem - 2px);
}

@media (prefers-reduced-motion: reduce) {
  .storefront-promo,
  .storefront-promo__inner::before,
  .storefront-promo__live-dot,
  .storefront-promo__code {
    animation: none;
  }

  .storefront-promo {
    background: linear-gradient(120deg, #059669, #0d9488);
    box-shadow:
      0 0 0 1px rgba(16, 185, 129, 0.4),
      0 8px 24px rgba(15, 23, 42, 0.06);
  }

  .storefront-promo__live-dot {
    opacity: 1;
  }
}

/* Storefront flash sale banner — hot urgency blink */
@keyframes storefront-flash-border {
  0%,
  100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }

  50% {
    background-position: 100% 50%;
    filter: brightness(1.2);
  }
}

@keyframes storefront-flash-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(244, 63, 94, 0.45),
      0 0 22px rgba(244, 63, 94, 0.35),
      0 10px 28px rgba(15, 23, 42, 0.1);
  }

  50% {
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, 0.75),
      0 0 36px rgba(244, 63, 94, 0.55),
      0 12px 32px rgba(15, 23, 42, 0.12);
  }
}

@keyframes storefront-flash-shimmer {
  0% {
    transform: translateX(-130%);
  }

  100% {
    transform: translateX(130%);
  }
}

@keyframes storefront-flash-live-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.35),
      0 0 12px rgba(255, 255, 255, 0.25);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.2),
      0 0 22px rgba(251, 191, 36, 0.85);
  }
}

@keyframes storefront-flash-dot-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.7);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.75);
    box-shadow: 0 0 0 6px rgba(254, 240, 138, 0);
  }
}

@keyframes storefront-flash-discount-blink {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.55),
      0 0 14px 2px rgba(251, 191, 36, 0.45),
      0 4px 12px rgba(0, 0, 0, 0.2);
  }

  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
    box-shadow:
      0 0 0 2px rgba(254, 243, 199, 0.95),
      0 0 26px 4px rgba(251, 191, 36, 0.85),
      0 4px 14px rgba(0, 0, 0, 0.25);
  }
}

@keyframes storefront-flash-title-pulse {
  0%,
  100% {
    text-shadow: 0 0 0 transparent;
  }

  50% {
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
  }
}

.storefront-flash-sale {
  position: relative;
  isolation: isolate;
  border-radius: 9999px;
  padding: 2px;
  background: linear-gradient(
    115deg,
    #e11d48,
    #f59e0b,
    #fb7185,
    #fbbf24,
    #be123c,
    #f59e0b,
    #e11d48
  );
  background-size: 320% 320%;
  animation:
    storefront-flash-border 2.6s ease-in-out infinite,
    storefront-flash-glow 1.8s ease-in-out infinite;
}

.storefront-flash-sale__inner {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  background:
    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(251, 191, 36, 0.35), transparent 55%),
    linear-gradient(120deg, #be123c 0%, #e11d48 42%, #c2410c 100%);
  color: #fff;
}

.storefront-flash-sale__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 42%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
  animation: storefront-flash-shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

.storefront-flash-sale__inner::after {
  display: none;
}

.storefront-flash-sale__content {
  position: relative;
  z-index: 1;
  padding: 0.35rem 0.4rem;
}

.storefront-flash-sale__strip {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.storefront-flash-sale__strip::-webkit-scrollbar {
  display: none;
}

.storefront-flash-sale__chip {
  display: flex;
  min-width: min(100%, 22rem);
  flex: 1 0 auto;
  align-items: center;
  gap: 0.45rem;
  scroll-snap-align: start;
  padding: 0.35rem 0.55rem;
}

.storefront-flash-sale__live {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.35);
  padding: 0.2rem 0.5rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  animation: storefront-flash-live-blink 0.9s ease-in-out infinite;
}

.storefront-flash-sale__live-dot {
  display: inline-block;
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 9999px;
  background: #fef08a;
  animation: storefront-flash-dot-blink 0.7s ease-in-out infinite;
}

.storefront-flash-sale__title {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  animation: storefront-flash-title-pulse 1.6s ease-in-out infinite;
}

.storefront-flash-sale__discount {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  border-radius: 9999px;
  background: linear-gradient(135deg, #fef9c3 0%, #fde047 45%, #f59e0b 100%);
  padding: 0.2rem 0.55rem;
  color: #7c2d12;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.65);
  animation: storefront-flash-discount-blink 0.75s ease-in-out infinite;
}

.storefront-flash-sale__countdown {
  flex-shrink: 0;
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.3);
  padding: 0.2rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.storefront-flash-sale__hint {
  margin: 0.15rem 0.55rem 0.1rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 241, 242, 0.85);
}

@media (min-width: 640px) {
  .storefront-flash-sale__content {
    padding: 0.4rem 0.5rem;
  }

  .storefront-flash-sale__chip {
    min-width: min(100%, 28rem);
    gap: 0.55rem;
    padding: 0.4rem 0.7rem;
  }

  .storefront-flash-sale__title {
    font-size: 0.875rem;
  }

  .storefront-flash-sale__discount {
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
  }

  .storefront-flash-sale__countdown {
    max-width: none;
    font-size: 0.6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-flash-sale,
  .storefront-flash-sale__inner::before,
  .storefront-flash-sale__live,
  .storefront-flash-sale__live-dot,
  .storefront-flash-sale__discount,
  .storefront-flash-sale__title {
    animation: none;
  }

  .storefront-flash-sale {
    background: linear-gradient(120deg, #e11d48, #c2410c);
    box-shadow:
      0 0 0 1px rgba(244, 63, 94, 0.5),
      0 10px 28px rgba(15, 23, 42, 0.1);
  }

  .storefront-flash-sale__live,
  .storefront-flash-sale__live-dot,
  .storefront-flash-sale__discount {
    opacity: 1;
    transform: none;
  }
}

/* Page brand loader — E logo with smooth rotating gold border */
.page-loader-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(2px);
}

.page-loader-panel.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-loader-orbit {
  position: relative;
  display: flex;
  height: 5.75rem;
  width: 5.75rem;
  align-items: center;
  justify-content: center;
  transform: scale(0.92);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page-loader-panel.is-visible .page-loader-orbit {
  transform: scale(1);
}

.page-loader-ring,
.page-loader-ring-glow {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
}

/* Soft gold halo behind the spinning stroke */
.page-loader-ring-glow {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, rgba(251, 191, 36, 0) 68%);
  filter: blur(1px);
}

/* Rotating golden border around E */
.page-loader-ring {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 40deg,
    #fef3c7 70deg,
    #fbbf24 110deg,
    #d97706 150deg,
    #f59e0b 190deg,
    #fde68a 230deg,
    transparent 270deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: page-loader-spin 1.05s linear infinite;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.25);
}

.page-loader-logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  height: 4.25rem;
  width: 4.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.35),
    0 10px 28px rgba(15, 23, 42, 0.12);
}

.page-loader-logo {
  height: 2.75rem;
  width: 2.75rem;
  object-fit: contain;
}

@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.turbo-progress-bar {
  height: 2px;
  background: linear-gradient(90deg, #f59e0b, #d97706, #10b981);
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-panel,
  .page-loader-orbit {
    transition: none;
  }

  .page-loader-ring {
    animation: none;
  }

  .page-loader-panel.is-visible {
    display: none !important;
  }
}