/* FILE: public/input.css (Consolidated and Final Version) */

*, ::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.17 | 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;
}

.container {
  width: 100%;
}

@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;
  }

  .container {
    max-width: 1024px;
  }
}

@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;
  }
}

.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;
}

.z-50 {
  z-index: 50;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mb-px {
  margin-bottom: -1px;
}

.-mt-4 {
  margin-top: -1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.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;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-4 {
  height: 1rem;
}

.h-96 {
  height: 24rem;
}

.h-\[50px\] {
  height: 50px;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.max-h-32 {
  max-height: 8rem;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-\[100px\] {
  min-height: 100px;
}

.min-h-\[20px\] {
  min-height: 20px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-10 {
  width: 2.5rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-4 {
  width: 1rem;
}

.w-64 {
  width: 16rem;
}

.w-8 {
  width: 2rem;
}

.w-\[50px\] {
  width: 50px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-\[100px\] {
  min-width: 100px;
}

.min-w-\[120px\] {
  min-width: 120px;
}

.min-w-full {
  min-width: 100%;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.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-not-allowed {
  cursor: not-allowed;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-disc {
  list-style-type: disc;
}

.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-4 {
  grid-template-columns: repeat(4, minmax(0, 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;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-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-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-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-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-t {
  border-top-width: 1px;
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.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-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.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;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.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-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-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-loose {
  line-height: 2;
}

.leading-relaxed {
  line-height: 1.625;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-pink-500 {
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.opacity-50 {
  opacity: 0.5;
}

.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-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;
}

.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);
}

.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.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;
}

.duration-150 {
  transition-duration: 150ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- GLOBAL DESIGN SYSTEM & CORE STYLES --- */

:root {
  --primary-color: #2c3e50;
  --secondary-color: #34495e;
  --accent-color: #c0392b;
  --background-color: #ecf0f1;
  --text-color: #34495e;
  --text-light: #ffffff;
  --border-color: #bdc3c7;
  --success-color: #27ae60;
  --error-color: #c0392b;
  --cta-color-green: #047857;
  --font-family-headings: 'Lora', 'Playfair Display', serif;
  --font-family-body: 'Inter', 'Lato', sans-serif;
  --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --transition-speed: 0.3s;
  /* --- ADDED DESIGN SYSTEM VARIABLES --- */
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 5px 15px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --shadow-hover: 0 8px 25px rgba(0,0,0,0.15);
}

/* Added 2026-08-01: reserve scrollbar space always, so short pages (e.g. a
   category with only 1-2 products) don't lose the vertical scrollbar and
   shift the viewport width. Without this, "position: fixed; right: 0"
   elements like #side-cart visibly jump a few pixels left/right depending
   on which page you opened the cart from. */

html {
  scrollbar-gutter: stable;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-body);
  line-height: 1.6;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: transform 0.3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
  color: var(--primary-color);
  line-height: 1.2;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

main > #page-list {
  display: flex;
  flex-direction: column;
}

/* --- PAGE SECTION ORDER --- */

.hero {
  order: 0;
}

#products-section {
  order: 1;
}

#features-bar {
  order: 3;
}

#occasions-section {
  order: 2;
}

#create-your-own-section {
  order: 4;
}

#testimonials-section {
  order: 5;
}

#newsletter-section {
  order: 6;
}

/* --- HEADER CONFIGURATION --- */

.header-contact-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  background-color: var(--primary-color);
  color: var(--text-light);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-contact-bar a {
  color: var(--text-light);
}

.header-contact-bar > span {
  flex-grow: 1;
  text-align: center;
}

.header-contact-bar .contact-details {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.main-header {
  background: #fff;
  padding: 0 1rem;
  position: sticky;
  top: 2.5rem;
  z-index: 999;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

body.hide-header .main-header {
  transform: translateY(-101%);
}

.header-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.header-title {
  margin: 0;
  font-size: 1.6rem;
  flex-grow: 1;
  cursor: pointer;
  order: 0;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  order: 1;
}

.search-container {
  width: 100%;
  order: 3;
  display: none;
}

.nav-links-desktop {
  display: none;
}

#mobile-filter-container {
  order: 4;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

#search-form {
  display: flex;
  width: 100%;
}

#search-input {
  border: 1px solid #D1D5DB;
  border-right: none;
  padding: 0.6rem 1rem;
  flex-grow: 1;
  font-size: 14px;
  background-color: #F9FAFB;
  border-radius: 8px 0 0 8px;
}

#search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.15);
}

#search-form button {
  border: none;
  background-color: var(--cta-color-green);
  color: var(--text-light);
  padding: 0 1.25rem;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
}

#search-form .fa-search {
  font-size: 16px;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.account-icon-wrapper {
  font-size: 18px;
  cursor: pointer;
  gap: 0.6rem;
}

.account-icon-wrapper .account-text {
  display: none;
}

.cart-icon-wrapper {
  position: relative;
  font-size: 22px;
  cursor: pointer;
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: var(--text-light);
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 2px;
}

.mobile-menu-toggle {
  background: none;
  border: none;
  font-size: 20px;
  color: #4B5563;
  cursor: pointer;
}

/* Fly-in Menu */

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-links {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background: #fff;
  width: 80%;
  max-width: 300px;
  padding: 4rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 2001;
}

.mobile-nav-overlay.active .mobile-nav-links {
  transform: translateX(0);
}

.mobile-nav-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2.5rem;
  cursor: pointer;
}

/* --- BUTTONS --- */

.btn {
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-md);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.btn-primary {
  background-color: var(--cta-color-green);
  color: #fff;
}

.btn-primary:hover {
  background-color: #065f46;
}

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

.btn-secondary:hover {
  background: #f3f4f6;
}

.btn-danger {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.btn-danger:hover {
  background-color: #e74c3c;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}

.btn.btn-outline {
  background-color: transparent;
  border: 1px solid var(--cta-color-green);
  color: var(--cta-color-green);
  transition: background-color 0.2s;
  font-size: 1rem;
  padding: 14px 22px;
}

.btn.btn-outline:hover {
  background-color: #f8f9fa;
}

/* --- HERO & SECTIONS --- */

/* CHANGED (2026-08-11): the background image used to be hardcoded directly
   on .hero via CSS background-image. Now the section has three stacked
   layers so the banner can be a real admin-configurable image OR an
   autoplay looping video (a video can't be set as a CSS background --
   it has to be an actual element): .hero-media (image/video, injected by
   applyHeroBanner() in app.js), .hero-overlay (the same dark tint the old
   CSS gradient provided, now a separate element so it works over video
   too), and .hero-content (the text, raised above both via z-index). */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--text-light);
  padding: 4rem 1rem;
  text-align: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-media img, .hero-media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero h1 {
  color: var(--text-light);
  font-size: 2.5rem;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

#products-section, #occasions-section {
  padding: 2rem 1rem;
}

/* --- SECONDARY HERO (Create Your Own) --- */

#create-your-own-section.secondary-hero {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('assets/images/create_your_own_bg_placeholder.jpg') no-repeat center center/cover;
  color: var(--text-light);
  padding: 4rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.secondary-hero h2 {
  color: var(--text-light);
  font-size: 2.5rem;
}

.secondary-hero p {
  color: var(--text-light);
  max-width: 600px;
}

.secondary-hero .btn {
  margin-top: 1rem;
}

/* --- CONTROL VISIBILITY OF SEARCH/FILTER/SORT --- */

/* 1. By default, hide all the controls. */

.search-container,
.filter-sort-container,
#mobile-filter-container {
  display: none;
}

/* 2. ONLY show the search bar when the product list is active. */

body.product-list-active .search-container {
  display: flex;
}

/* 3. ONLY show the correct filter container when the product list is active. */

/* Mobile & Tablet View */

@media (max-width: 991.98px) {
  body.product-list-active #mobile-filter-container {
    display: flex;
  }
}

/* Desktop View */

@media (min-width: 992px) {
  body.product-list-active .filter-sort-container {
    display: flex;
  }
}

/* --- FILTER & SORT --- */

.filter-sort-container {
  display: none;
}

/* Hidden on mobile, moved by JS */

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group label {
  font-weight: bold;
  font-size: 0.9rem;
}

.filter-group select {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
}

#sort-select {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

/* --- PRODUCT CARD GRID LAYOUT --- */

#product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  #product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
}

/* --- PRODUCT CARD CORE STYLES (Vertical/Grid View) --- */

