/** Shopify CDN: Minification failed

Line 4108:0 Unexpected "("

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock] {
  overflow: hidden;
}

/* Only lock .page-wrapper where it is the scroll container. Below 990px the document scrolls, and
   overflow on .page-wrapper would make it the sticky header's scroll container, moving the header off screen. */
@media (min-width: 990px) {
  html[scroll-lock] .page-wrapper {
    overflow: hidden;
  }
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-inline-end var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }

  /* The theme drawer opens from the inline-end edge, so the shift mirrors in RTL */
  [dir='rtl'] .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: var(--theme-drawer-width, var(--sidebar-width));
  }
}

.page-wrapper--drawer-open {
  margin-inline-end: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
  cursor: pointer;
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background-color: var(--color-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-inline: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flip-x {
  scale: -1 1;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

  text-align: start;
}

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

  text-align: center;
}

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

  text-align: end;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

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

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

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

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

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

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Caret icon transition */
.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;

  /* Keep the fixed close button clear of the status bar and inline-end notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* Safe-area env() values are physical; in RTL the button sits by the left-side notch */
[dir='rtl'] .close-button {
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-left, 0px));
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);

  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: start;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  inset-inline-start: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

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

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > slideshow-arrows .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

/* Clipped controls preserve accessible paging without intercepting touch taps. */
@media (hover: none) and (pointer: coarse) {
  .resource-list__carousel > [animate-arrows] > :where(slideshow-arrows) > .slideshow-control:not(:focus-visible) {
    position: absolute;
    clip: rect(0 0 0 0);
    animation: none;
  }

  .resource-list__carousel > [animate-arrows] > :where(slideshow-arrows) > .slideshow-control:focus-visible {
    opacity: 1;
    animation: none;
  }
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    .spacing-style {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}
/* =========================================================
   FASHION KING - ROYAL PRODUCT LISTING
   HORIZON THEME
   ========================================================= */

/* COLLECTION PRODUCT GRID */
.main-collection-grid {
  background:
    linear-gradient(
      180deg,
      #fffaf8 0%,
      #fff 45%,
      #fff8fa 100%
    ) !important;
}

.product-grid {
  gap: 18px !important;
}


/* =========================================================
   PRODUCT CARD OUTER
   ========================================================= */

.product-grid__item {
  position: relative !important;

  overflow: hidden !important;

  border:
    1px solid #ead5dc !important;

  border-radius: 16px !important;

  background: #ffffff !important;

  box-shadow:
    0 6px 20px rgba(65, 8, 32, 0.07) !important;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}


/* GOLD TOP LINE */

.product-grid__item::before {
  content: "";

  position: absolute;

  left: 12%;
  right: 12%;
  top: 0;

  height: 2px;

  z-index: 10;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d8b45d,
      #f0d58d,
      #d8b45d,
      transparent
    );

  opacity: 0.7;
}


/* HOVER */

.product-grid__item:hover {
  transform: translateY(-6px) !important;

  border-color: #d5b36a !important;

  box-shadow:
    0 18px 38px rgba(65, 8, 32, 0.15),
    0 0 0 1px rgba(213, 179, 106, 0.12) !important;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {
  position: relative !important;

  height: 100% !important;

  background: #fff !important;

  border-radius: 15px !important;

  overflow: hidden !important;
}


.product-card__content {
  position: relative !important;

  height: 100% !important;

  padding: 0 0 15px !important;

  gap: 0 !important;

  background: #ffffff !important;

  border: 0 !important;

  border-radius: 15px !important;

  overflow: hidden !important;
}


/* =========================================================
   PRODUCT IMAGE AREA
   ========================================================= */

.product-card .card-gallery,
.product-card .product-media,
.product-card .product-media-container {
  position: relative !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      135deg,
      #fff8f7,
      #f8edf0
    ) !important;
}


/* IMAGE */

.product-card img {
  transition:
    transform 0.5s ease,
    filter 0.4s ease !important;
}


.product-grid__item:hover .product-card img {
  transform: scale(1.035) !important;
}


/* IMAGE GOLD FRAME */

.product-card .card-gallery::after {
  content: "";

  position: absolute;

  inset: 8px;

  border:
    1px solid rgba(213, 179, 106, 0.28);

  border-radius: 8px;

  pointer-events: none;

  z-index: 5;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.product-card__content > * {
  position: relative;
}


/* PRODUCT TITLE */

.product-card h3,
.product-card h4,
.product-card .h3,
.product-card .h4 {
  margin:
    13px 14px 5px !important;

  color: #35101e !important;

  font-size: 14px !important;

  line-height: 1.45 !important;

  font-weight: 650 !important;

  letter-spacing: -0.1px !important;
}


.product-card h3 a,
.product-card h4 a,
.product-card .h3 a,
.product-card .h4 a {
  color: #35101e !important;

  text-decoration: none !important;
}


/* =========================================================
   PRICE
   ========================================================= */

.product-card .price,
.product-card .price__regular,
.product-card .price__sale,
.product-card .product-price {
  margin:
    4px 14px 0 !important;

  color: #4b0b26 !important;

  font-size: 15px !important;

  font-weight: 800 !important;
}


.product-card .price-item {
  color: #4b0b26 !important;

  font-weight: 800 !important;
}


/* SALE PRICE */

.product-card .price-item--sale {
  color: #9b4565 !important;
}


/* =========================================================
   QUICK ADD / ADD BUTTON
   ========================================================= */

.product-card button,
.product-card .button,
.product-card [type="submit"] {
  border-radius: 50px !important;

  border:
    1px solid #d2ad5b !important;

  background:
    linear-gradient(
      135deg,
      #4b0b26,
      #70183e
    ) !important;

  color: #f8d98a !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  letter-spacing: 0.6px !important;

  transition:
    all 0.25s ease !important;
}


.product-card button:hover,
.product-card .button:hover,
.product-card [type="submit"]:hover {
  background:
    linear-gradient(
      135deg,
      #d7b35f,
      #b48636
    ) !important;

  color: #330716 !important;

  box-shadow:
    0 8px 20px rgba(65, 8, 32, 0.18) !important;
}


/* =========================================================
   RATING STARS
   ========================================================= */

.product-card .rating,
.product-card .rating-stars,
.product-card [class*="rating"] {
  color: #c99d45 !important;
}


/* =========================================================
   BADGE
   ========================================================= */

.product-card .badge,
.product-card .product-badge,
.product-card [class*="badge"] {
  border-radius: 50px !important;

  border:
    1px solid rgba(213, 179, 106, 0.65) !important;

  background:
    linear-gradient(
      135deg,
      #4b0b26,
      #70183e
    ) !important;

  color: #f5d88e !important;

  font-size: 9px !important;

  font-weight: 800 !important;

  letter-spacing: 0.7px !important;
}


/* =========================================================
   CARD BOTTOM GOLD DETAIL
   ========================================================= */

.product-card__content::after {
  content: "";

  position: absolute;

  left: 20%;
  right: 20%;
  bottom: 5px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d6b35f,
      transparent
    );

  opacity: 0.45;
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

.product-card__link {
  z-index: 20 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .product-grid {
    gap: 9px !important;
  }


  .product-grid__item {
    border-radius: 12px !important;

    box-shadow:
      0 5px 15px rgba(65, 8, 32, 0.07) !important;
  }


  .product-card {
    border-radius: 11px !important;
  }


  .product-card__content {
    padding-bottom: 10px !important;

    border-radius: 11px !important;
  }


  .product-card h3,
  .product-card h4,
  .product-card .h3,
  .product-card .h4 {
    margin:
      9px 9px 3px !important;

    font-size: 11px !important;

    line-height: 1.35 !important;
  }


  .product-card .price,
  .product-card .price__regular,
  .product-card .price__sale,
  .product-card .product-price {
    margin:
      3px 9px 0 !important;

    font-size: 12px !important;
  }


  .product-card .card-gallery::after {
    inset: 5px;

    border-radius: 6px;
  }


  .product-card button,
  .product-card .button,
  .product-card [type="submit"] {
    min-height: 32px !important;

    padding:
      6px 12px !important;

    font-size: 9px !important;
  }


  .product-grid__item:hover {
    transform: translateY(-2px) !important;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .product-grid__item,
  .product-card img,
  .product-card button {
    transition: none !important;
  }

}
/* =========================================================
   FASHION KING - ROYAL HOMEPAGE PRODUCT COLLECTION
   HORIZON THEME
   ========================================================= */

/* HOMEPAGE PRODUCT SECTION */
body.template-index .product-grid {
  gap: 16px !important;
}

body.template-index .product-grid__item {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #ead5dc !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow:
    0 7px 24px rgba(63, 8, 31, 0.08) !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}


/* GOLD TOP ACCENT */
body.template-index .product-grid__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  z-index: 20;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c99c45,
      #f0d58d,
      #c99c45,
      transparent
    );
}