.product-card {
  background: #FFFFFF;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #0F1111;
  overflow: hidden;
  padding: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.product-image-container {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  max-height: 250px;
}

/* ADDED (2026-08-11): the container above is a fixed square box, but the
   <img class="product-image"> inside it previously had no sizing rule of
   its own beyond the site-wide `img { max-width: 100%; height: auto; }`
   reset -- so a non-square product photo wasn't cropped/centered to fill
   the box, just clipped at the bottom-right by overflow:hidden. This
   makes every product photo fill and crop to the square uniformly,
   regardless of its original aspect ratio, so cards line up visually
   without requiring admins to pre-crop images to a square before upload.
   REVERTED (2026-08-11) from a brief attempt at `object-fit: contain`:
   contain kept every card the same physical box size (verified via
   getBoundingClientRect -- all exactly equal), but on a white card
   background the letterboxed empty space is invisible, so photos with
   different source aspect ratios *looked* randomly sized relative to
   each other even though the boxes weren't. `cover` reads as visually
   uniform at a glance, at the cost of cropping content near the edges
   on photos that aren't already close to square (e.g. items sitting low
   in a hamper crate) -- accepted trade-off, per direct user feedback
   after seeing both live. Scoped to `.product-image-container` so it
   also reaches the list-view search cards, which share the same
   container/img pairing (and, as a side effect, fixes the list-view
   desktop override below, which was targeting the stale
   `.product-image-foreground` class instead of the `.product-image`
   class actually used in the markup). */

.product-image-container .product-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-image-background {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  filter: blur(10px) brightness(0.95);
  opacity: 0.8;
}

.product-image-foreground {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.product-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-title-link {
  text-decoration: none;
}

.product-title-link:hover .product-title {
  color: #C7511F;
}

.product-title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #146eb4;
  margin: 8px 0 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39.2px;
}

.product-description {
  display: none;
}

.star-rating {
  font-size: 16px;
  margin-bottom: 6px;
  color: #f08804;
}

.star-rating .fa-regular.fa-star {
  color: #D1D5DB;
}

.review-count {
  font-size: 13px;
  color: #007185;
  margin-left: 6px;
  text-decoration: none;
}

.price-container {
  line-height: 1;
  margin-bottom: 6px;
}

.product-price::before {
  content: '£';
  font-size: 12px;
  position: relative;
  top: -0.4em;
}

.product-price {
  font-size: 24px;
  font-weight: 700;
  color: #0F1111;
}

.delivery-info {
  font-size: 13px;
  color: #565959;
  margin-top: auto;
  padding-top: 4px;
}

.card-actions {
  margin-top: 8px;
}

.add-to-basket-btn {
  width: 100%;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
  background: #FFD814;
  border-color: #FCD200;
  box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
  color: #0F1111;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
}

.add-to-basket-btn:hover {
  background: #F7CA00;
  border-color: #F2C200;
}

.add-to-basket-btn:disabled {
  background: #e7e7e7;
  border-color: #d5d9d9;
  cursor: not-allowed;
}

/* Add this entire block to public/input.css */

/* --- Skeleton Loader Styles --- */

.skeleton-card {
  background: #fff;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  padding: 12px;
}

.skeleton-image {
  background-color: #e5e7eb;
  height: 250px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 12px;
}

.skeleton-text {
  background-color: #e5e7eb;
  height: 16px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-price {
  background-color: #e5e7eb;
  height: 28px;
  width: 40%;
  border-radius: 4px;
  margin-top: 12px;
}

/* Shimmer Animation */

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer-animation 1.5s infinite;
}

@keyframes shimmer-animation {
  0% {
    transform: translateX(0);
  }

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

/* Add these styles to public/input.css */

.product-card .star-rating {
  font-size: 14px;
  margin: 2px 0;
  color: #f08804;
  line-height: 1;
}

.product-card .star-rating-placeholder {
  height: 16px;
  /* Match the height of the star rating to prevent layout shift */
  margin: 2px 0;
}

.product-card .review-count {
  font-size: 12px;
  color: #007185;
  margin-left: 4px;
  vertical-align: middle;
}

.price-container.sale {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.price-container.sale .sale-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-color);
  /* Use your existing red accent color */
}

.price-container.sale .sale-price::before {
  content: '£';
  font-size: 12px;
  position: relative;
  top: -0.4em;
}

.price-container.sale .original-price {
  text-decoration: line-through;
  color: #565959;
  margin-left: 8px;
  font-size: 15px;
}

/* --- QUICK VIEW BUTTON HOVER EFFECT --- */

.quick-view-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 10px);
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-color);
  color: var(--primary-color);
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-family-body);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  width: 80%;
  max-width: 150px;
  padding: 8px 5px;
  text-align: center;
  white-space: nowrap;
  font-size: 0.85rem;
}

.product-card:hover .quick-view-btn {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* --- WISHLIST BUTTON --- */

.wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.wishlist-btn:hover {
  transform: scale(1.1);
}

.wishlist-btn i {
  font-size: 1.1rem;
  color: #34495e;
}

.wishlist-btn.favorited i {
  color: #e74c3c;
}

/* --- SEARCH MODE ("LIST VIEW") OVERRIDES --- */

#products-section.search-active #product-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

#products-section.search-active .product-card {
  flex-direction: row;
  align-items: center;
}

#products-section.search-active .list-view-image-wrapper {
  flex: 0 0 50%;
  padding-right: 16px;
}

#products-section.search-active .list-view-info-wrapper {
  flex: 1;
  padding: 0;
}

#products-section.search-active .product-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  color: #565959;
  margin: 4px 0 8px 0;
}

/* --- DESKTOP SEARCH RESULTS ("LIST VIEW") OVERRIDE --- */

@media (min-width: 768px) {
  #products-section.search-active #product-grid {
    max-width: 900px;
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 0;
  }

  #products-section.search-active .product-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
  }

  #products-section.search-active .product-image-container {
    flex: 0 0 240px;
    width: 240px;
    margin-right: 20px;
  }

  #products-section.search-active .product-image-foreground {
    -o-object-fit: cover;
       object-fit: cover;
  }

  #products-section.search-active .product-info {
    padding: 0;
  }

  #products-section.search-active .product-description {
    -webkit-line-clamp: 3;
    min-height: 58.5px;
  }
}

/* --- OCCASION CAROUSEL --- */

.carousel-wrapper {
  position: relative;
  padding: 0 1rem;
}

.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  gap: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-container .occasion-card {
  flex: 0 0 70%;
  scroll-snap-align: start;
}

.carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  color: var(--primary-color);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease;
}

.carousel-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow.prev {
  left: -10px;
}

.carousel-arrow.next {
  right: -10px;
}

@media (min-width: 640px) {
  .carousel-container .occasion-card {
    flex-basis: 40%;
  }
}

@media (min-width: 1024px) {
  .carousel-arrow {
    display: block;
  }

  .carousel-container .occasion-card {
    flex-basis: 25%;
  }
}

.occasion-card {
  border: none;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  scroll-snap-align: start;
  cursor: pointer;
  background: #fff;
  overflow: hidden;
}

.occasion-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.occasion-image {
  width: 100%;
  height: 128px;
  -o-object-fit: cover;
     object-fit: cover;
}

.occasion-name {
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.75rem;
  text-align: center;
}

/* --- FEATURES BAR --- */

#features-bar {
  background-color: #F3F4F6;
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200px;
}

.feature-item i {
  font-size: 36px;
  margin-bottom: 0.5rem;
  color: #059669;
}

.feature-item i.fa-star {
  color: #F59E0B;
}

.feature-item h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1F2937;
  margin: 0 0 0.25rem 0;
}

.feature-item p {
  font-size: 0.8125rem;
  color: #4B5563;
  margin: 0;
}

/* --- TESTIMONIALS --- */

#testimonials-section {
  background-color: #FAFAFA;
  padding: 48px 16px;
}

#testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.testimonial-card {
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.testimonial-stars {
  color: #FBBF24;
  font-size: 18px;
  margin-bottom: 8px;
}

.testimonial-stars .fa-regular {
  color: #E0E0E0;
}

.testimonial-quote-icon {
  font-size: 18px;
  color: #E0E0E0;
  margin-bottom: 2px;
}

.testimonial-quote {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  color: #4B5563;
  font-size: 0.875rem;
  line-height: 1.3;
  margin: 0;
  padding-left: 8px;
  flex-grow: 1;
}

.testimonial-author {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: right;
  color: #374151;
  margin-top: 12px;
}

@media (min-width: 769px) {
  #testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1001px) {
  #testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- NEWSLETTER --- */

#newsletter-section {
  background-color: #047857;
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
}

#newsletter-section h2, #newsletter-section p {
  color: #fff;
}

#newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 512px;
  margin: 0 auto;
}

#newsletter-email {
  flex-grow: 1;
  border: none;
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 15px;
}

/* --- FOOTER --- */

.main-footer {
  background-color: #1F2937;
  color: #D1D5DB;
  padding: 3rem 1rem;
  margin-top: 3rem;
}

#footer-container {
  display: grid;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
}

.footer-left-column, .footer-right-column {
  display: flex;
  flex-direction: column;
}

.footer-column h4 {
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column p, .footer-column li {
  font-size: 13px;
  margin-bottom: 0.5rem;
}

.social-links {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
}

.payment-icons i {
  font-size: 30px;
}

.footer-column a {
  color: #D1D5DB;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: #ffffff;
}

.social-links a {
  font-size: 20px;
}

.payment-icons i {
  margin-right: 0.75rem;
}

@media (min-width: 1024px) {
  #footer-container {
    grid-template-columns: repeat(5, 1fr);
  }

  .footer-left-column, .footer-right-column {
    display: contents;
  }
}

#footer-bottom {
  background-color: #1F2937;
  color: #D1D5DB;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 13px;
  border-top: 1px solid #374151;
}

/* --- SIDE CART & OVERLAYS --- */

.cart-overlay, .added-to-cart-overlay, .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed), visibility var(--transition-speed);
}

.cart-overlay.active, .added-to-cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

#side-cart {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background: #fff;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  width: 90%;
  max-width: 400px;
}

#side-cart.active {
  transform: translateX(0);
}

.cart-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
}

#cart-items {
  padding: 1rem;
  flex-grow: 1;
  overflow-y: auto;
}

.cart-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 1rem;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

.cart-item-info {
  flex-grow: 1;
}

.cart-item-remove-btn {
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem;
}