/* HOVER */
body.template-index .product-grid__item:hover {
  transform: translateY(-6px) !important;

  border-color: #d3af63 !important;

  box-shadow:
    0 18px 40px rgba(63, 8, 31, 0.16),
    0 0 25px rgba(211, 175, 99, 0.10) !important;
}


/* PRODUCT CARD */
body.template-index .product-card {
  display: grid !important;
  height: 100% !important;
  background: #ffffff !important;
}


/* PRODUCT CONTENT */
body.template-index .product-card__content,
body.template-index .product-grid__card {
  position: relative !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffafb 100%
    ) !important;

  border: 0 !important;

  border-radius: 17px !important;

  overflow: hidden !important;
}


/* IMAGE AREA */
body.template-index .product-card .card-gallery {
  position: relative !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      135deg,
      #fff7f5,
      #f8e9ee
    ) !important;
}


/* IMAGE */
body.template-index .product-card img {
  display: block;

  transition:
    transform 0.5s ease,
    filter 0.4s ease !important;
}


/* IMAGE HOVER */
body.template-index
.product-grid__item:hover
.product-card img {
  transform: scale(1.035) !important;
}


/* IMAGE GOLD FRAME */
body.template-index
.product-card
.card-gallery::after {
  content: "";

  position: absolute;

  inset: 8px;

  border:
    1px solid rgba(205, 169, 91, 0.28);

  border-radius: 9px;

  pointer-events: none;

  z-index: 5;
}


/* PRODUCT TITLE */
body.template-index
.product-card
:is(h3, h4, .h3, .h4) {
  margin:
    13px 14px 5px !important;

  color: #39101f !important;

  font-size: 14px !important;

  line-height: 1.4 !important;

  font-weight: 650 !important;

  letter-spacing: -0.1px !important;
}


/* PRODUCT TITLE LINK */
body.template-index
.product-card
:is(h3, h4, .h3, .h4) a {
  color: #39101f !important;

  text-decoration: none !important;
}


/* PRICE */
body.template-index
.product-card
:is(.price, .price__regular, .price__sale, .product-price) {
  margin:
    3px 14px 13px !important;

  color: #4b0b26 !important;

  font-size: 16px !important;

  font-weight: 850 !important;
}


/* PRICE ITEM */
body.template-index
.product-card
.price-item {
  color: #4b0b26 !important;

  font-weight: 850 !important;
}


/* SALE PRICE */
body.template-index
.product-card
.price-item--sale {
  color: #9b4565 !important;
}


/* =========================================================
   RATING
   ========================================================= */

body.template-index
.product-card
:is(.rating, .rating-stars) {
  color: #c49743 !important;

  letter-spacing: 1px !important;
}


/* =========================================================
   QUICK ADD BUTTON
   ========================================================= */

body.template-index
.product-card
:is(button, .button, [type="submit"]) {
  border:
    1px solid #cda957 !important;

  border-radius: 50px !important;

  background:
    linear-gradient(
      135deg,
      #4b0b26,
      #71163e
    ) !important;

  color: #f4d486 !important;

  font-size: 10px !important;

  font-weight: 800 !important;

  letter-spacing: 0.7px !important;

  transition:
    all 0.25s ease !important;
}


body.template-index
.product-card
:is(button, .button, [type="submit"]):hover {
  background:
    linear-gradient(
      135deg,
      #d9b662,
      #b48636
    ) !important;

  color: #300613 !important;

  box-shadow:
    0 8px 20px rgba(65, 8, 32, 0.18) !important;
}


/* =========================================================
   PRODUCT BADGE
   ========================================================= */

body.template-index
.product-card
:is(.badge, [class*="badge"]) {
  border:
    1px solid rgba(210, 174, 94, 0.7) !important;

  border-radius: 50px !important;

  background:
    linear-gradient(
      135deg,
      #4b0b26,
      #71163e
    ) !important;

  color: #f5d98e !important;

  font-size: 9px !important;

  font-weight: 800 !important;

  letter-spacing: 0.6px !important;
}


/* =========================================================
   SUBTLE GOLD BOTTOM LINE
   ========================================================= */

body.template-index
.product-card__content::after {
  content: "";

  position: absolute;

  left: 22%;
  right: 22%;
  bottom: 5px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d5b05d,
      transparent
    );

  opacity: 0.45;

  pointer-events: none;
}


/* =========================================================
   HOMEPAGE PRODUCT HEADING
   ========================================================= */

body.template-index
:is(.featured-collection, .product-list)
h2 {
  color: #4b0b26 !important;

  font-weight: 900 !important;

  letter-spacing: -0.5px !important;
}


/* =========================================================
   VIEW ALL
   ========================================================= */

body.template-index
:is(a, button)[class*="view-all"] {
  color: #4b0b26 !important;

  font-weight: 800 !important;

  border-bottom:
    1px solid #cda957 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  body.template-index .product-grid {
    gap: 9px !important;
  }


  body.template-index .product-grid__item {
    border-radius: 12px !important;

    box-shadow:
      0 5px 15px rgba(63, 8, 31, 0.07) !important;
  }


  body.template-index .product-card {
    border-radius: 11px !important;
  }


  body.template-index .product-grid__card {
    border-radius: 11px !important;
  }


  body.template-index
  .product-card
  .card-gallery::after {
    inset: 5px;

    border-radius: 6px;
  }


  body.template-index
  .product-card
  :is(h3, h4, .h3, .h4) {
    margin:
      9px 9px 3px !important;

    font-size: 11px !important;

    line-height: 1.35 !important;
  }


  body.template-index
  .product-card
  :is(.price, .price__regular, .price__sale, .product-price) {
    margin:
      3px 9px 10px !important;

    font-size: 12px !important;
  }


  body.template-index
  .product-card
  :is(button, .button, [type="submit"]) {
    min-height: 31px !important;

    padding:
      6px 11px !important;

    font-size: 9px !important;
  }


  body.template-index .product-grid__item:hover {
    transform: translateY(-2px) !important;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  body.template-index
  .product-grid__item,
  body.template-index
  .product-card img {
    transition: none !important;
  }

}

/* =========================================================
   ROYAL CART DRAWER - HORIZON THEME
   ========================================================= */

:root {
  --fk-cart-wine: #3a071d;
  --fk-cart-wine-2: #64112f;
  --fk-cart-gold: #e5c47b;
  --fk-cart-muted: rgba(255,255,255,.68);
}

/* CART DRAWER */
cart-drawer-component .cart-drawer,
cart-drawer .cart-drawer,
.cart-drawer,
.cart-drawer__dialog,
dialog.cart-drawer {
  background:
    radial-gradient(circle at 15% 8%, rgba(229,196,123,.09), transparent 30%),
    linear-gradient(145deg, #3a071d 0%, #58102c 48%, #300617 100%) !important;
  color: #fff !important;
  border-left: 1px solid rgba(229,196,123,.38) !important;
  box-shadow: -18px 0 60px rgba(0,0,0,.24) !important;
}

cart-drawer-component .cart-drawer,
cart-drawer .cart-drawer,
.cart-drawer,
.cart-drawer__dialog {
  width: min(430px, 94vw) !important;
  max-width: 430px !important;
}

/* HEADER */
.cart-drawer__header,
.cart-drawer header,
.cart-drawer .drawer__header {
  border-bottom: 1px solid rgba(229,196,123,.20) !important;
  background: rgba(255,255,255,.025) !important;
}

.cart-drawer h2,
.cart-drawer h3,
.cart-drawer__heading,
.cart-drawer__title {
  color: #fff !important;
  font-weight: 800 !important;
}

/* CLOSE */
.cart-drawer button[aria-label*="Close"],
.cart-drawer button[aria-label*="close"],
.cart-drawer .close-button,
.cart-drawer .drawer__close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border: 1px solid rgba(229,196,123,.38) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  transition: background .25s ease, color .25s ease, transform .25s ease !important;
}

.cart-drawer button[aria-label*="Close"]:hover,
.cart-drawer button[aria-label*="close"]:hover,
.cart-drawer .close-button:hover,
.cart-drawer .drawer__close:hover {
  background: #e5c47b !important;
  color: #3a071d !important;
  transform: rotate(90deg) !important;
}

/* EMPTY CART */
.cart-drawer__empty,
.cart-drawer .cart__empty,
.cart-drawer [class*="empty-cart"] {
  color: #fff !important;
  text-align: center;
}

.cart-drawer__empty-content,
.cart-drawer .cart__empty-content,
.cart-drawer [class*="empty-cart"] > div {
  max-width: 330px;
  margin: 35px auto;
  padding: 34px 25px;
  border: 1px solid rgba(229,196,123,.23);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
}

.cart-drawer__empty svg,
.cart-drawer .cart__empty svg,
.cart-drawer [class*="empty-cart"] svg {
  width: 46px !important;
  height: 46px !important;
  margin: 0 auto 18px !important;
  color: #e5c47b !important;
}

.cart-drawer__empty h2,
.cart-drawer__empty h3,
.cart-drawer .cart__empty h2,
.cart-drawer .cart__empty h3,
.cart-drawer [class*="empty-cart"] h2,
.cart-drawer [class*="empty-cart"] h3 {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.cart-drawer__empty p,
.cart-drawer .cart__empty p,
.cart-drawer [class*="empty-cart"] p {
  margin: 0 0 24px !important;
  color: rgba(255,255,255,.64) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* CONTINUE SHOPPING */
.cart-drawer__empty a,
.cart-drawer__empty button,
.cart-drawer .cart__empty a,
.cart-drawer .cart__empty button,
.cart-drawer [class*="empty-cart"] a,
.cart-drawer [class*="empty-cart"] button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 22px !important;
  border: 1px solid #e5c47b !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #e5c47b 0%, #c99c45 100%) !important;
  color: #3a071d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.cart-drawer__empty a:hover,
.cart-drawer__empty button:hover,
.cart-drawer .cart__empty a:hover,
.cart-drawer .cart__empty button:hover,
.cart-drawer [class*="empty-cart"] a:hover,
.cart-drawer [class*="empty-cart"] button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(229,196,123,.22) !important;
}

/* CART ITEMS */
.cart-drawer .cart-items,
.cart-drawer .cart-item,
.cart-drawer [class*="cart-item"] {
  border-color: rgba(229,196,123,.15) !important;
}

.cart-drawer .cart-item__image,
.cart-drawer .cart-item img,
.cart-drawer [class*="cart-item"] img {
  border: 1px solid rgba(229,196,123,.18) !important;
  border-radius: 12px !important;
  transition: transform .25s ease !important;
}

.cart-drawer .cart-item__image:hover,
.cart-drawer .cart-item img:hover {
  transform: scale(1.025) !important;
}

.cart-drawer .cart-item__name,
.cart-drawer .cart-item a,
.cart-drawer [class*="cart-item"] a {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.cart-drawer .cart-item__name:hover,
.cart-drawer .cart-item a:hover {
  color: #e5c47b !important;
}

.cart-drawer .product-option,
.cart-drawer .product-option dt,
.cart-drawer .product-option dd {
  color: rgba(255,255,255,.58) !important;
}

.cart-drawer .cart-item__price-wrapper,
.cart-drawer .cart-item__totals,
.cart-drawer .price,
.cart-drawer .price-item {
  color: #e5c47b !important;
  font-weight: 800 !important;
}

/* QUANTITY */
.cart-drawer .quantity,
.cart-drawer quantity-input,
.cart-drawer .quantity-selector {
  min-height: 42px !important;
  border: 1px solid rgba(229,196,123,.28) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  overflow: hidden !important;
}

.cart-drawer .quantity__button,
.cart-drawer quantity-input button {
  color: #e5c47b !important;
  background: transparent !important;
}

.cart-drawer .quantity__button:hover,
.cart-drawer quantity-input button:hover {
  background: rgba(229,196,123,.10) !important;
}

.cart-drawer .quantity__input {
  color: #fff !important;
  background: transparent !important;
  font-weight: 700 !important;
}

.cart-drawer .cart-remove-button,
.cart-drawer .button--tertiary {
  color: rgba(255,255,255,.58) !important;
}

.cart-drawer .cart-remove-button:hover,
.cart-drawer .button--tertiary:hover {
  color: #e5c47b !important;
}

/* FOOTER */
.cart-drawer .cart__footer,
.cart-drawer__footer {
  border-top: 1px solid rgba(229,196,123,.20) !important;
  background: rgba(0,0,0,.13) !important;
}

.cart-drawer .totals,
.cart-drawer .totals__total {
  color: #fff !important;
}

.cart-drawer .totals__total-value {
  color: #e5c47b !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.cart-drawer .tax-note {
  color: rgba(255,255,255,.52) !important;
  font-size: 10px !important;
}

/* CHECKOUT */
.cart-drawer .cart__checkout-button,
.cart-drawer button[name="checkout"],
.cart-drawer [type="submit"][name="checkout"] {
  width: 100% !important;
  min-height: 52px !important;
  border: 1px solid #e5c47b !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #e5c47b 0%, #c99c45 100%) !important;
  color: #3a071d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.cart-drawer .cart__checkout-button:hover,
.cart-drawer button[name="checkout"]:hover,
.cart-drawer [type="submit"][name="checkout"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(229,196,123,.22) !important;
}

/* SCROLLBAR */
.cart-drawer ::-webkit-scrollbar {
  width: 5px;
}

.cart-drawer ::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
}

.cart-drawer ::-webkit-scrollbar-thumb {
  background: rgba(229,196,123,.42);
  border-radius: 20px;
}

/* MOBILE */
@media screen and (max-width: 749px) {
  cart-drawer-component .cart-drawer,
  cart-drawer .cart-drawer,
  .cart-drawer,
  .cart-drawer__dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: 0 !important;
  }

  .cart-drawer__empty-content,
  .cart-drawer .cart__empty-content,
  .cart-drawer [class*="empty-cart"] > div {
    margin: 25px auto;
    padding: 30px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer *,
  .cart-drawer *::before,
  .cart-drawer *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================
   FASHION KING BY URVASHI
   ROYAL COLLECTION PAGE - HORIZON THEME
   WINE + CHAMPAGNE GOLD
   ========================================================= */

:root {
  --fk-royal-wine: #3a071d;
  --fk-wine: #5a102d;
  --fk-wine-soft: #7a294b;
  --fk-gold: #e5c47b;
  --fk-gold-dark: #c9a85e;
  --fk-cream: #fffaf7;
  --fk-pink: #fff5f8;
  --fk-border: #ead8df;
  --fk-text: #241a1e;
  --fk-muted: #75666b;
  --fk-white: #ffffff;
}

/* =========================================================
   COLLECTION PAGE BACKGROUND
   ========================================================= */

body {
  background: #fffafc;
}

main {
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(229, 196, 123, 0.07),
      transparent 24%
    ),
    radial-gradient(
      circle at 92% 35%,
      rgba(90, 16, 45, 0.045),
      transparent 25%
    ),
    #fffafc;
}

/* =========================================================
   COLLECTION MAIN WRAPPER
   ========================================================= */

.collection {
  position: relative;
}

.collection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fk-gold),
    transparent
  );
  opacity: 0.45;
}

/* =========================================================
   COLLECTION HEADER
   ========================================================= */

.collection__header,
.collection-header,
.collection-banner {
  position: relative;
}

.collection__title,
.collection-header h1,
.collection-banner h1 {
  color: var(--fk-royal-wine) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.collection__title::after,
.collection-header h1::after,
.collection-banner h1::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin: 13px auto 0;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--fk-gold-dark),
    var(--fk-gold),
    var(--fk-gold-dark)
  );
}

/* =========================================================
   COLLECTION DESCRIPTION
   ========================================================= */

.collection__description,
.collection-header p,
.collection-banner p {
  color: var(--fk-muted);
  line-height: 1.7;
}

/* =========================================================
   PRODUCT GRID
   ========================================================= */

.product-grid {
  column-gap: 18px !important;
  row-gap: 26px !important;
}

.product-grid__item {
  position: relative;
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fk-border);
  border-radius: 18px;
  background: var(--fk-white);
  box-shadow:
    0 4px 18px rgba(58, 7, 29, 0.055),
    0 1px 3px rgba(58, 7, 29, 0.04);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(201, 168, 94, 0.65);
  box-shadow:
    0 18px 42px rgba(58, 7, 29, 0.13),
    0 4px 12px rgba(229, 196, 123, 0.12);
}

/* =========================================================
   PRODUCT IMAGE AREA
   ========================================================= */

.product-card .product-card__image,
.product-card .product-media,
.product-card .product-card__media {
  position: relative;
  overflow: hidden;
  background: #faf3f6;
  border-radius: 17px 17px 0 0;
}

.product-card img {
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.35s ease;
}

.product-card:hover img {
  transform: scale(1.045);
}

/* subtle luxury image overlay */

.product-card__media::after,
.product-card .product-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 70%,
    rgba(58, 7, 29, 0.035)
  );
}

/* =========================================================
   GOLD IMAGE BOTTOM LINE
   ========================================================= */

.product-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fk-gold),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.5);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.product-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================================================
   PRODUCT CARD CONTENT
   ========================================================= */

.product-card__content {
  position: relative;
  padding: 13px 14px 16px !important;
  background: #fff;
}

/* =========================================================
   PRODUCT TITLE
   ========================================================= */

.product-card__title,
.product-card__title a,
.product-card a.product-card__title {
  color: var(--fk-text) !important;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}