.cart-footer {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

#go-to-checkout-btn, .checkout-btn {
  width: 100%;
  padding: 1rem;
  background-color: var(--cta-color-green);
  color: var(--text-light);
  border: none;
  border-radius: var(--border-radius);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--transition-speed);
  font-weight: bold;
}

#go-to-checkout-btn:hover, .checkout-btn:hover {
  background-color: #065f46;
}

/* --- CUSTOM HAMPER IN CART STYLES --- */

.cart-item.custom-hamper {
  display: flex;
  flex-direction: column;
  background-color: #F0F5F2;
  border-radius: var(--border-radius);
  padding: 1rem;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.custom-hamper-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.custom-hamper-header .cart-item-remove-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--secondary-color);
  font-size: 1.2rem;
  cursor: pointer;
}

.custom-hamper-details {
  background-color: #fff;
  border-radius: var(--border-radius);
  padding: 1rem;
}

.includes-title {
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.component-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.component-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 0.75rem;
  gap: 1rem;
}

.component-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.component-quantity-selector {
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
}

.custom-hamper-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.custom-hamper-footer .quantity-selector {
  margin-left: auto;
  margin-right: 1rem;
}

.edit-hamper-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  margin-right: 1rem;
}

.custom-hamper-footer .cart-item-price {
  font-size: 1.2rem;
  font-weight: bold;
}

/* --- ADDED TO CART SHEET --- */

.added-to-cart-overlay {
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
}

.added-to-cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

#added-to-cart-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 1003;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  padding: 1rem;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.1);
}

#added-to-cart-sheet.active {
  transform: translateY(0);
}

.added-to-cart-header {
  text-align: center;
  margin-bottom: 1rem;
}

.mini-cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.added-to-cart-footer {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.added-to-cart-footer .btn {
  flex: 1;
}

@media (max-width: 767.98px) {
  .added-to-cart-footer {
    flex-wrap: wrap;
  }

  .added-to-cart-footer .btn {
    flex-basis: 150px;
    flex-grow: 1;
  }
}

/* --- CONFIRMATION RIBBON --- */

.confirmation-ribbon {
  position: fixed;
  bottom: -100px;
  left: 0;
  width: 100%;
  background-color: var(--cta-color-green);
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  transition: bottom 0.5s ease-in-out;
  z-index: 2000;
}

.confirmation-ribbon.active {
  bottom: 0;
}

#ribbon-message {
  font-weight: bold;
}

#ribbon-view-basket-btn {
  background-color: #fff;
  color: var(--cta-color-green);
  border: none;
}

/* --- MODAL --- */

.modal-overlay {
  background-color: rgba(0,0,0,0.6);
}

#confirmation-modal-overlay {
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  width: 90%;
  max-width: 400px;
  display: none;
}

.modal-content p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

/* --- QUICK VIEW MODAL --- */

.quick-view-modal {
  width: 90%;
  max-width: 900px;
  padding: 0;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2.5rem;
  color: var(--secondary-color);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.quick-view-content {
  width: 100%;
  height: 100%;
}

.quick-view-grid {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
}

@media (min-width: 768px) {
  .quick-view-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.quick-view-grid .product-image-container {
  height: 100%;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

.quick-view-grid .product-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* REVERTED 2026-08-11 back to cover, matching the main grid card -- see comment above .product-image-container .product-image */

.quick-view-details {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.quick-view-title {
  font-family: var(--font-family-headings);
  margin-top: 0;
}

.quick-view-price {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--cta-color-green);
  margin: 0.5rem 0 1rem 0;
}

.quick-view-description {
  font-family: var(--font-family-body);
  flex-grow: 1;
  line-height: 1.6;
  color: var(--secondary-color);
}

.quick-view-details .detail-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

.quick-view-details .detail-actions .add-to-basket-btn {
  flex-grow: 1;
}

.view-full-details-link {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  font-weight: 500;
  text-decoration: underline;
}

/* --- PAGE CONTAINER STYLES --- */

#page-detail, #page-login, #page-register, #page-account, #page-my-orders, 
#page-my-addresses, #page-order-detail, #page-address-form, 
#page-account-settings, #page-my-returns, #page-return-request, 
#page-return-detail, #page-checkout, #page-create, #page-static, #page-wishlist {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
}

.auth-container, .account-container, .form-container, .data-card, .detail-card {
  background: #fff;
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 500px;
  margin: 2rem auto;
}

/* Targetting autofilled inputs */

.auth-container input:-webkit-autofill,
.auth-container input:-webkit-autofill:hover, 
.auth-container input:-webkit-autofill:focus {
  /* Sets the background to white and makes the font black */
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: var(--text-color) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
  gap: 1rem;
}

.page-actions {
  width: 100%;
  text-align: right;
  margin-bottom: 1.5rem;
}

/* --- MY ACCOUNT PAGES --- */

.account-menu {
  margin: 2rem 0;
  display: grid;
  gap: 1rem;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: #f8f9fa;
  color: var(--text-color);
  text-decoration: none;
  border-radius: var(--border-radius-md);
  border: none;
  font-weight: bold;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-menu-item:hover {
  background-color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.02);
}

.account-menu-item i {
  width: 20px;
  text-align: center;
  color: var(--primary-color);
  font-size: 1.2rem;
}

.data-card {
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  max-width: none;
  /* Override for list pages */
}

.data-card-body {
  padding: 1.5rem;
  line-height: 1.7;
}

.data-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.5rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.data-card-body p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.data-card-body p:last-child {
  margin-bottom: 0;
}

.data-card-actions {
  padding: 1rem 1.5rem;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.badge {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background-color: var(--primary-color);
  color: var(--text-light);
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- ORDER & RETURN STATUS COLORS (Corrected) --- */

.order-status, .return-status {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.8rem;
}

.status-yellow {
  background-color: #fde047;
  color: #713f12;
  font-weight: normal;
  text-transform: none;
}

.status-grey, .status-default, .return-status.cancelled, .return-status.expired {
  background-color: #e5e7eb;
  color: #4b5563;
  font-weight: 600;
  text-transform: uppercase;
}

.status-green {
  background-color: #dcfce7;
  color: #166534;
  font-weight: 600;
  text-transform: uppercase;
}

.order-status.pending, .return-status.pending {
  background: #f39c12;
}

.order-status.shipped, .return-status.shipped {
  background: #2980b9;
}

.order-status.delivered, .return-status.approved {
  background: var(--success-color);
}

.return-status.rejected {
  background: var(--error-color);
}

.return-status.expired {
  background: #7f8c8d;
}

/* --- ORDER DETAIL PAGE --- */

.order-detail-items {
  margin-top: 1.5rem;
}

.order-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ecf0f1;
}

.order-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  margin-top: 0.5rem;
  border-top: 2px solid var(--primary-color);
  font-weight: bold;
  font-size: 1.2rem;
}

#order-actions-container {
  text-align: right;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.cancellation-prompt {
  font-size: 0.9em;
  color: var(--secondary-color);
  margin-bottom: 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.order-summary-item .cancellation-control {
  margin-right: 1rem;
}

/* --- RETURN DETAIL CARD --- */

.return-card {
  display: flex;
  flex-direction: column;
  max-width: none;
}

.return-details-group {
  display: flex;
  flex-direction: column;
}

.return-detail-label {
  font-weight: bold;
  margin-bottom: 0.25rem;
  color: var(--primary-color);
}

.return-detail-value {
  margin: 0;
  font-size: 0.95rem;
  color: var(--secondary-color);
}

.return-items-list-container {
  display: flex;
  flex-direction: column;
}

.returned-items-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.returned-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
}

.returned-item-image {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

/* --- RETURN REQUEST FORM --- */

.return-item-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.return-item-control:last-of-type {
  border-bottom: none;
}

.quantity-selector-inline {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  height: 35px;
}

.quantity-input-return {
  width: 35px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0 0.25rem;
}

.quantity-input-return::-webkit-outer-spin-button, .quantity-input-return::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input-return {
  -moz-appearance: textfield;
}

#return-reason {
  width: 100%;
  height: 130px;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-family-body);
  font-size: 1rem;
  resize: none;
}

@media (max-width: 767.98px) {
  #direct-return-form {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0;
  }
}

/* --- AUTHENTICATION PAGES --- */

.auth-container {
  max-width: 420px;
}

.auth-title {
  font-family: 'Lora', serif;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.auth-subtitle {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--secondary-color);
  font-family: 'Inter', sans-serif;
}

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-family: 'Inter', sans-serif;
}

.auth-switch a {
  color: var(--cta-color-green);
  font-weight: bold;
  text-decoration: none;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.social-login-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  background-color: #fff;
  color: var(--text-color);
}

.btn-social i {
  font-size: 1.1rem;
}

.btn-social.btn-google {
  color: #4271f4da;
  margin-top: 0rem;
}

.btn-social.btn-facebook {
  color: #1877F2;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--border-color);
  margin: 1.5rem 0;
}

.separator::before, .separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}

.separator:not(:empty)::before {
  margin-right: .5em;
}

.separator:not(:empty)::after {
  margin-left: .5em;
}

/* Form Styling */

.auth-container .form-group label {
  display: none;
  /* Hide labels as we use placeholders */
}

/* Fields had no vertical spacing at all -- the shared .form-group rule
   (used across checkout/returns/etc too) only sets position:relative, so
   login/register fields rendered jammed together. Scoped to .auth-container
   so it doesn't affect other pages that reuse .form-group with their own spacing. */