.product-card:hover .product-card__title,
.product-card:hover .product-card__title a {
  color: var(--fk-wine) !important;
}

/* =========================================================
   PRODUCT PRICE
   ========================================================= */

.product-card .price,
.product-card .product-price,
.product-card .price-item {
  color: var(--fk-royal-wine) !important;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.product-card .compare-at-price,
.product-card .price-item--regular {
  color: #a48e96 !important;
}

/* =========================================================
   SALE / BADGES
   ========================================================= */

.product-card .badge,
.product-card .product-badge,
.product-card [class*="badge"] {
  border: 1px solid rgba(229, 196, 123, 0.7);
  border-radius: 999px;
  background: var(--fk-royal-wine) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  box-shadow: 0 5px 14px rgba(58, 7, 29, 0.18);
}

/* =========================================================
   PRODUCT CARD QUICK ACTIONS
   ========================================================= */

.product-card button,
.product-card .button {
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.product-card button:hover,
.product-card .button:hover {
  transform: translateY(-2px);
}

/* =========================================================
   FILTER + SORT TOOLBAR
   ========================================================= */

.facets,
.facets-wrapper,
.collection-toolbar,
.products-count-wrapper {
  position: relative;
  border-color: var(--fk-border) !important;
}

/* filter buttons */

.facets-toggle__button,
.facets__summary,
.facets button,
.sorting-filter button,
.collection-toolbar button {
  border: 1px solid var(--fk-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--fk-royal-wine) !important;
  min-height: 42px;
  padding: 0 17px;
  font-weight: 600;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.facets-toggle__button:hover,
.facets__summary:hover,
.facets button:hover,
.sorting-filter button:hover,
.collection-toolbar button:hover {
  border-color: var(--fk-gold) !important;
  background: #fffaf4 !important;
  box-shadow: 0 6px 18px rgba(58, 7, 29, 0.08);
  transform: translateY(-1px);
}

/* =========================================================
   FILTER DRAWER / DROPDOWN
   ========================================================= */

.facets__panel,
.facets__dropdown,
.facets-drawer,
.filter-drawer,
.sorting-filter__dropdown {
  border: 1px solid var(--fk-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow:
    0 18px 45px rgba(58, 7, 29, 0.14),
    0 2px 10px rgba(58, 7, 29, 0.06);
}

/* =========================================================
   FILTER LABELS
   ========================================================= */

.facets__label,
.facets__summary,
.facets__title {
  color: var(--fk-royal-wine) !important;
  font-weight: 650;
}

/* =========================================================
   CHECKBOXES
   ========================================================= */

.facets input[type="checkbox"] {
  accent-color: var(--fk-royal-wine);
}

.facets input[type="checkbox"]:checked {
  accent-color: var(--fk-royal-wine);
}

/* =========================================================
   PRICE FILTER INPUTS
   ========================================================= */

.facets input[type="text"],
.facets input[type="number"],
.facets input[type="search"],
.facets select {
  border: 1px solid var(--fk-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--fk-text) !important;
}

.facets input:focus,
.facets select:focus {
  outline: none;
  border-color: var(--fk-gold) !important;
  box-shadow: 0 0 0 3px rgba(229, 196, 123, 0.15);
}

/* =========================================================
   PRODUCT COUNT
   ========================================================= */

.products-count-wrapper,
.products-count {
  color: var(--fk-muted) !important;
  font-size: 13px;
  font-weight: 500;
}

/* =========================================================
   GRID / LIST VIEW BUTTONS
   ========================================================= */

.collection .grid-view,
.collection .view-toggle,
.collection [class*="view"] button {
  color: var(--fk-royal-wine) !important;
}

.collection .grid-view button,
.collection .view-toggle button {
  border-radius: 9px;
}

/* =========================================================
   ACTIVE FILTER CHIP
   ========================================================= */

.active-facets,
.active-facets__button,
.facets__active-filter {
  border-color: var(--fk-gold) !important;
  color: var(--fk-royal-wine) !important;
  background: #fffaf4 !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.pagination {
  margin-top: 42px;
}

.pagination a,
.pagination button {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--fk-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--fk-royal-wine) !important;
  transition: all 0.25s ease;
}

.pagination a:hover,
.pagination button:hover {
  border-color: var(--fk-gold) !important;
  background: var(--fk-royal-wine) !important;
  color: #fff !important;
}

.pagination .is-active,
.pagination [aria-current="page"] {
  border-color: var(--fk-royal-wine) !important;
  background: var(--fk-royal-wine) !important;
  color: #fff !important;
}

/* =========================================================
   COLLECTION SECTION SPACING
   ========================================================= */

.collection .section {
  padding-top: 24px;
  padding-bottom: 45px;
}

/* =========================================================
   ROYAL DECORATIVE COLLECTION DIVIDER
   ========================================================= */

.collection .product-grid::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(229, 196, 123, 0.45),
    transparent
  );
  margin-bottom: 2px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .product-grid {
    column-gap: 9px !important;
    row-gap: 15px !important;
  }

  .product-card {
    border-radius: 13px;
  }

  .product-card__content {
    padding: 9px 9px 12px !important;
  }

  .product-card__title,
  .product-card__title a,
  .product-card a.product-card__title {
    font-size: 12px;
    line-height: 1.38;
  }

  .product-card .price,
  .product-card .product-price,
  .product-card .price-item {
    font-size: 14px;
  }

  .product-card .badge,
  .product-card .product-badge,
  .product-card [class*="badge"] {
    font-size: 8px;
    padding: 4px 7px;
  }

  .facets-toggle__button,
  .facets__summary,
  .facets button,
  .sorting-filter button,
  .collection-toolbar button {
    min-height: 38px;
    padding: 0 13px;
    font-size: 12px;
  }

  .collection .section {
    padding-top: 14px;
    padding-bottom: 30px;
  }

  .pagination {
    margin-top: 30px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 750px) and (max-width: 1099px) {

  .product-grid {
    column-gap: 14px !important;
    row-gap: 20px !important;
  }

  .product-card__content {
    padding: 11px 12px 14px !important;
  }
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media screen and (min-width: 1400px) {

  .product-grid {
    column-gap: 22px !important;
    row-gap: 30px !important;
  }

  .product-card {
    border-radius: 20px;
  }

  .product-card__content {
    padding: 15px 16px 18px !important;
  }

  .product-card__title,
  .product-card__title a {
    font-size: 16px;
  }

  .product-card .price,
  .product-card .product-price,
  .product-card .price-item {
    font-size: 18px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.product-card a:focus-visible,
.product-card button:focus-visible,
.facets button:focus-visible,
.facets a:focus-visible,
.pagination a:focus-visible {
  outline: 2px solid var(--fk-gold);
  outline-offset: 3px;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .product-card,
  .product-card img,
  .product-card::after,
  .product-card button,
  .product-card .button,
  .facets button,
  .pagination a,
  .pagination button {
    transition: none !important;
  }

  .product-card:hover {
    transform: none;
  }

  .product-card:hover img {
    transform: none;
  }
}



/* =========================================================
   FASHION KING BY URVASHI
   ROYAL PRODUCT PAGE FIX
   HORIZON / SHOPIFY
   ========================================================= */

/* ---------- PRODUCT PAGE CANVAS ---------- */
body.template-product,
body:has(main[data-template*="product"]),
.template-product main#MainContent {
  background:
    radial-gradient(circle at 8% 15%, rgba(229,196,123,.08), transparent 26%),
    radial-gradient(circle at 92% 55%, rgba(58,7,29,.035), transparent 30%),
    #fff9fb !important;
}

/* ---------- REMOVE THE BAD SIDE SHIPPING/TRUST BOX ---------- */
/* Previous trust pseudo-elements must not create a tall right-side panel. */
.product-information::before,
.product-information::after,
.product-info::before,
.product-info::after,
.product__info-container::before,
.product__info-container::after,
.product__information::before,
.product__information::after {
  content: none !important;
  display: none !important;
}

/* If the previous code created a generic right-side trust element */
.product-information [class*="trust"],
.product-info [class*="trust"],
.product__info-container [class*="trust"] {
  position: static !important;
  inset: auto !important;
  float: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- PRODUCT TWO-COLUMN AREA ---------- */
.product,
.product__info-wrapper,
.product__media-wrapper,
.product-information,
.product-info,
.product__info-container {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 990px) {
  .product__media-wrapper,
  .product-media-wrapper {
    align-self: start !important;
  }

  .product-information,
  .product-info,
  .product__info-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
}

/* ---------- PRODUCT TITLE ---------- */
.product-information h1,
.product-info h1,
.product__info-container h1,
.product__title,
.product-information .product-title {
  color: #3a071d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}

/* ---------- PRICE ---------- */
.product-information .price,
.product-info .price,
.product__info-container .price,
.product__price,
.product-information .price-item,
.product-info .price-item {
  color: #3a071d !important;
  font-weight: 800 !important;
}

/* ---------- PRODUCT MEDIA ---------- */
.product__media,
.product-media,
.product-gallery__media,
.product__media-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #ead8df !important;
}

.product__media img,
.product-media img,
.product-gallery__media img {
  transition: transform .35s ease, filter .35s ease !important;
}

.product__media:hover img,
.product-media:hover img,
.product-gallery__media:hover img {
  transform: scale(1.018);
}

/* ---------- VARIANT / COLOR BUTTONS ---------- */
.product-information .variant-option button,
.product-info .variant-option button,
.product-information .product-form__input label,
.product-info .product-form__input label,
.product__info-container .product-form__input label {
  border-radius: 10px !important;
}

.product-information .product-form__input input[type="radio"] + label,
.product-info .product-form__input input[type="radio"] + label,
.product__info-container .product-form__input input[type="radio"] + label {
  border-color: #ead8df !important;
  background: #fff !important;
  color: #3a071d !important;
  font-weight: 600 !important;
}

.product-information .product-form__input input[type="radio"]:checked + label,
.product-info .product-form__input input[type="radio"]:checked + label,
.product__info-container .product-form__input input[type="radio"]:checked + label {
  border-color: #3a071d !important;
  background: #3a071d !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(58,7,29,.14) !important;
}

/* ---------- QUANTITY ---------- */
.product-form__quantity,
.product-form__quantity .quantity {
  border-radius: 11px !important;
  overflow: hidden !important;
}

.product-form__quantity .quantity__button {
  color: #3a071d !important;
}

/* ---------- ADD TO CART ---------- */
.product-form__submit,
.product-form__buttons .button[type="submit"],
.product-information .product-form__submit,
.product-info .product-form__submit {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 11px !important;
  background: #3a071d !important;
  color: #fff !important;
  border: 1px solid #3a071d !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 22px rgba(58,7,29,.16) !important;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease !important;
}

.product-form__submit:hover,
.product-form__buttons .button[type="submit"]:hover {
  background: #5a102d !important;
  border-color: #e5c47b !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 27px rgba(58,7,29,.22) !important;
}

/* ---------- BUY NOW ---------- */
.product-form__buttons .shopify-payment-button {
  margin-top: 10px !important;
}

.product-form__buttons .shopify-payment-button__button--unbranded {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #e5c47b, #f1dca1) !important;
  color: #3a071d !important;
  border: 1px solid #c9a85e !important;
  font-weight: 750 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 20px rgba(201,168,94,.18) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.product-form__buttons .shopify-payment-button__button--unbranded:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(201,168,94,.26) !important;
}

/* ---------- PROPER SHIPPING / TRUST STRIP ----------
   This replaces the bad vertical side box.
*/
.product-form__buttons::after {
  content: "FREE SHIPPING  •  COD AVAILABLE  •  EASY RETURNS  •  SECURE PAYMENT";
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 14px 0 0 !important;
  padding: 11px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(229,196,123,.65) !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #fffaf4, #fff6f8) !important;
  color: #3a071d !important;
  text-align: center !important;
  font-size: 9px !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  white-space: normal !important;
}

/* ---------- DESCRIPTION ---------- */
.product-information .rte,
.product-info .rte,
.product__description {
  color: #3b3034 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

.product-information .rte h2,
.product-information .rte h3,
.product-info .rte h2,
.product-info .rte h3,
.product__description h2,
.product__description h3 {
  color: #3a071d !important;
  font-weight: 700 !important;
}

/* ---------- ACCORDIONS ---------- */
.product-information details,
.product-info details,
.product__info-container details {
  border: 1px solid #ead8df !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
}

.product-information details summary,
.product-info details summary,
.product__info-container details summary {
  color: #3a071d !important;
  font-weight: 700 !important;
}

/* ---------- WISHLIST BUTTONS IF PRESENT ---------- */
.fk-wishlist-btn {
  border: 1px solid #e5c47b !important;
  background: #fff !important;
  color: #3a071d !important;
  border-radius: 11px !important;
}

.fk-wishlist-btn.is-active {
  background: #3a071d !important;
  color: #fff !important;
}

/* ---------- DESKTOP PRODUCT SPACING ---------- */
@media screen and (min-width: 990px) {
  .product {
    padding-top: 24px !important;
    padding-bottom: 60px !important;
  }

  .product-information,
  .product-info,
  .product__info-container {
    padding-left: 24px !important;
  }

  /* Keep the information column inside its own column. */
  .product-information > *,
  .product-info > *,
  .product__info-container > * {
    max-width: 100% !important;
  }
}

/* ---------- MOBILE ---------- */
@media screen and (max-width: 749px) {
  .product {
    padding-top: 10px !important;
    padding-bottom: 35px !important;
  }

  .product-information,
  .product-info,
  .product__info-container {
    padding: 14px 5px 20px !important;
  }

  .product-information h1,
  .product-info h1,
  .product__info-container h1,
  .product__title {
    font-size: 26px !important;
  }

  .product-form__submit,
  .product-form__buttons .shopify-payment-button__button--unbranded {
    min-height: 50px !important;
  }

  .product-form__buttons::after {
    font-size: 8px !important;
    padding: 10px 7px !important;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .product__media img,
  .product-media img,
  .product-gallery__media img,
  .product-form__submit,
  .product-form__buttons .shopify-payment-button__button--unbranded {
    transition: none !important;
  }
}
(function () {
  "use strict";

  function initRoyalGallery() {

    if (document.querySelector(".fk-royal-gallery")) {
      return;
    }

    const mediaImages = Array.from(
      document.querySelectorAll(
        ".product-media-container img, .product__media img, .product-media img"
      )
    );

    if (!mediaImages.length) {
      return;
    }

    const uniqueImages = [];

    mediaImages.forEach(function (img) {
      const src =
        img.currentSrc ||
        img.src ||
        img.getAttribute("src");

      if (!src) return;

      if (
        src.includes("icon") ||
        src.includes("placeholder")
      ) {
        return;
      }

      const exists = uniqueImages.some(function (item) {
        return item.src === src;
      });

      if (!exists) {
        uniqueImages.push({
          src: src,
          alt: img.alt || ""
        });
      }
    });

    if (!uniqueImages.length) {
      return;
    }

    const originalContainer =
      mediaImages[0].closest(
        ".product-information__media, .product-media-container, .product__media-list, .product-media-list"
      );

    if (!originalContainer) {
      return;
    }

    const gallery = document.createElement("div");
    gallery.className = "fk-royal-gallery";

    const main = document.createElement("div");
    main.className = "fk-royal-main-image";

    const mainImg = document.createElement("img");
    mainImg.src = uniqueImages[0].src;
    mainImg.alt = uniqueImages[0].alt;
    mainImg.loading = "eager";

    main.appendChild(mainImg);

    const thumbs = document.createElement("div");
    thumbs.className = "fk-royal-thumbs";

    uniqueImages.forEach(function (item, index) {

      const button = document.createElement("button");

      button.type = "button";
      button.className = "fk-royal-thumb";

      if (index === 0) {
        button.classList.add("is-active");
      }

      button.setAttribute(
        "aria-label",
        "View product image " + (index + 1)
      );

      const thumbImg = document.createElement("img");

      thumbImg.src = item.src;
      thumbImg.alt = item.alt;
      thumbImg.loading = "lazy";

      button.appendChild(thumbImg);

      button.addEventListener("click", function () {

        mainImg.src = item.src;
        mainImg.alt = item.alt;

        document
          .querySelectorAll(".fk-royal-thumb")
          .forEach(function (thumb) {
            thumb.classList.remove("is-active");
          });

        button.classList.add("is-active");
      });

      thumbs.appendChild(button);
    });

    gallery.appendChild(main);
    gallery.appendChild(thumbs);

    originalContainer.innerHTML = "";
    originalContainer.appendChild(gallery);
  }

  function start() {
    setTimeout(initRoyalGallery, 300);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start);
  } else {
    start();
  }

  document.addEventListener(
    "shopify:section:load",
    function () {
      setTimeout(initRoyalGallery, 300);
    }
  );

})();
/* =========================================================
   FASHION KING BY URVASHI — PREMIUM ROYAL LOGO
   HORIZON THEME
   ========================================================= */

/* Logo wrapper */
#header-component .header-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  min-height: 58px;
  border: 1px solid rgba(229,196,123,.45);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.02)
    );
  box-shadow:
    0 4px 18px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

/* Gold glow behind logo */
#header-component .header-logo::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 17px;
  background: radial-gradient(
    circle,
    rgba(229,196,123,.20) 0%,
    rgba(229,196,123,.06) 45%,
    transparent 72%
  );
  filter: blur(7px);
  opacity: .7;
  z-index: -1;
  pointer-events: none;
}

/* Premium hover */
#header-component .header-logo:hover {
  transform: translateY(-1px);
  border-color: rgba(229,196,123,.85);
  box-shadow:
    0 8px 25px rgba(0,0,0,.25),
    0 0 22px rgba(229,196,123,.18),
    inset 0 0 0 1px rgba(229,196,123,.12);
}

/* Actual logo image */
#header-component .header-logo img,
#header-component .header-logo svg {
  position: relative;
  z-index: 2;
  max-width: 175px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;

  /* Convert the current teal/blue logo into luxury gold */
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(38%)
    saturate(650%)
    hue-rotate(355deg)
    brightness(101%)
    contrast(91%);

  transition:
    filter .35s ease,
    transform .35s ease,
    opacity .35s ease;
}

/* Logo hover shine */
#header-component .header-logo:hover img,
#header-component .header-logo:hover svg {
  filter:
    brightness(0)
    saturate(100%)
    invert(84%)
    sepia(42%)
    saturate(720%)
    hue-rotate(355deg)
    brightness(105%)
    contrast(94%);

  transform: scale(1.035);
}