.auth-container .form-group {
  margin-bottom: 1.25rem;
}

.auth-container .form-group:last-of-type {
  margin-bottom: 0;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper input {
  /* --- THE FIX IS HERE: Set right padding to 45px for all inputs in wrapper --- */
  padding: 0 45px 0 16px;
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--border-radius-md, 8px);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper input:focus {
  outline: none;
  border-color: var(--cta-color-green, var(--primary-color));
  box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.12);
}

@media (max-width: 480px) {
  .auth-container {
    padding: 1.5rem;
    margin: 1rem auto;
  }

  .auth-title {
    font-size: 1.5rem;
  }
}

/* We no longer need the specific override rule, so this block can be removed */

/* #login-password, #register-password {
    padding-right: 45px;
} */

.suffix-icon-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 45px;
  background: none;
  border: none;
  cursor: pointer;
  color: #afa19c;
}

.form-group-extra {
  text-align: right;
  margin: 0 0 1.5rem 0;
}

.forgot-password {
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.forgot-password:hover {
  text-decoration: underline;
}

#login-btn, #register-btn {
  background-color: var(--cta-color-green);
  padding-top: 14px;
  padding-bottom: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
}

#login-btn:hover, #register-btn:hover {
  background-color: #065f46;
}

.btn .spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin: 0 auto;
}

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

/* --- PASSWORD STRENGTH INDICATOR --- */

.password-strength-container {
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  width: 0;
  transition: width 0.3s ease-in-out, background-color 0.3s;
}

.strength-bar.weak {
  width: 33%;
  background-color: #e74c3c;
}

.strength-bar.medium {
  width: 66%;
  background-color: #f39c12;
}

.strength-bar.strong {
  width: 100%;
  background-color: #27ae60;
}

.password-strength-text {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* --- CHECKOUT PAGES --- */

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .checkout-grid {
    grid-template-columns: 1.5fr 1fr;
  }
}

.checkout-form, .order-summary {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.checkout-form h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.checkout-form p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
}

.checkout-form .form-group input, .checkout-form .form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: var(--font-family-body);
}

.checkout-form .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.checkout-form .form-group-row {
  display: flex;
  gap: 1rem;
}

.checkout-form .form-group-row .form-group {
  flex: 1;
}

.checkout-form .back-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--primary-color);
  font-weight: 500;
}

.order-confirmation {
  text-align: center;
  padding: 3rem 1rem;
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.order-confirmation h2 {
  font-family: 'Lora', serif;
  color: var(--cta-color-green);
}

/* --- CHECKOUT PROGRESS BAR --- */

.checkout-progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.checkout-progress-bar .step {
  flex: 1;
  text-align: center;
  padding-bottom: 0.75rem;
  color: var(--secondary-color);
  border-bottom: 3px solid transparent;
  font-weight: 500;
}

.checkout-progress-bar .step.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: bold;
}

/* --- ORDER SUMMARY & TOTALS --- */

#checkout-items {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.summary-container {
  width: 100%;
  margin-bottom: 1rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.summary-row.total {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--primary-color);
}

.order-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ecf0f1;
}

.order-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  margin-top: 0.5rem;
  border-top: 2px solid var(--primary-color);
  font-weight: bold;
  font-size: 1.2rem;
}

/* --- DISCOUNT CODE --- */

.discount-form-container {
  margin: 1rem 0;
}

#cart-discount-form, #checkout-discount-form {
  display: flex;
  gap: 0.5rem;
}

#cart-discount-form input, #checkout-discount-form input {
  flex-grow: 1;
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  border-radius: var(--border-radius);
}

.discount-message {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  height: 1.2em;
}

.discount-message.success {
  color: var(--cta-color-green);
}

.discount-message.error {
  color: var(--error-color);
}

.summary-row.discount-row {
  color: var(--cta-color-green);
  font-weight: bold;
}

/* --- DETAIL PAGE LOW STOCK INDICATOR --- */

.low-stock-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #b45309;
}

.low-stock-indicator i.fa-fire {
  color: #d97706;
}

/* --- DETAIL PAGE TABS --- */

.product-tabs-container {
  margin: 2rem 0;
  border: none;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  background-color: #fff;
  overflow: hidden;
}

.tab-nav {
  display: flex;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.tab-link {
  flex: 1;
  padding: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary-color);
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.tab-link:hover {
  color: var(--primary-color);
}

.tab-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--cta-color-green);
}

.tab-content-container {
  position: relative;
  min-height: 250px;
}

.tab-content {
  display: none;
  padding: 1.5rem;
  line-height: 1.7;
}

.tab-content.active {
  display: block;
}

.tab-content ul {
  list-style: none;
  padding-left: 1rem;
}

.tab-content ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.tab-content ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: 1.25rem;
  line-height: 1;
}

/* --- RELATED PRODUCTS CAROUSEL --- */

.related-products-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 100%;
}

.related-products-arrow {
  display: none;
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--primary-color);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: background-color 0.2s, transform 0.2s;
}

.related-products-arrow:hover {
  background-color: #fff;
  transform: translateY(-50%) scale(1.05);
}

.related-products-arrow.prev {
  left: -1rem;
}

.related-products-arrow.next {
  right: -1rem;
}

@media (min-width: 601px) {
  .related-products-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.related-products-list-container {
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.related-products-list-container::-webkit-scrollbar {
  display: none;
}

/* --- STATIC PAGES --- */

.static-content-container {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.static-content {
  white-space: pre-line;
  line-height: 1.8;
}

.static-content-body section:not(:last-child) {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #ecf0f1;
}

/* --- CONTACT US PAGE --- */

.page-subtitle {
  font-size: 1.1rem;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem auto;
  color: var(--secondary-color);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-detail-item i {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-top: 5px;
  width: 25px;
  text-align: center;
}

.contact-detail-item h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}

.contact-detail-item p, .contact-detail-item p a {
  margin: 0;
  font-size: 1rem;
  color: var(--secondary-color);
}

.opening-hours {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #ecf0f1;
}

.opening-hours h3 {
  margin-top: 0;
}

.opening-hours p {
  margin: 0.25rem 0;
  color: var(--secondary-color);
}

.contact-map-panel img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--border-radius);
  min-height: 300px;
}

/* ADDED (2026-08-11): styling for the live embedded map iframe that replaced the static <img>. */

.contact-map-panel {
  min-height: 300px;
}

.contact-map-panel iframe.contact-map-embed {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: var(--border-radius);
}

/* ADDED (2026-08-11): styling for the checkout Terms & Conditions agreement checkbox. */

.checkout-terms-agreement {
  padding-top: 0.5rem;
}

.checkout-terms-agreement .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.checkout-terms-agreement .checkbox-label input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.checkout-terms-agreement .checkbox-label a {
  color: var(--primary-color);
  text-decoration: underline;
}

.checkout-terms-agreement .error-message {
  margin-left: 1.5rem;
}

/* ADDED (2026-08-11): FAQ page styling -- was bare unstyled <details>/<summary>. */

.faq-intro {
  color: var(--secondary-color);
  margin: -0.5rem 0 1.5rem 0;
  font-size: 0.95rem;
}

.faq-intro a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.faq-item {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
  border-color: var(--primary-color);
  box-shadow: 0 4px 14px rgba(44, 62, 80, 0.09);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  font-family: var(--font-family-headings);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  background-color: #f9fafb;
}

.faq-chevron {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--secondary-color);
  transition: transform 0.25s ease, color 0.25s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--cta-color-green);
}

.faq-answer {
  margin: 0;
  padding: 0 1.4rem 1.15rem 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid #f0f0f0;
  color: var(--secondary-color);
  line-height: 1.7;
}

/* ADDED (2026-08-11): Delivery Info page styling -- was riding on dead Tailwind classes. */

.delivery-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.delivery-section {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.delivery-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.delivery-section-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eef2f5;
  border-radius: 50%;
  color: var(--primary-color);
  font-size: 1.15rem;
}

.delivery-section-body h3 {
  font-family: var(--font-family-headings);
  font-size: 1.15rem;
  color: var(--primary-color);
  margin: 0 0 0.4rem 0;
}

.delivery-section-body p {
  color: var(--secondary-color);
  line-height: 1.7;
  white-space: pre-line;
  margin: 0;
}

/* --- CREATE YOUR OWN HAMPER STYLES --- */

#page-create {
  padding-bottom: 100px;
}

.create-hamper-header {
  text-align: center;
  padding: 2rem 1rem;
}

.create-hamper-header h2 {
  font-family: 'Lora', serif;
}

.create-hamper-header p {
  max-width: 600px;
  margin: 0.5rem auto 0;
  color: var(--secondary-color);
}

.item-selection-grid {
  display: grid;
  gap: 1rem;
  padding: 0 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .item-selection-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .item-selection-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.selectable-item-card {
  background-color: #fff;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.selectable-item-card:hover {
  border-color: rgba(4, 120, 87, 0.5);
  box-shadow: 0 4px 15px rgba(4, 120, 87, 0.1);
}

.selectable-item-card.selected {
  border-color: var(--cta-color-green);
  border-width: 2.5px;
}

.item-image-container {
  position: relative;
  width: 100%;
  padding-top: 66.66%;
}

.item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.selection-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background-color: rgba(4, 120, 87, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.selectable-item-card.selected .selection-indicator {
  transform: scale(1);
}

.item-info {
  padding: 0.75rem;
}

.item-name {
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  font-size: 0.9rem;
  margin: 0;
}

.item-price {
  font-family: 'Lora', serif;
  font-weight: bold;
  color: var(--cta-color-green);
  font-size: 1.1rem;
  margin-top: 4px;
}

/* Sticky Summary Bar */

.custom-hamper-summary-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.1);
  border-top: 1px solid #e5e7eb;
}

.summary-total .summary-label {
  font-family: 'Inter', sans-serif;
  color: var(--secondary-color);
  font-size: 1rem;
}

.summary-total .summary-price {
  font-family: 'Lora', serif;
  font-weight: bold;
  color: var(--cta-color-green);
  font-size: 1.5rem;
  display: block;
}

.custom-hamper-summary-bar .btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
}

.custom-hamper-summary-bar .btn:disabled {
  background-color: #D1D5DB;
  color: #4B5563;
  cursor: not-allowed;
}

/* --- QUANTITY SELECTOR --- */

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-radius: var(--border-radius-md);
  height: 40px;
  box-shadow: var(--shadow-sm);
}

.quantity-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0 1rem;
  color: var(--secondary-color);
  line-height: 40px;
}

.quantity-value {
  font-weight: bold;
  font-size: 1rem;
  padding: 0 0.5rem;
  min-width: 30px;
  text-align: center;
}

.quantity-input {
  width: 50px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  font-size: 1rem;
  font-weight: bold;
  padding: 0.75rem 0;
}

.quantity-input::-webkit-outer-spin-button, .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input {
  -moz-appearance: textfield;
}

/* --- WISHLIST PAGE --- */

.empty-wishlist-container {
  text-align: center;
  padding: 4rem 1rem;
  color: #7f8c8d;
}

.empty-wishlist-container i {
  font-size: 5rem;
  margin-bottom: 1.5rem;
}

.empty-wishlist-container h3 {
  font-family: var(--font-family-headings);
  color: var(--primary-color);
  font-size: 1.5rem;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (min-width: 768px) {
  .main-header {
    top: 2.5rem;
  }

  .header-content-wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    height: 80px;
    align-items: center;
    gap: 1rem 2rem;
  }

  .header-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 2rem;
  }

  .search-container {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    order: 0;
  }

  .header-controls {
    grid-column: 3;
    grid-row: 1;
    order: 0;
  }

  #mobile-filter-container {
    display: none;
  }

  .mobile-menu-toggle {
    display: none;
  }

  .nav-links-desktop {
    display: flex;
    justify-content: center;
    gap: 1rem;
    border-top: 1px solid #e5e7eb;
    padding: 0.5rem 0;
  }

  .nav-links-desktop a {
    font-weight: 500;
    font-size: 15px;
    padding: 0.25rem 0.5rem;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-speed), border-color var(--transition-speed);
  }

  .nav-links-desktop a:hover, .nav-links-desktop a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
  }

  .account-icon-wrapper .account-text {
    display: inline;
    font-weight: 500;
    font-size: 15px;
  }

  .filter-sort-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
  }
}

/* --- FINAL UI REFINEMENTS --- */

.btn-secondary {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: #f3f4f6;
}

.account-menu-item {
  border: none;
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-md);
}

.account-menu-item:hover {
  background-color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.02);
}

.page-header, .cart-header, .cart-footer, .nav-links-desktop {
  border-color: #e5e7eb;
}

.cart-item {
  border-bottom-color: #f3f4f6;
}

.btn {
  border: none;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary {
  border-bottom: none;
}

.low-stock-message, .out-of-stock-message, .stock-placeholder {
  font-size: 0.75rem;
  margin: 0.1rem 0 0.4rem 0;
  height: 14px;
  line-height: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-align: left;
}

.low-stock-message {
  color: #D97706;
}

.out-of-stock-message {
  color: var(--secondary-color);
  opacity: 0.8;
}

/* Add this entire block to public/input.css */

/* --- Mega Menu Styles (Desktop) --- */

.nav-item-with-mega-menu {
  position: relative;
  padding: 0.25rem 0.5rem;
}

/* The mega menu panel itself, hidden by default */

.mega-menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 1rem;
  /* Space between nav and panel */
  z-index: 1000;
}

/* Show the panel when hovering over the parent item */

.nav-item-with-mega-menu:hover .mega-menu-panel {
  display: block;
}

/* The content container with shadow and styling */

.mega-menu-content {
  background: #fff;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  /* Creates a 2-column layout */
  gap: 0.75rem 1.5rem;
  white-space: nowrap;
}

.mega-menu-link {
  padding: 0.5rem;
  border-radius: var(--border-radius-sm);
  transition: background-color 0.2s, color 0.2s;
  font-weight: 500;
}

.mega-menu-link:hover {
  background-color: #f3f4f6;
  color: var(--primary-color);
}

/* --- Accordion Menu Styles (Mobile) --- */

.mobile-nav-accordion {
  border-bottom: 1px solid #e5e7eb;
}

.mobile-nav-accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  font-family: var(--font-family-body);
}

.mobile-nav-accordion-header i {
  transition: transform 0.3s ease;
}

.mobile-nav-accordion.open .mobile-nav-accordion-header i {
  transform: rotate(180deg);
}

.mobile-nav-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  padding-left: 1rem;
}

.mobile-nav-accordion.open .mobile-nav-accordion-content {
  max-height: 500px;
  /* Adjust if you have many sub-items */
}

.mobile-nav-accordion-content .sub-item {
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: normal;
  display: block;
}

/* Style for the Sale menu item */

.sale-item {
  color: var(--accent-color) !important;
  font-weight: bold !important;
}

/* Add this entire block to public/input.css */

/* --- Fly to Cart Animation --- */

.fly-to-cart-clone {
  position: fixed;
  /* Use fixed positioning to fly across the viewport */
  z-index: 2000;
  /* Ensure it's on top of everything else */
  border-radius: 50%;
  /* The image will become a circle as it shrinks */
  -o-object-fit: cover;
     object-fit: cover;
  /* Define the smooth animation */
  transition: 
        top 0.8s ease-in, 
        left 0.8s ease-in, 
        width 0.8s ease-in, 
        height 0.8s ease-in,
        opacity 0.8s ease-in-out;
}

/* Saved for Later Styles */

.saved-for-later-container {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #f3f4f6;
}

.saved-for-later-container h3 {
  font-family: var(--font-family-headings);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.cart-item.saved-item .cart-item-image {
  opacity: 0.7;
}

.cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.cart-item-action-link {
  background: none;
  border: none;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8rem;
}

.hamper-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.hamper-actions .edit-hamper-btn {
  white-space: nowrap;
  /* Prevents the "Edit Hamper" text from wrapping */
}

/* Add this to public/input.css */

.postcode-lookup-container .flex {
  gap: 0.5rem;
}

#find-address-btn {
  flex-shrink: 0;
  /* Prevents the button from shrinking */
}

/* Add this to public/input.css */

.autocomplete-container {
  position: relative;
}

.address-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

.address-suggestion {
  padding: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.address-suggestion:hover {
  background-color: #f3f4f6;
}

/* Add this to public/input.css */

/* --- Visual Payment Selectors --- */

.payment-method-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.payment-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.payment-method-btn:hover {
  border-color: var(--primary-color);
}

.payment-method-btn.active {
  border-color: var(--cta-color-green);
  box-shadow: 0 0 0 2px var(--cta-color-green);
}

.payment-method-btn img {
  height: 24px;
  max-width: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}

#card-details-form {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

/* Add this to public/input.css */

/* --- Real-Time Form Validation Styles --- */

.form-group {
  position: relative;
}

.validation-icon {
  position: absolute;
  top: 38px;
  /* Adjust if your label/input spacing is different */
  right: 12px;
  font-size: 1.2rem;
  display: none;
  /* Hidden by default */
}

.validation-icon.success {
  color: var(--success-color);
  display: block;
}

.validation-icon.error {
  color: var(--error-color);
  display: block;
}

.error-message {
  font-size: 0.8rem;
  color: var(--error-color);
  margin-top: 4px;
  display: none;
  /* Hidden by default */
}

.form-group.has-error .error-message {
  display: block;
}

.form-group.has-error input {
  border-color: var(--error-color);
  box-shadow: 0 0 0 1px var(--error-color);
}

.form-group.has-success input {
  border-color: var(--success-color);
}

/* Adjust padding on inputs to make space for the icon */

#checkout-details-form input {
  padding-right: 2.5rem;
}

#cart-discount-info,
#checkout-discount-info {
  margin-left: 0.5rem;
  font-size: 0.8em;
  color: #6b7280;
  /* gray-500 */
}

.discount-code-display {
  font-weight: 600;
  font-family: monospace;
}

.remove-discount-btn {
  background: none;
  border: none;
  color: var(--error-color);
  font-weight: bold;
  cursor: pointer;
  margin-left: 0.25rem;
  padding: 0 0.25rem;
  font-size: 0.9em;
}

.remove-discount-btn:hover {
  opacity: 0.7;
}

.my-orders-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 2rem;
  background-color: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.search-orders {
  display: flex;
}

#order-search-input {
  flex-grow: 1;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

#order-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

#order-search-btn {
  padding: 0 1rem;
  border: 1px solid var(--border-color);
  border-left: none;
  background-color: #f3f4f6;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  cursor: pointer;
}

#order-search-btn:hover {
  background-color: #e5e7eb;
}