/* Small luxury shine line */
#header-component .header-logo::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #e5c47b,
    #fff1bd,
    #e5c47b,
    transparent
  );
  opacity: .75;
  transform: scaleX(.65);
  transition: transform .4s ease, opacity .4s ease;
}

#header-component .header-logo:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Desktop */
@media screen and (min-width: 990px) {
  #header-component .header-logo {
    padding: 8px 17px;
    min-height: 62px;
    border-radius: 15px;
  }

  #header-component .header-logo img,
  #header-component .header-logo svg {
    max-width: 190px;
    max-height: 55px;
  }
}

/* Tablet */
@media screen and (min-width: 750px) and (max-width: 989px) {
  #header-component .header-logo {
    padding: 6px 12px;
    min-height: 54px;
  }

  #header-component .header-logo img,
  #header-component .header-logo svg {
    max-width: 160px;
    max-height: 48px;
  }
}

/* Mobile */
@media screen and (max-width: 749px) {
  #header-component .header-logo {
    padding: 5px 9px;
    min-height: 45px;
    border-radius: 11px;
  }

  #header-component .header-logo img,
  #header-component .header-logo svg {
    max-width: 125px;
    max-height: 40px;
  }

  #header-component .header-logo::before {
    inset: -3px;
    filter: blur(5px);
  }

  #header-component .header-logo::after {
    left: 15%;
    right: 15%;
    bottom: 2px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  #header-component .header-logo,
  #header-component .header-logo img,
  #header-component .header-logo svg,
  #header-component .header-logo::after {
    transition: none;
  }
}
/* =========================================================
   FASHION KING BY URVASHI
   ROYAL PREMIUM MEGA MENU — HORIZON
   ========================================================= */