.filter-orders {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filter-orders select {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: #fff;
}

/* Responsive adjustments for controls */

@media (min-width: 768px) {
  .my-orders-controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .search-orders {
    width: 40%;
    /* Adjust width as needed */
  }

  .filter-orders {
    flex-direction: row;
    width: auto;
  }
}

/* Add this to public/input.css */

.order-status-tracker {
  display: flex;
  align-items: flex-start;
  /* Align items to the top for label wrapping */
  justify-content: space-between;
  margin-top: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
  overflow-x: auto;
  /* Allow horizontal scroll on small screens */
  scrollbar-width: none;
  /* Hide scrollbar Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbar IE/Edge */
}

.order-status-tracker::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar Chrome/Safari/Opera */
}

.tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  /* Ensure steps have some minimum width */
  position: relative;
  z-index: 1;
  /* Keep steps above connectors */
}

.step-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #d1d5db;
  /* gray-300 */
  border: 3px solid #fff;
  margin-bottom: 0.5rem;
  transition: background-color 0.3s ease;
  z-index: 2;
  /* Keep icon above connector */
  position: relative;
  /* Needed for z-index */
}

.step-label {
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 500;
  color: #6b7280;
  /* gray-500 */
  transition: color 0.3s ease;
  line-height: 1.2;
}

.tracker-connector {
  position: absolute;
  top: 9px;
  /* Vertically center with the icon center */
  left: 50%;
  right: -50%;
  height: 4px;
  background-color: #d1d5db;
  /* gray-300 */
  z-index: 0;
  /* Behind the step icons */
  transition: background-color 0.3s ease;
}

/* Don't draw a connector after the last step */

.tracker-step:last-child .tracker-connector {
  display: none;
}

.tracker-step:not(:last-child) {
  margin-right: -10px;
  /* Adjust overlap slightly if needed */
}

/* Styling for Completed Steps */

.tracker-step.completed .step-icon {
  background-color: var(--cta-color-green);
  /* Use your theme green */
}

.tracker-step.completed .step-label {
  color: var(--cta-color-green);
  font-weight: 600;
}

/* Style the connector leading *out* of a completed step */

.tracker-step.completed + .tracker-connector {
  background-color: var(--cta-color-green);
}

/* Styling for Active Step */

.tracker-step.active .step-icon {
  background-color: #fbbf24;
  /* amber-400 */
  transform: scale(1.2);
}

.tracker-step.active .step-label {
  color: #1f2937;
  /* gray-800 */
  font-weight: 600;
}

/* Status explanation for terminal states */

.status-explanation {
  text-align: center;
  font-style: italic;
  color: #4b5563;
  /* gray-600 */
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* --- Review Form --- */

.review-item-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.review-item-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 1rem;
}

.review-item-header .cart-item-image {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.review-item-header .cart-item-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
}

/* --- Star Rating Input --- */

.star-rating-input {
  display: flex;
  /* Stars are in reverse order in HTML, so reverse them back for display */
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
}

.star-rating-input input[type="radio"] {
  display: none;
  /* Hide the actual radio buttons */
}

.star-rating-input label {
  font-size: 1.75rem;
  color: #d1d5db;
  /* Light grey for empty stars */
  cursor: pointer;
  transition: color 0.2s ease;
}

/* --- JS will add fa-solid, this just styles the hover effect --- */

.star-rating-input:hover label {
  color: #f59e0b;
  /* Yellow on hover */
}

/* Make stars to the "left" (earlier in DOM) also light up on hover */

.star-rating-input label:hover ~ label {
  color: #f59e0b;
}

/* Style for the clicked (solid) stars */

.star-rating-input label.fa-solid {
  color: #f59e0b;
}

/* --- Review Form Width & Textbox Styling --- */

/* 1. Make the review form's container wider */

#page-review-form .form-container {
  max-width: 900px;
}

/* 2. Style the textarea to fill the space */

.review-item-card .form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  /* var(--border-color) */
  border-radius: 8px;
  /* var(--border-radius) */
  font-family: inherit;
  /* var(--font-family-body) */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  /* Allows user to drag-resize it vertically */
}

/* ADD THIS TO style.css */

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 300px;
  /* Give it some space */
}

.spinner {
  border: 5px solid #f3f3f3;
  /* Light grey */
  border-top: 5px solid var(--primary-color);
  /* Your site's primary color */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Added 2026-07-22: small inline spinner for the PayPal button container
   while the SDK script loads / the buttons are being rendered, plus a
   disabled state for the "Go Back" link during that window so it can't be
   tapped mid-load. */

.paypal-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
}

.paypal-loading-state .spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

.back-link.disabled-link {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Add this rule to style.css */

#newsletter-modal-overlay {
  /* Keep initial state hidden using the general rule */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* Add transition */
  /* Ensure it's fixed and covers the screen */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9990;
  /* High z-index */
  display: flex;
  /* Keep flex for centering */
  align-items: center;
  justify-content: center;
}

/* Override when JavaScript adds display: flex (or similar) */

#newsletter-modal-overlay[style*="display: flex"] {
  opacity: 1;
  visibility: visible;
}

#newsletter-modal-overlay[style*="display: flex"] #newsletter-modal {
  display: block;
  /* Or 'flex' if needed */
}

#confirmation-modal-overlay {
  /* Force it to be on top of everything */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  z-index: 2147483647 !important;
  /* Maximum 32-bit Integer */
  display: none;
  /* Controlled by JS */
  justify-content: center;
  align-items: center;
}

#confirmation-modal {
  background: white !important;
  z-index: 2147483648 !important;
  position: relative !important;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- SHOP LAYOUT (Desktop Default) --- */

.shop-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  position: relative;
}

.shop-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: #fff;
  padding-right: 1rem;
  border-right: 1px solid #eee;
  transition: transform 0.3s ease-in-out;
}

/* Sidebar Header (Hidden on Desktop) */

.sidebar-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

/* --- MOBILE DRAWER (Tablets & Phones) --- */

@media (max-width: 900px) {
  .shop-layout {
    display: block;
    /* Stack vertically */
  }

  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 85%;
    /* Cover most of the screen */
    max-width: 320px;
    background: #ffffff;
    z-index: 2000;
    /* On top of everything */
    padding: 1.5rem;
    box-shadow: 2px 0 15px rgba(0,0,0,0.2);
    transform: translateX(-100%);
    /* Hide off-screen by default */
    overflow-y: auto;
    /* Scrollable inside */
  }

  .shop-sidebar.active {
    transform: translateX(0);
    /* Slide in */
  }

  .sidebar-header {
    display: flex;
    /* Show title and close button on mobile */
  }

  /* Dimmed Background Overlay */

  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
  }

  .sidebar-overlay.active {
    display: block;
  }
}

/* Filter Checkbox Styling */

.facet-label {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #4a5568;
}

.facet-label input[type="checkbox"] {
  margin-right: 0.75rem;
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color, #2c3e50);
}

/* 1. Hide the sidebar off-screen by default */

#shop-sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  /* Hide it to the left */
  width: 280px;
  height: 100%;
  background-color: #ffffff;
  z-index: 1000;
  /* Ensure it sits on top of everything */
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  transition: left 0.3s ease-in-out;
  /* Smooth sliding animation */
  padding: 20px;
  overflow-y: auto;
}

/* 2. When JavaScript adds the 'active' class, slide it in */

#shop-sidebar.active {
  left: 0;
}

/* 3. The dark overlay background */

#shop-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  /* Just behind the sidebar */
  display: none;
  /* Hidden by default */
}

/* 4. Show overlay when active */

#shop-sidebar-overlay.active {
  display: block;
}

/* 5. Style the Filter Trigger Button (Ensure this button exists in your HTML) */

#mobile-filter-btn {
  display: inline-block;
  /* Make sure it's visible */
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* --- Cinematic Grid Animations --- */

/* The "Pop Up" Keyframe */

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Apply to Product Cards */

.product-card {
  /* Set the starting state to invisible so they don't flash before popping */
  opacity: 0;
  /* Run the animation */
  animation: popIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  /* Optimise rendering */
  will-change: transform, opacity;
}

/* Ensure list-view cards also pop */

.product-card.list-view {
  animation: popIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Price Heatmap Container */

.price-heatmap-container {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
}

.heatmap-label {
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

/* The Bars */

.heatmap-bars {
  display: flex;
  align-items: flex-end;
  height: 60px;
  gap: 2px;
  margin-bottom: 5px;
}

.heatmap-bar {
  flex: 1;
  background: #e5e7eb;
  border-radius: 2px 2px 0 0;
  transition: background 0.2s ease, height 0.5s ease;
  position: relative;
  cursor: pointer;
}

.heatmap-bar.active {
  background: #d4af37;
  /* Gold for selected range */
}

/* The Slider Input */

.price-slider-input {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.price-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #111;
  margin-top: -6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.price-slider-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
}

/* 1. Cinematic White Silk Background */

.product-image-container.no-image::after {
  content: 'LH';
  font-family: 'Lora', serif;
  /* Use your serif font */
  font-size: 4.5rem;
  font-weight: 700;
  color: #d4af37;
  /* Gold */
  opacity: 0.25;
  /* Soft and subtle */
  letter-spacing: 10px;
  position: absolute;
  /* Center exactly */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(212, 175, 55, 0.1);
  /* Faint gold border frame */
  padding: 15px 30px;
}

/* Hide the standard grey placeholder image */

.product-image-container.no-image img {
  opacity: 0;
  pointer-events: none;
}

/* --- 2. WHITE GOLD "LH" PLACEHOLDER --- */

.product-image-container.no-image {
  /* Subtle white-to-grey silk gradient */
  background: radial-gradient(circle at center, #ffffff 0%, #f4f4f4 100%) !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* FIX: Completely hide the broken image icon and text */

.product-image-container.no-image img.product-image {
  visibility: hidden;
  position: absolute;
}

/* 2. Glowing Dynamic Badges */

.badge-limited-edition {
  background: #111;
  color: #d4af37;
  border: 1px solid #d4af37;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 50px;
  /* More rounded "pill" look */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  animation: gold-pulse 2s infinite ease-in-out;
}

@keyframes gold-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
}

/* --- 1. LUXURY BUTTONS (Sleek & Rounded) --- */

/* Make buttons Pill Shaped and Slimmer */

.add-to-basket-btn {
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  min-height: 38px;
  background: #111;
  color: #fff;
  border: none;
  margin-top: 8px;
}

.add-to-basket-btn:active {
  transform: scale(0.96);
}

.hold-progress-bar {
  position: absolute;
  top: 0;
  /* Changed from bottom to fill the whole height */
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(212, 175, 55, 0.4);
  /* Slightly stronger gold fill */
  transition: width 0.1s linear;
  pointer-events: none;
  z-index: -1;
  /* FIX: Sits behind the button text */
}

.btn-label {
  position: relative;
  z-index: 2;
  /* Keeps text readable during the fill */
}

/* 3. Add the Gold LH Watermark */

.product-image-container.luxury-card::after {
  content: 'LH';
  font-family: 'Lora', serif;
  /* Or your preferred serif font */
  font-size: 4rem;
  font-weight: 700;
  color: #d4af37;
  /* Gold */
  opacity: 0.3;
  /* Elegant transparency */
  letter-spacing: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(212, 175, 55, 0.15);
  /* Faint gold border */
  padding: 15px 30px;
  pointer-events: none;
  /* IMPORTANT: Lets clicks pass through to the link */
}

/* 2. Style the container to be White Silk */

.product-image-container.luxury-card {
  background: radial-gradient(circle at center, #ffffff 0%, #f9f9f9 100%) !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 1. Hide the grey placeholder image inside luxury cards */

.product-image-container.luxury-card img.product-image {
  opacity: 0;
}

/* --- PREMIUM PRODUCT TAGS --- */

.product-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  /* Slight rounded corners */
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  /* Lift it off the image */
  background: #222;
  /* Default fallback (Dark Grey) */
  color: #fff;
  pointer-events: none;
  /* Let clicks pass through to the product */
}

/* 1. SALE (Deep Luxury Red) */

.product-tag.tag-sale {
  background-color: #d32f2f;
  color: #fff;
}

/* 2. BESTSELLER / POPULAR (Gold) */

.product-tag.tag-hot {
  background-color: #d4af37;
  color: #000;
  /* Black text on gold is readable and premium */
}

/* 3. NEW ARRIVAL (Forest Green or Black) */

.product-tag.tag-new {
  background-color: #1b5e20;
  color: #fff;
}

/* --- GHOST HEADER (Glassmorphism) --- restored verbatim from git history
   (commit e56f1cc). This CSS existed in the original public/style.css but was
   never present in this input.css source file -- it only lived in the
   compiled output, so a later `npx tailwindcss` rebuild (done in this session
   to fix an unrelated missing utility class) silently wiped it out. Restoring
   it here too so it survives future rebuilds. */

.main-header.header-hidden {
  transform: translateY(-100%);
}

.ghost-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Was z-index: 49 (from git history), which put it *below* the
       delivery-bar (.header-contact-bar, z-index: 1000, position: sticky).
       That combination meant the ghost header's own title/Refine row was
       being rendered but sat directly underneath the opaque sticky delivery
       bar, invisible. Bumped above it so the floating bar fully replaces
       everything down to the true viewport top when it's shown. */
  z-index: 1001;
  background: rgba(255, 255, 255, 0.85);
  /* Milky white transparency */
  backdrop-filter: blur(16px) saturate(180%);
  /* The "Frosted Glass" effect */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
  transform: translateY(-120%);
  /* Hidden Upwards */
  transition: transform 0.3s cubic-bezier(0.2, 0.0, 0.2, 1);
}

.ghost-header.ghost-visible {
  transform: translateY(0);
}

.ghost-container {
  padding: 12px 16px 8px 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.ghost-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ghost-title {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #1a1a1a;
  opacity: 0;
  /* Fade in slightly later */
  transform: translateY(5px);
  transition: all 0.3s ease 0.1s;
}

.ghost-header.ghost-visible .ghost-title {
  opacity: 1;
  transform: translateY(0);
}

.ghost-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ghost-icon-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #444;
  cursor: pointer;
}

.ghost-pill-btn {
  background: #111;
  /* Luxury Black */
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: transform 0.1s;
}

.ghost-pill-btn:active {
  transform: scale(0.95);
  /* Tactile press effect */
}

/* --- GLOBAL DISCOVERY TOOL VISIBILITY (Corrected) --- */

/* 1. Default State: HIDDEN everywhere */

#ghost-header,
#vibe-track, 
.vibe-scroller, 
#mobile-filter-btn, 
#mobile-filter-container, 
.filter-sort-container, 
#price-heatmap-wrapper {
  display: none !important;
}

/* 2. Active State: SHOW only on Product List Page */

/* Ghost Header (Block level) */

body.product-list-active #ghost-header {
  display: block !important;
}

/* Flex Containers (THIS FIXES THE VERTICAL CHIPS) */

body.product-list-active #vibe-track,          /* Chips need flex to be horizontal */
body.product-list-active #mobile-filter-container,
body.product-list-active .filter-sort-container {
  display: flex !important;
}

/* Standard Block Elements */

body.product-list-active .vibe-scroller,
body.product-list-active #price-heatmap-wrapper {
  display: block !important;
}

/* Sidebar Safety */

body:not(.product-list-active) #shop-sidebar {
  transform: translateX(-100%) !important;
  visibility: hidden !important;
}

body:not(.product-list-active) #shop-sidebar-overlay {
  display: none !important;
  opacity: 0 !important;
}

/* --- SCARCITY TICKER (Social Proof) --- */

.scarcity-ticker {
  margin-top: 20px;
  padding: 12px 16px;
  background-color: #f9fafb;
  /* Very light grey */
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}

.ticker-icon i {
  color: #d4af37;
  /* Luxury Gold */
  font-size: 1rem;
}

.ticker-content {
  font-size: 0.75rem;
  /* Small, non-intrusive */
  color: #6b7280;
  /* Neutral Grey */
  line-height: 1.3;
  font-weight: 500;
  min-height: 2.6em;
  /* Reserve height for 2 lines to prevent jumping */
  display: flex;
  align-items: center;
}

#ticker-text {
  transition: opacity 0.5s ease-in-out;
  /* Smooth fade effect */
  opacity: 1;
}

.ticker-fade-out {
  opacity: 0 !important;
}

/* --- SURPRISE & DELIGHT: UNBOXING ROW --- */

.unboxing-row-card {
  /* Critical: Force it to span ALL columns */
  grid-column: 1 / -1 !important;
  width: 100%;
  /* Dimensions & Look */
  height: 400px;
  margin: 30px 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  background-color: #111;
  /* Fallback color */
  display: block;
  /* Ensure it renders */
}

.unboxing-video-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.unboxing-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.6;
  /* Dim video slightly so text pops */
  display: block;
}

.unboxing-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 80%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  pointer-events: none;
  /* Let clicks pass through */
}

/* Typography */

.unboxing-tag {
  color: #d4af37;
  /* Gold */
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}

.unboxing-overlay h3 {
  color: white;
  font-size: 2rem;
  margin: 0 0 10px 0;
  font-family: 'Lora', serif;
}

.unboxing-overlay p {
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  max-width: 500px;
  margin: 0;
}

/* --- Mobile Adjustment (The Tweak) --- */

@media (max-width: 768px) {
  .unboxing-row-card {
    /* 1. Reduce height so video doesn't zoom/crop too much */
    height: 250px !important;
    margin: 15px 0 !important;
  }

  .unboxing-overlay {
    padding: 20px !important;
    /* Less padding for smaller screens */
  }

  .unboxing-overlay h3 {
    font-size: 1.3rem !important;
    /* slightly smaller title */
    margin-bottom: 5px !important;
  }

  .unboxing-overlay p {
    font-size: 0.85rem !important;
    /* readable body text */
    line-height: 1.3;
  }

  /* Optional: Ensure tag doesn't dominate */

  .unboxing-tag {
    font-size: 0.65rem !important;
    margin-bottom: 4px !important;
  }
}

/* --- VIBE SCROLLER (MOBILE OPTIMIZED) --- */