/* ---------- MAIN DROPDOWN ---------- */

#header-component .menu-list__submenu,
#header-component .mega-menu {
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(229,196,123,.12),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #300518 0%,
      #4a0a25 48%,
      #300518 100%
    ) !important;

  border: 1px solid rgba(229,196,123,.30) !important;
  border-top: 2px solid #e5c47b !important;

  border-radius: 0 0 22px 22px !important;

  box-shadow:
    0 22px 50px rgba(25,0,12,.38),
    0 8px 25px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  overflow: hidden;
}

/* ---------- GOLD TOP SHINE ---------- */

#header-component .menu-list__submenu::before,
#header-component .mega-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 45%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #fff1bd,
    #e5c47b,
    transparent
  );

  animation: fkMegaShine 5s linear infinite;
  pointer-events: none;
}

@keyframes fkMegaShine {
  0% {
    transform: translateX(0);
    opacity: .2;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(350%);
    opacity: .2;
  }
}


/* ---------- MENU INNER AREA ---------- */

#header-component .menu-list__submenu {
  padding: 26px 34px 30px !important;
}


/* ---------- CATEGORY LINKS ---------- */

#header-component .menu-list__submenu a,
#header-component .mega-menu a {
  color: #fff !important;
  text-decoration: none !important;
  transition:
    color .25s ease,
    background .25s ease,
    padding-left .25s ease,
    transform .25s ease !important;
}


/* Category text */

#header-component .menu-list__submenu .menu-list__link,
#header-component .mega-menu .mega-menu__link {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 40px;

  padding: 8px 14px !important;

  margin: 2px 0;

  border-radius: 9px;

  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .2px;

  color: #fff !important;
}


/* Gold little line */

#header-component .menu-list__submenu .menu-list__link::before,
#header-component .mega-menu .mega-menu__link::before {
  content: "";
  width: 4px;
  height: 4px;

  margin-right: 9px;

  border-radius: 50%;

  background: #e5c47b;

  opacity: .65;

  transition:
    transform .25s ease,
    opacity .25s ease;
}


/* Hover */

#header-component .menu-list__submenu .menu-list__link:hover,
#header-component .mega-menu .mega-menu__link:hover {
  color: #fff !important;

  background:
    linear-gradient(
      90deg,
      rgba(229,196,123,.20),
      rgba(229,196,123,.06)
    ) !important;

  padding-left: 19px !important;

  box-shadow:
    inset 3px 0 0 #e5c47b,
    0 4px 15px rgba(0,0,0,.12);
}

#header-component .menu-list__submenu .menu-list__link:hover::before,
#header-component .mega-menu .mega-menu__link:hover::before {
  transform: scale(1.8);
  opacity: 1;
}


/* ---------- CATEGORY HEADINGS ---------- */

#header-component .mega-menu__heading,
#header-component .menu-list__submenu .mega-menu__heading {
  color: #e5c47b !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  text-transform: uppercase;
  letter-spacing: 1.6px;

  margin-bottom: 12px !important;

  position: relative;
}

#header-component .mega-menu__heading::after {
  content: "";

  display: block;

  width: 38px;
  height: 2px;

  margin-top: 7px;

  background: linear-gradient(
    90deg,
    #e5c47b,
    transparent
  );
}


/* =========================================================
   PRODUCT CARDS INSIDE DROPDOWN
   ========================================================= */

#header-component .mega-menu .product-card,
#header-component .menu-list__submenu .product-card {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.035)
    ) !important;

  border: 1px solid rgba(229,196,123,.28) !important;

  border-radius: 14px !important;

  padding: 7px !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


/* Product card hover */

#header-component .mega-menu .product-card:hover,
#header-component .menu-list__submenu .product-card:hover {
  transform: translateY(-5px);

  border-color: rgba(229,196,123,.75) !important;

  box-shadow:
    0 14px 30px rgba(0,0,0,.30),
    0 0 20px rgba(229,196,123,.12);
}


/* Product image */

#header-component .mega-menu .product-card img,
#header-component .menu-list__submenu .product-card img {
  display: block;

  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  border-radius: 10px;

  transition:
    transform .45s ease,
    filter .35s ease;
}


/* Image zoom */

#header-component .mega-menu .product-card:hover img,
#header-component .menu-list__submenu .product-card:hover img {
  transform: scale(1.045);

  filter: brightness(1.04) saturate(1.05);
}


/* Product title */

#header-component .mega-menu .product-card .product-title,
#header-component .menu-list__submenu .product-card .product-title {
  color: #fff !important;

  font-size: 13px !important;

  line-height: 1.35;

  font-weight: 600 !important;

  margin-top: 8px !important;
}


/* Product price */

#header-component .mega-menu .product-card .price,
#header-component .menu-list__submenu .product-card .price {
  color: #e5c47b !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  margin-top: 4px !important;
}


/* =========================================================
   PRODUCT CARD GOLD CORNER
   ========================================================= */

#header-component .mega-menu .product-card::after,
#header-component .menu-list__submenu .product-card::after {
  content: "NEW";

  position: absolute;

  top: 12px;
  left: 12px;

  padding: 4px 7px;

  border-radius: 5px;

  background: #e5c47b;

  color: #300518;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .8px;

  opacity: 0;

  transform: translateY(-5px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}

#header-component .mega-menu .product-card:hover::after,
#header-component .menu-list__submenu .product-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   DROPDOWN SCROLLBAR
   ========================================================= */

#header-component .menu-list__submenu::-webkit-scrollbar,
#header-component .mega-menu::-webkit-scrollbar {
  width: 5px;
}

#header-component .menu-list__submenu::-webkit-scrollbar-track,
#header-component .mega-menu::-webkit-scrollbar-track {
  background: #260411;
}

#header-component .menu-list__submenu::-webkit-scrollbar-thumb,
#header-component .mega-menu::-webkit-scrollbar-thumb {
  background: #e5c47b;
  border-radius: 10px;
}


/* =========================================================
   DROPDOWN OPEN ANIMATION
   ========================================================= */

#header-component .menu-list__submenu,
#header-component .mega-menu {
  transform-origin: top center;

  animation: fkMegaOpen .28s ease-out;
}

@keyframes fkMegaOpen {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
  }

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


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  #header-component .menu-list__submenu,
  #header-component .mega-menu {
    border-radius: 0 0 16px 16px !important;

    box-shadow:
      0 12px 30px rgba(0,0,0,.25) !important;
  }

  #header-component .menu-list__submenu {
    padding: 14px 16px 18px !important;
  }

  #header-component .menu-list__submenu .menu-list__link,
  #header-component .mega-menu .mega-menu__link {
    min-height: 42px;

    font-size: 14px !important;
  }

  #header-component .mega-menu .product-card {
    border-radius: 11px !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #header-component .menu-list__submenu,
  #header-component .mega-menu,
  #header-component .mega-menu .product-card,
  #header-component .menu-list__submenu .product-card {
    animation: none !important;
    transition: none !important;
  }

  #header-component .menu-list__submenu::before,
  #header-component .mega-menu::before {
    display: none;
  }
}

/* FASHION KING BY URVASHI - PRODUCT CARD ACTIONS */

.fk-card-actions {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 10px 10px 12px;
  box-sizing: border-box;
}

.fk-card-actions__top {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: 7px;
  width: 100%;
}

.fk-card-actions__cart-form,
.fk-card-actions__buy-form {
  display: flex;
  min-width: 0;
  margin: 0;
}

.fk-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background .2s ease, color .2s ease,
    border-color .2s ease, transform .2s ease;
}

.fk-card-actions button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fk-card-actions__share,
.fk-card-actions__cart {
  color: #fff7ec;
  background: #4a1028;
  border: 1px solid #c9a45e;
}

.fk-card-actions__share:hover,
.fk-card-actions__cart:hover {
  color: #3b0b20;
  background: #e1c27e;
}

.fk-card-actions__buy {
  min-height: 32px !important;
  color: #35101f;
  background: linear-gradient(110deg, #c9a45e, #f1dba0, #c9a45e);
  border: 1px solid #c9a45e;
  letter-spacing: .2px;
}

.fk-card-actions__buy:hover {
  background: #f7e7bd;
  transform: translateY(-1px);
}

.fk-card-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media screen and (max-width: 749px) {
  .fk-card-actions {
    padding: 8px 7px 10px;
    gap: 6px;
  }

  .fk-card-actions__top {
    grid-template-columns: .8fr 1.5fr;
    gap: 5px;
  }

  .fk-card-actions button {
    font-size: 10px;
    padding: 6px 4px;
  }
}

/* FASHION KING - LUXURY IVORY CREAM HEADER */

:root {
  --fk-cream: #FFFFF0;
  --fk-dark: #3B2118;
  --fk-gold: #C49A45;
}

/* Main Header */
#header-component,
.header,
.header__row,
.header__columns {
  background: #FFFFF0 !important;
  background-color: #FFFFF0 !important;
}

/* Announcement Bar */
.announcement-bar,
.announcement-bar__message,
.utility-bar {
  background: #FFFFF0 !important;
  background-color: #FFFFF0 !important;
}

/* Menu Text */
.header a,
.header__menu-item,
.menu-list__link,
.header-menu a {
  color: #3B2118 !important;
}

/* Header Icons */
.header svg,
.header__icon,
.header-actions__action {
  color: #3B2118 !important;
  stroke: #3B2118 !important;
}

/* Announcement Text */
.announcement-bar *,
.utility-bar * {
  color: #3B2118 !important;
}

/* Gold Borders */
#header-component {
  border-bottom: 1px solid #C49A45 !important;
}
/* =========================================================
   FASHION KING BY URVASHI — ROYAL IVORY + GOLD SITE OVERRIDE
   Shopify Horizon | Paste at the VERY END of Assets/base.css
   Does not replace your existing theme CSS.
   ========================================================= */

:root {
  --fk-ivory: #FFFFF0;
  --fk-ivory-soft: #FFF9E8;
  --fk-wine: #4A1028;
  --fk-wine-deep: #2B0718;
  --fk-wine-mid: #681D3B;
  --fk-gold: #C49A45;
  --fk-gold-light: #F3DFA6;
  --fk-ink: #35251E;
  --fk-muted: #705D50;
}

/* WHOLE WEBSITE — base canvas and typography */
html,
body,
.page-wrapper,
.content-for-layout {
  background-color: var(--fk-ivory) !important;
  color: var(--fk-ink);
}

main,
#MainContent {
  background-color: var(--fk-ivory);
}

/* Section backgrounds: retain uploaded background images and videos */
.shopify-section:not(.header-section):not(:has(.section-background)) {
  background-color: var(--fk-ivory);
}

.shopify-section:not(.header-section) .section-background {
  background-color: var(--fk-ivory) !important;
}

/* General text, links and headings */
body,
p,
.rte,
.product-card__content,
.collection-card,
.product__info-container,
.shopify-policy__container {
  color: var(--fk-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--fk-wine);
}

a {
  text-decoration-color: transparent;
  transition: color .25s ease, text-decoration-color .25s ease;
}

a:hover {
  color: var(--fk-gold);
}

/* BUTTONS — wine base, gold hover */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  border: 1px solid var(--fk-gold) !important;
  transition: transform .25s ease, box-shadow .25s ease,
    background .25s ease, color .25s ease !important;
}

.button,
button.shopify-payment-button__button--unbranded {
  background: linear-gradient(115deg, var(--fk-wine-deep), var(--fk-wine-mid)) !important;
  color: var(--fk-ivory) !important;
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background: linear-gradient(115deg, var(--fk-gold), var(--fk-gold-light)) !important;
  color: var(--fk-wine-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(74,16,40,.18);
}

.button-secondary {
  background: var(--fk-ivory-soft) !important;
  color: var(--fk-wine) !important;
}

.button-secondary:hover {
  background: var(--fk-wine) !important;
  color: var(--fk-ivory) !important;
}

/* INPUTS, SEARCH AND SELECTS */
input:not([type="checkbox"], [type="radio"]),
textarea,
select,
.field__input {
  background-color: #FFFEF7 !important;
  color: var(--fk-ink) !important;
  border-color: rgba(196,154,69,.55) !important;
}

input:focus,
textarea:focus,
select:focus,
.field__input:focus {
  outline-color: var(--fk-gold) !important;
  box-shadow: 0 0 0 2px rgba(196,154,69,.18) !important;
}

/* HEADER — ivory surface with gold trim */
#header-component,
.header-wrapper,
#header-component .header,
#header-component .header__row,
#header-component .header__columns {
  background: var(--fk-ivory) !important;
  color: var(--fk-wine) !important;
}

#header-component {
  border-bottom: 1px solid rgba(196,154,69,.7) !important;
  box-shadow: 0 5px 22px rgba(74,16,40,.08) !important;
  position: relative;
  z-index: 50;
}

#header-component .header a,
#header-component .menu-list__link,
#header-component .header-menu a,
#header-component .header__menu-item {
  color: var(--fk-wine) !important;
  font-weight: 600;
  transition: color .25s ease, transform .25s ease !important;
}

#header-component .header a:hover,
#header-component .menu-list__link:hover,
#header-component .header-menu a:hover {
  color: #A47732 !important;
}

/* LOGO — framed, luminous and gently animated */
#header-component .header-logo,
#header-component .header__heading,
#header-component .header__heading-link {
  position: relative;
  z-index: 1;
  transition: transform .3s ease, filter .3s ease;
}

#header-component .header-logo img,
#header-component .header__heading-logo,
#header-component .header__heading-link img {
  filter: drop-shadow(0 0 2px rgba(196,154,69,.45))
          drop-shadow(0 3px 7px rgba(74,16,40,.18));
  transition: filter .35s ease, transform .35s ease;
}

#header-component .header-logo:hover,
#header-component .header__heading-link:hover {
  transform: translateY(-2px);
}

#header-component .header-logo:hover img,
#header-component .header__heading-link:hover img {
  filter: drop-shadow(0 0 5px rgba(196,154,69,.9))
          drop-shadow(0 0 13px rgba(196,154,69,.42));
  transform: scale(1.035);
}

#header-component .header-logo::after,
#header-component .header__heading-link::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fk-gold), transparent);
  opacity: .8;
  pointer-events: none;
}

/* Announcement / top bar */
.announcement-bar,
.utility-bar,
.announcement-bar__message {
  background: var(--fk-wine) !important;
  color: var(--fk-ivory) !important;
}

.announcement-bar *,
.utility-bar * {
  color: var(--fk-ivory) !important;
}