.vibe-scroller {
  width: 100%;
  overflow-x: auto;
  /* Allows horizontal scrolling */
  white-space: nowrap;
  /* Prevents chips from wrapping to a second line */
  -webkit-overflow-scrolling: touch;
  /* Smooth momentum scrolling on iOS */
  padding: 10px 15px;
  /* Comfortable padding */
  display: flex;
  gap: 10px;
  /* Space between chips */
  /* Hide the ugly scrollbar but keep functionality */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */

.vibe-scroller::-webkit-scrollbar {
  display: none;
}

/* --- CHIP STYLING --- */

.vibe-chip {
  flex: 0 0 auto;
  /* Prevents chips from shrinking */
  padding: 8px 16px;
  /* Touch-friendly size */
  font-size: 14px;
  /* Readable text size */
  height: 38px;
  /* Standard touch target height */
  border-radius: 20px;
  /* Pill shape */
  border: 1px solid #e5e7eb;
  background-color: #fff;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Space between icon and text */
}

.vibe-chip i {
  font-size: 12px;
  /* Icons slightly smaller */
  color: #9ca3af;
}

/* Active State (Selected) */

.vibe-chip.active {
  background-color: #111;
  color: #fff;
  border-color: #d4af37;
  /* Gold border */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.vibe-chip.active i {
  color: #d4af37;
  /* Gold Icon when selected */
}

/* --- OPTIONAL: FADE EFFECT --- */

/* This adds a tiny fade on the right side to show there is more content */

.vibe-track-container {
  position: relative;
}

.vibe-track-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, transparent, #fff);
  /* Fades to white */
  pointer-events: none;
  /* Allows clicking through the fade */
}

/* --- CLEVER PRODUCT PAGE LAYOUT --- */

/* --- LUXURY VARIANT SELECTORS --- */

.variant-group {
  margin-bottom: 1.2rem;
}

.variant-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The "Chip" Button Style */

.variant-chip {
  padding: 10px 20px;
  border: 1px solid #e5e7eb;
  /* Light grey border */
  background: #fff;
  color: #374151;
  cursor: pointer;
  border-radius: 0;
  /* Square edges = Luxury/Modern */
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 60px;
  text-align: center;
}

/* Hover State */

.variant-chip:hover {
  border-color: #111;
  color: #111;
}

/* Selected State - Black Background, White Text */

.variant-chip.selected {
  background-color: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure they look clickable */

.variant-chip:active {
  transform: scale(0.98);
}

/* 2. Cross-Sell Section (Complete the Experience) */

.cross-sell-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  /* Smaller cards */
  gap: 15px;
  margin-top: 1.5rem;
}

.mini-product-card {
  border: 1px solid #f0f0f0;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
  transition: transform 0.2s;
}

.mini-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.mini-product-img {
  width: 100%;
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 8px;
}

.mini-add-btn {
  width: 100%;
  margin-top: 8px;
  padding: 5px;
  font-size: 0.8rem;
  background: #fff;
  border: 1px solid #ddd;
  color: #333;
}

.mini-add-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* 3. Bottom Review Wall */

.review-wall-section {
  background: #f9fafb;
  padding: 4rem 2rem;
  margin-top: 4rem;
}

.review-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.review-card-modern {
  background: white;
  padding: 1.75rem 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  border-radius: 8px;
  text-align: left;
}

.select-wrapper {
  position: relative;
  max-width: 300px;
  /* Limits width so it doesn't stretch too far */
}

/* The actual dropdown */

.variant-select {
  width: 100%;
  padding: 12px 15px;
  font-size: 0.95rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  /* Square edges for luxury feel */
  appearance: none;
  /* Removes default browser arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font-family: var(--font-family-body);
}

.variant-select:focus {
  outline: none;
  border-color: #111;
  /* Highlight black on focus */
}

/* Custom Arrow Icon */

.select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  /* Allows click to pass through to select */
  font-size: 0.8rem;
  color: #666;
}

/* --- LUXURY QUANTITY STEPPER --- */

.quantity-wrapper {
  display: flex;
  flex-direction: column;
}

/* The Container for - 1 + */

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  /* One border around the whole group */
  background: #fff;
  height: 50px;
  width: 110px;
  /* Slightly wider to accommodate buttons */
}

/* The Input Field (Middle) */

.quantity-input {
  width: 40px;
  /* Fixed width */
  height: 100%;
  border: none;
  /* No border, the container provides it */
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: #111;
  background: transparent;
  -moz-appearance: textfield;
  /* Remove Firefox spinners */
  pointer-events: none;
  /* Optional: forces users to use buttons, prevents mobile keyboard popping up */
}

/* Remove Chrome/Safari/Edge spinners */

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The Buttons (+ and -) */

.qty-btn {
  width: 35px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.qty-btn:hover {
  background-color: #f5f5f5;
  color: #000;
}

.qty-btn:active {
  background-color: #e5e5e5;
}

/* --- PRODUCT DETAIL GALLERY (Harrods-style: full-bleed, 2-col, numeric counter) ---
   This replaces three superseded redesign attempts that had accumulated here
   (only the last one was actually rendering; the other two were dead weight
   left over from earlier edits, and a stray `.detail-info { position: sticky }`
   from the first attempt was still leaking into the final stacked layout,
   which is why the info panel used to float oddly over the gallery). */

/* 1. Page grid: stacked on mobile, 2-column (gallery + sticky info) on desktop */

.detail-grid {
  position: relative;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  /* needed for the zoom panel to float outside */
}

@media (min-width: 900px) {
  .detail-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    /* gallery ~62%, info ~38% */
    gap: 3rem;
    align-items: start;
  }
}

.detail-info {
  padding: 2rem 1rem;
}

@media (min-width: 900px) {
  .detail-info {
    position: sticky;
    top: 100px;
    padding: 0 1rem 0 0;
  }
}

.gallery-wrapper {
  position: relative;
}

/* 2. The scrolling track: full-bleed, no gap between slides */

.detail-image-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  scroll-behavior: smooth;
}

.detail-image-container::-webkit-scrollbar {
  display: none;
}

/* 3. Slides: flush against each other, no rounded corners/shadows/alt backgrounds */

.gallery-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 420px;
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .gallery-slide {
    flex: 0 0 92%;
    /* main image + a peek of the next one */
    width: 92%;
    height: 640px;
  }

  .gallery-slide:last-child {
    scroll-snap-align: end;
  }
}

.detail-carousel-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  cursor: crosshair;
}

/* 4. Minimal floating arrows */

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  font-size: 1rem;
  color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s ease, transform 0.2s ease;
}

.gallery-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

@media (min-width: 900px) {
  .gallery-arrow {
    display: flex;
  }
}

.gallery-prev {
  left: 16px;
}

.gallery-next {
  right: 16px;
}

/* 6. Add to Basket button: previously shared one flex row with the quantity
   stepper and wishlist heart, which broke (text wrapped inside a fixed-height
   button) any time that row's container was narrower than ~500px -- not just
   on phones, but also in the ~900-1200px range where the 2-col desktop grid
   gives the info column less room than a full viewport width would suggest.
   Fixed structurally instead of with a breakpoint: quantity + wishlist share
   a compact row, Add to Basket always gets its own full-width row below,
   so it never has to compete for space at any screen size. */

.detail-actions-row {
  flex-wrap: wrap;
}

/* 5. Numeric "X / Y" counter, replaces dot indicators */

.gallery-counter {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #111;
  z-index: 20;
  pointer-events: none;
}

/* Hide zoom on touch devices */

@media (hover: none) {
  .img-zoom-result, .img-zoom-lens {
    display: none !important;
  }
}

/* --- ZOOM LENS (The box that appears ON the image) --- */

.img-zoom-lens {
  position: absolute;
  border: 1px solid #888;
  width: 100px;
  /* REQUIRED for math to work */
  height: 100px;
  /* REQUIRED for math to work */
  background-color: rgba(255, 255, 255, 0.4);
  cursor: crosshair;
  display: none;
  /* Hidden until hover */
  z-index: 20;
}

/* Ensure the Result Window is also correct */

.img-zoom-result {
  border: 1px solid #d4d4d4;
  width: 400px;
  /* Adjust as needed */
  height: 400px;
  background-repeat: no-repeat;
  display: none;
  z-index: 100;
  position: absolute;
  left: 105%;
  /* Pushes it to the right */
  top: 0;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Hide on mobile */

@media (max-width: 1024px) {
  .img-zoom-lens, .img-zoom-result {
    display: none !important;
  }
}

.img-zoom-container {
  position: relative;
  width: 100%;
  /* Ensures container takes full available width */
  margin: 0;
  /* Removes extra spacing */
  padding: 0;
  /* Removes extra spacing */
}

/* Fixes the "empty background" issue by forcing image to fill container */

#myimage {
  width: 100%;
  height: auto;
  /* Maintains aspect ratio */
  display: block;
  /* Removes bottom gap typical with inline images */
  -o-object-fit: cover;
     object-fit: cover;
  /* Optional: ensures image covers area if height is fixed */
}

/* --- CORRECTED ZOOM CSS --- */

/* 1. We force position and z-index, but NOT visibility */

.img-zoom-result, #my-global-zoom {
  position: fixed !important;
  top: 150px !important;
  right: 50px !important;
  width: 500px !important;
  height: 500px !important;
  z-index: 2147483647 !important;
  /* Maximum Z-Index */
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  /* CRITICAL: Allows mouse to pass through so zooming doesn't flicker */
  pointer-events: none;
  /* FIX: #my-global-zoom is created fresh via JS with no inline display set,
       so without a default here it fell back to the browser's default `block`
       and the empty zoom panel was visible on page load before any hover. */
  display: none;
}

/* 2. Hide on mobile */

@media (max-width: 1024px) {
  .img-zoom-result, #my-global-zoom {
    display: none !important;
  }
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-900:hover {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-green-900:hover {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-900:hover {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-900:hover {
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-900:hover {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / 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;
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:ml-3 {
    margin-left: 0.75rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:block {
    display: block;
  }

  .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\:justify-start {
    justify-content: flex-start;
  }

  .md\:text-left {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}