/* MEGA MENU — luxury wine panel */
#header-component .menu-list__submenu,
#header-component .mega-menu,
#header-component .mega-menu__content,
#header-component .header__submenu {
  background:
    radial-gradient(circle at 88% 8%, rgba(243,223,166,.13), transparent 28%),
    linear-gradient(135deg, var(--fk-wine-deep), var(--fk-wine), #5A1733) !important;
  color: var(--fk-ivory) !important;
  border: 1px solid rgba(196,154,69,.55) !important;
  border-top: 2px solid var(--fk-gold) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 20px 48px rgba(43,7,24,.25) !important;
  overflow: hidden;
}

#header-component .menu-list__submenu a,
#header-component .mega-menu a,
#header-component .header__submenu a {
  color: #FFF9E8 !important;
  text-decoration: none !important;
}

/* Category/column headings */
#header-component .mega-menu__heading,
#header-component .mega-menu__link--parent,
#header-component .mega-menu__link--level-2,
#header-component .menu-list__submenu .menu-list__link--parent {
  color: var(--fk-gold-light) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  padding-bottom: 9px !important;
  border-bottom: 1px solid rgba(243,223,166,.32);
}

/* Category columns: subtle separators and spacing */
#header-component .mega-menu__column,
#header-component .mega-menu__grid > *,
#header-component .mega-menu__content-list > * {
  padding-inline: 12px;
}

#header-component .mega-menu__column + .mega-menu__column,
#header-component .mega-menu__grid > * + * {
  border-inline-start: 1px solid rgba(243,223,166,.16);
}

/* Subcategory links */
#header-component .mega-menu__link:not(.mega-menu__link--parent):not(.mega-menu__link--level-2),
#header-component .menu-list__submenu .menu-list__link,
#header-component .header__submenu a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 10px !important;
  margin: 2px 0;
  border-radius: 7px;
  font-size: 14px !important;
  transition: color .22s ease, background .22s ease,
    padding-inline-start .22s ease, transform .22s ease !important;
}

#header-component .mega-menu__link:not(.mega-menu__link--parent):not(.mega-menu__link--level-2)::before,
#header-component .menu-list__submenu .menu-list__link::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin-inline-end: 9px;
  border-radius: 50%;
  background: var(--fk-gold);
  transition: transform .22s ease, box-shadow .22s ease;
}

#header-component .mega-menu__link:hover,
#header-component .menu-list__submenu .menu-list__link:hover,
#header-component .header__submenu a:hover {
  color: #FFFFFF !important;
  background: linear-gradient(90deg, rgba(196,154,69,.23), rgba(196,154,69,.06)) !important;
  padding-inline-start: 16px !important;
  box-shadow: inset 3px 0 0 var(--fk-gold);
}

#header-component .mega-menu__link:hover::before,
#header-component .menu-list__submenu .menu-list__link:hover::before {
  transform: scale(1.5);
  box-shadow: 0 0 8px var(--fk-gold);
}

/* Dropdown entrance and gold shimmer */
#header-component .mega-menu,
#header-component .menu-list__submenu,
#header-component .mega-menu__content {
  transform-origin: top center;
  animation: fkIvoryMenuIn .32s ease-out both;
}

@keyframes fkIvoryMenuIn {
  from { opacity: 0; transform: translateY(-9px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#header-component .mega-menu::before,
#header-component .menu-list__submenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFF4CF, var(--fk-gold), transparent);
  animation: fkIvoryGoldSweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fkIvoryGoldSweep {
  0% { transform: translateX(0); opacity: 0; }
  15%, 70% { opacity: 1; }
  100% { transform: translateX(470%); opacity: 0; }
}

/* FOOTER — matching ivory and gold */
#shopify-section-footer,
#shopify-section-footer .footer,
#shopify-section-footer .footer__content-top,
#shopify-section-footer .footer__content-bottom,
#shopify-section-footer .footer__content-bottom-wrapper {
  background: var(--fk-ivory) !important;
  background-color: var(--fk-ivory) !important;
  background-image: none !important;
}

#shopify-section-footer,
#shopify-section-footer p,
#shopify-section-footer a,
#shopify-section-footer li,
#shopify-section-footer span {
  color: var(--fk-ink) !important;
}

#shopify-section-footer h2,
#shopify-section-footer h3,
#shopify-section-footer .footer-block__heading {
  color: #A47732 !important;
}

#shopify-section-footer .footer__content-bottom,
#shopify-section-footer .footer__blocks-wrapper {
  border-color: rgba(196,154,69,.45) !important;
}

/* Product and collection cards — clean ivory surfaces */
.product-card,
.collection-card,
.product-card__content,
.collection-card__content {
  border-color: rgba(196,154,69,.22);
}

.product-card:hover,
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(74,16,40,.10);
}

/* Floating chat widget stays above theme elements */
#shopify-chat,
.shopify-chat,
.chat-widget,
iframe[title*="chat" i] {
  z-index: 9999;
}

/* Mobile: keep menus compact and animations light */
@media screen and (max-width: 749px) {
  #header-component .menu-list__submenu,
  #header-component .mega-menu,
  #header-component .mega-menu__content {
    border-radius: 0 0 13px 13px !important;
  }

  #header-component .mega-menu__column,
  #header-component .mega-menu__grid > * {
    border-inline-start: 0 !important;
    padding-inline: 8px;
  }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #header-component .mega-menu,
  #header-component .menu-list__submenu,
  #header-component .mega-menu__content,
  #header-component .mega-menu::before,
  #header-component .menu-list__submenu::before {
    animation: none !important;
    transition: none !important;
  }

  #header-component .header-logo,
  #header-component .header__heading-link,
  #header-component .header-logo img,
  #header-component .header__heading-logo {
    transition: none !important;
  }
}
/* FASHION KING BY URVASHI — FOOTER COLOR FIX
   Paste this at the VERY END of Assets/base.css
   Targets the custom Royal Footer section (.fk-footer), not just Shopify's default footer.
*/

:root {
  --fk-footer-bg: #FFFFF0;
  --fk-footer-text: #35251E;
  --fk-footer-heading: #4A1028;
  --fk-footer-gold: #C49A45;
}

/* Custom Royal Footer — main and bottom areas */
footer.fk-footer,
.fk-footer,
.fk-footer .fk-footer__main,
.fk-footer .fk-footer__bottom,
.fk-footer .fk-footer__bottom-inner {
  background: var(--fk-footer-bg) !important;
  background-color: var(--fk-footer-bg) !important;
  background-image: none !important;
  color: var(--fk-footer-text) !important;
}

/* Remove any dark overlay or decorative pseudo backgrounds */
.fk-footer::before,
.fk-footer::after,
.fk-footer__main::before,
.fk-footer__main::after,
.fk-footer__bottom::before,
.fk-footer__bottom::after {
  background: none !important;
  box-shadow: none !important;
}

/* All footer text and links */
.fk-footer p,
.fk-footer span,
.fk-footer li,
.fk-footer a,
.fk-footer strong,
.fk-footer small {
  color: var(--fk-footer-text) !important;
}

/* Footer headings */
.fk-footer h1,
.fk-footer h2,
.fk-footer h3,
.fk-footer h4,
.fk-footer .fk-footer__heading,
.fk-footer .fk-footer__title {
  color: var(--fk-footer-heading) !important;
}

/* Gold separators, icons and hover */
.fk-footer hr,
.fk-footer .fk-footer__divider {
  border-color: rgba(196,154,69,.45) !important;
}

.fk-footer svg,
.fk-footer .icon {
  color: var(--fk-footer-gold) !important;
  fill: none;
}

.fk-footer a {
  text-decoration-color: transparent !important;
  transition: color .2s ease, padding-left .2s ease !important;
}

.fk-footer a:hover {
  color: #A47732 !important;
}

/* Newsletter and footer form fields */
.fk-footer input,
.fk-footer select,
.fk-footer textarea {
  background: #FFFEF7 !important;
  color: var(--fk-footer-text) !important;
  border: 1px solid rgba(196,154,69,.65) !important;
}

.fk-footer button,
.fk-footer .button {
  background: linear-gradient(115deg,#4A1028,#681D3B) !important;
  color: #FFFFF0 !important;
  border: 1px solid #C49A45 !important;
}

.fk-footer button:hover,
.fk-footer .button:hover {
  background: linear-gradient(115deg,#C49A45,#F3DFA6) !important;
  color: #2B0718 !important;
}

/* Shopify default footer, if it is also enabled */
#shopify-section-footer,
#shopify-section-footer .footer,
#shopify-section-footer .footer__content-top,
#shopify-section-footer .footer__content-bottom {
  background: #FFFFF0 !important;
  background-color: #FFFFF0 !important;
  background-image: none !important;
  color: #35251E !important;
}

#shopify-section-footer a,
#shopify-section-footer p,
#shopify-section-footer span,
#shopify-section-footer li {
  color: #35251E !important;
}

#shopify-section-footer h2,
#shopify-section-footer h3,
#shopify-section-footer .footer-block__heading {
  color: #4A1028 !important;
}