/** Shopify CDN: Minification failed

Line 3710:6 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;
      font-family: var(--font-serif) !important;
}

:root {
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right 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)));
  }
}

.page-wrapper--drawer-open {
  margin-right: 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);
   font-family: var(--font-serif) !important;
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
   font-family: var(--font-serif) !important;
}

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

.product-card__content {
  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;
   font-family: var(--font-serif) !important;
}
p{
   font-family: var(--font-serif) !important;
}

.details__header{
  font-family: var(--font-serif) !important;
}
button{
  font-family: var(--font-serif) !important;
}
.menu-list__link-title{
  font-family: var(--font-serif) !important;
}
.tit{
   font-family: var(--font-serif) !important;
}

.paragraph a{
  font-family: var(--font-serif) !important;
  text-decoration:none !important;
}
.paragraph a:hover{
  color:white;
}
h4 a{
  color:white !important;
}

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

p:empty {
  display: none;
   font-family: var(--font-serif) !important;
}

: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 */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.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,
.page-width-content {
  /* 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;
  }
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* 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-left: var(--page-margin);
    padding-right: 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;
  }
}

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

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

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

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

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.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;
  top: var(--margin-lg);
  right: var(--margin-lg);
  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%;
}

/* 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);
}

.spacing-style,
.inherit-spacing {
  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: left;
  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);
  left: 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%;
  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%;
  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;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  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 */

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@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__content:empty {
  display: none;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 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 */
    :is(.spacing-style, .inherit-spacing) {
      --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);
  }
}




















/* new css adedd start */

/* ==========================================================================
   1. GLOBAL STYLES & VARIABLES
   ========================================================================== */
:root {
  --primary-color: #9e5b32;
  --primary-hover: #804724;
  --text-dark: #222222;
  --text-muted: #666666;
  --bg-light: #fdfbf7;
  --bg-dark: #1e1e1e;
  --border-color: #e5dfd5;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition-smooth: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

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



h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  letter-spacing: 0.05em;
  margin-top: 0;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

/* Container Spacing & Reset */
.site-main-wrapper {
  overflow-x: hidden;
}

/* ==========================================================================
   2. REUSABLE COMPONENTS & BUTTONS
   ========================================================================== */
.section-title {
  text-transform: uppercase;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1.75rem;
}

.btn-custom-primary {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 0.6rem 1.6rem;
  border-radius: 0;
  border: 1px solid var(--primary-color);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: var(--transition-smooth);
}

.btn-custom-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #ffffff;
}

.btn-custom-outline {
  background-color: transparent;
  color: var(--text-dark);
  padding: 0.6rem 1.6rem;
  border: 1px solid var(--text-dark);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: var(--transition-smooth);
}

.btn-custom-outline:hover {
  background-color: var(--text-dark);
  color: #ffffff;
}

/* Uniform Image Ratios (Prevents Stretching) */
.img-aspect-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f4f0eb;
}

.img-aspect-3-4 {
  padding-bottom: 133.33%; /* 3:4 Aspect Ratio */
}

.img-aspect-16-9 {
      padding-bottom: 42%;
}

.img-aspect-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.img-aspect-container:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   3. HEADER & ANNOUNCEMENT BAR
   ========================================================================== */
.top-announcement-bar {
  background-color: var(--primary-color);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 0.4rem 0;
  text-align: center;
  letter-spacing: 0.05em;
}

.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header .nav-link {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
}

.site-header .nav-link:hover {
  color: var(--primary-color);
}

/* ==========================================================================
   4. HERO BANNER SLIDER
   ========================================================================== */
.hero-slider-section {
  position: relative;
}

.hero-slider-section .swiper-slide {
  position: relative;
  overflow: hidden;
}

.hero-content-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
  max-width: 700px;
  color: var(--text-dark);
}

.hero-content-overlay h2 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color:white;
}

/* ==========================================================================
   5. ANNOUNCEMENT STRIP SECTION
   ========================================================================== */
.announcement-strip {
  background-color: var(--bg-light);
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.announcement-strip p {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   6. PRODUCT CARDS & CAROUSELS
   ========================================================================== */
.product-card {
  position: relative;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border: none;
  margin-bottom: 1rem;
  background:white;
}

.product-card .badge-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--primary-color);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  z-index: 2;
  text-transform: uppercase;
}

.product-card .product-title {
  font-size: 0.95rem;
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
  font-weight: 500;
  color: var(--text-dark);
}

.product-card .product-price {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.product-card .rating {
  font-size: 0.75rem;
  color: #ffb400;
}

.product-card .btn-sm{
  background-color:#9e5b32 ;
  color:white;
}

/* Swiper Navigation Customization */
.swiper-button-next,
.swiper-button-prev {
  color: var(--text-dark);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1rem;
  font-weight: bold;
}

/* ==========================================================================
   7. CATEGORY GRID SECTION (THE WINTER EDIT)
   ========================================================================== */
.category-grid-card {
  position: relative;
  overflow: hidden;
}

.category-grid-card .overlay-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #ffffff;
  z-index: 2;
}

.category-grid-card .overlay-content h4 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* ==========================================================================
   8. VALUE PROPOSITIONS / FEATURES STRIP
   ========================================================================== */
.features-strip {
  background-color: var(--bg-light);
  padding: 2.5rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.feature-item {
  text-align: center;
  padding: 0 1rem;
}

.feature-item svg, .feature-item img {
  width: 36px;
  height: 36px;
  margin-bottom: 0.75rem;
  fill: var(--primary-color);
}

.feature-item h6 {
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.feature-item p {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   9. TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-section {
  background-color: var(--bg-dark);
  color: #ffffff;
  padding: 4rem 0;
}

.testimonial-card {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
  padding: 0 1rem;
}

.testimonial-card p {
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.testimonial-card .author {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color);
}

/* ==========================================================================
   10. FAQ ACCORDION SECTION
   ========================================================================== */
.faq-section {
  padding: 4rem 0;
  max-width: 800px;
  margin: 0 auto;
}

.new__faq___added___ .faq-header .main-heading{
  font-size:2.5rem;
  font-weight:700;
}
.new__faq___added___ .faq-header span{
  color:#9e5b32;
}



.faq-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
}

.faq-accordion .accordion-button {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-dark);
  background: transparent;
  box-shadow: none;
  padding: 1.2rem 0;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: transparent;
}

.faq-accordion .accordion-body {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-top: 0;
  padding-bottom: 1.2rem;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--bg-dark);
  color: #d1d1d1;
  padding: 4rem 0 2rem 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.site-footer h5 {
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
}

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

.site-footer ul li {
  margin-bottom: 0.6rem;
}

.site-footer a {
  color: #a0a0a0;
}

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

.copyright-bar {
  border-top: 1px solid #333333;
  margin-top: 3rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: #777777;
}

/* ==========================================================================
   12. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 991.98px) {
  .hero-content-overlay h2 {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .section-title {
    font-size: 1.4rem;
  }
  
  .hero-content-overlay h2 {
    font-size: 1.5rem;
  }
  
  .btn-custom-primary, .btn-custom-outline {
    padding: 0.5rem 1.2rem;
    font-size: 0.75rem;
  }
}




:root {
  --primary-brand: #9e5b32;
  --primary-light-bg: rgba(158, 91, 50, 0.08);
  --primary-hover-bg: rgba(158, 91, 50, 0.15);
  --custom-card-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/* Base Section */
.category-section {
  padding-left: 32px;
  padding-right: 32px;
}

/* Header Adjustments */
.category-section .sub-badge {
  background-color: var(--primary-light-bg);
  color: var(--primary-brand);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 18px;
  border-radius: 50px;
}

.category-section .main-heading {
  font-size: 2.5rem;
  line-height: 1.15;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}

.category-section .main-heading span{
  color:#9e5b32;
}

.category-section .view-all-btn {
  color: var(--primary-brand);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 50px;
  background-color: #ffffff;
  border: 1px solid rgba(158, 91, 50, 0.25);
  box-shadow: 0 4px 12px rgba(158, 91, 50, 0.08);
  transition: all 0.3s ease;
}

.category-section .view-all-btn:hover {
  background-color: var(--primary-brand);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Grid Layout */
.category-section .category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* Card Styling */
.category-section .category-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
}

.category-section .category-card:hover {
  transform: translateY(-8px);
  box-shadow: rgba(0, 0, 0, 0.22) 0px 16px 44px 0px, rgba(158, 91, 50, 0.2) 0px 0px 0px 2px;
}

.category-section .card-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.category-section .card-image-wrap img {

  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.category-card:hover .card-image-wrap img {
  transform: scale(1.08);
}

/* Bottom Card Content Box */
.category-section .card-content {
  padding: 20px 22px;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

 .category-section .card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--primary-light-bg);
  color: var(--primary-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.category-card:hover .card-icon-box {
  background-color: var(--primary-brand);
  color: #ffffff;
}

.category-section .card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.category-section .card-subtitle {
  font-size: 13px;
  color: #777777;
  font-weight: 500;
}

.category-section .card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease;
}

.category-section .category-card:hover .card-arrow {
  background-color: var(--primary-brand);
  color: #ffffff;
  transform: rotate(45deg);
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .category-section .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
 .category-section .category-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .category-section .main-heading {
    font-size: 2.25rem;
  }

 .category-section .category-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }

 .category-section .card-content {
    padding: 16px;
  }

 .category-section .card-title {
    font-size: 18px;
  }
}




















:root {
  --primary-color: #ca6969;
  --primary-hover: #b95757;
  --dark-color: #0e0f00;
  --glass-bg: rgba(15, 15, 15, 0.45);
  --glass-border: rgba(255, 255, 255, 0.15);
}

.hero-banner-section {
  width: 100%;
  padding: 12px 20px;
  overflow: hidden;
}

.hero-slider {
  border-radius: 28px;
  overflow: hidden;
}

.hero-card {
  position: relative;
  height: 700px;
  width: 100%;
  overflow: hidden;
}

/* Dynamic Image Zoom */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 7s cubic-bezier(0.25, 1, 0.5, 1);
}

.swiper-slide-active .hero-img {
  transform: scale(1.08);
}

/* Gradient Overlay */
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 80%
  );
  z-index: 1;
}

/* Content & Glassmorphism Backdrop */
.hero-card-overlay {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 520px;
}

.hero-content {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 4px solid var(--glass-border);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Entrance Animations */
.hero-badge,
.hero-title,
.hero-features-list,
.hero-cta-group {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-cta-group .btn-primary{
  background:#9e5b32;
  border-color:#9e5b32;
  PADDING: 0.3rem 1rem ! IMPORTANT;
}

.swiper-slide-active .hero-badge {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.swiper-slide-active .hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.swiper-slide-active .hero-features-list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.swiper-slide-active .hero-cta-group {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

/* Typography & Badges */
.hero-badge {
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.hero-title {
  color: #fff;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}

/* Features List */
.hero-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #f0f0f0;
  font-size: 16px;
  font-weight: 500;
}

.icon-box {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

/* Buttons */
.hero-cta-group {
  display: flex;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s ease;
}

hero-banner-section .btn-primary {
  background: var(--dark-color);
  color: #fff;
  border: 1px solid var(--dark-color);
}

hero-banner-section .btn-primary:hover {
  background: #222310;
  transform: translateY(-2px);
}

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

.btn-secondary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

/* Swiper Navigation Customization */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: all 0.3s ease;
}

.hero-slider .swiper-button-next:after,
.hero-slider .swiper-button-prev:after {
  font-size: 16px;
}

.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
  background: #fff;
  color: #000;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .hero-card {
    height: 580px;
  }

  .hero-card-overlay {
    left: 16px;
    right: 16px;
    max-width: 100%;
  }

  .hero-content {
    padding: 24px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-cta-group {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}
















.cta___section .hero-content-overlay{
 background: #8080808c;
}


.cta___section .hero-content-overlay .btn-custom-primary{
 background: #9e5b32;
 color:white;
}
















.price, .compare-at-price, .unit-price {
    white-space: nowrap;
     color:#9e5b32;
}

.resource-list__item .product-card__content{
  border-radius: 0.6rem;
}









/* Base Container */
.blog__section____new {
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #222;
  box-sizing: border-box;
}

.blog__section____new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog__section____new a {
  color: inherit;
  text-decoration: none;
  font-size: 1.2rem;
}

.blog__section____new a:hover {
  text-decoration: underline;
}

/* Category Badges */
.blog__section____new .category {
 font-size: 1.4rem;
  font-weight: 700;
  color: #9e5b32;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
  display: inline-block;
}

.blog__section____new .date {
  font-size: 1rem;
  color: #888;
  display: block;
  margin-top: 4px;
}

/* --- Top Layout Grid --- */
.blog-hero-grid {
  display: grid;
  grid-template-columns: 2fr 5fr 3fr;
  gap: 24px;
  margin-bottom: 40px;
}

/* Left Column */
.col-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid #eee;
  padding-right: 20px;
}

.col-left .post-card.small .img-wrapper {
  height: 140px;
  margin-bottom: 10px;
}

.col-left h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 6px 0 2px 0;
  line-height: 1.3;
}

/* Center Column */
.col-center {
  border-right: 1px solid #eee;
  padding-right: 20px;
}

.col-center .hero .img-wrapper {
  height: 320px;
  margin-bottom: 16px;
}

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

.col-center h2 {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 8px 0;
  line-height: 1.2;
}

.col-center .excerpt {
  font-size: 0.85rem;
  color: #666;
  margin: 8px 0 12px 0;
  line-height: 1.5;
}

.col-center .meta {
  font-size: 0.75rem;
  color: #777;
}

/* Right Column (Sidebar) */
.col-right .sidebar-header {
  border-bottom: 2px solid #222;
  margin-bottom: 15px;
  padding-bottom: 4px;
}

.col-right .sidebar-header h4 {
  font-size: 0.75rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 1px;
}

.sidebar-post {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.sidebar-post:last-child {
  border-bottom: none;
}

.sidebar-post .text h5 {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.sidebar-post .thumb {
  width: 65px;
  height: 55px;
  flex-shrink: 0;
}

/* --- Section Header --- */
.section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #9e5b32;
  margin-bottom: 20px;
  padding-bottom: 6px;
}

.section-header h3 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 1px;
  color: #9e5b32;
}

.section-header .view-all {
  font-size: 1rem;
  color: #9e5b32;
  font-weight: 600;
}
.category____bannerr___new {
  height: 70vh;
  overflow: hidden;
  position: relative;
}

.category____bannerr___new img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.collection-banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
}

.collection-heading {
  color: #ffffff;
  margin: 0;
  font-size: 9rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.collection-description {
  color: #000;
}
/* --- Bottom 4-Column Grid --- */
.blog-grid-4 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.blog-grid-4 .img-wrapper {
  height: 160px;
  margin-bottom: 12px;
}

.blog-grid-4 h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 6px 0 4px 0;
  line-height: 1.3;
}

.blog-grid-4 .excerpt {
     font-size: 1rem;


  color: #666;
  margin-top: 8px;
  line-height: 1.4;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .blog-hero-grid {
    grid-template-columns: 1fr;
  }

  .col-left, .col-center {
    border-right: none;
    padding-right: 0;
  }

  .blog-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .blog-grid-4 {
    grid-template-columns: 1fr;
  }
}

.blog-grid-4 .post-card{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding:0.8rem;
  border-radius:0.3rem;
}



:root {
  --faq-theme: #9e5b32;
  --faq-bg-light: #f7f9fa;
  --faq-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* Base Styles */
.new__faq___added___ {
  background-color: #ffffff;
  font-family: inherit;
}

.new__faq___added___ .main-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.new__faq___added___ .subtitle {
  font-size: 1.1rem;
  color: #666666;
  max-width: 680px;
  margin: 0 auto;
}

/* 2-Column Grid Layout */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.faq-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card Style & Box Shadow */
.faq-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: var(--faq-shadow);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Accordion Toggle Header */
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background-color: var(--faq-bg-light);
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333333;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.faq-toggle span:first-child {
  padding-right: 15px;
}

.toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--faq-theme);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* Active State Styles */
.faq-card.active .faq-toggle {
  background-color: var(--faq-theme);
  color: #ffffff;
}

.faq-card.active .toggle-icon {
  transform: rotate(45deg);
  background-color: #ffffff;
  color: var(--faq-theme);
}

/* Smooth Accordion Content Animation */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
  background-color: #ffffff;
}

.faq-card.active .faq-content {
  max-height: 500px;
  transition: max-height 0.4s cubic-bezier(0.5, 0, 1, 0);
}

.faq-inner {
  padding: 20px 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: #555555;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.faq-inner p {
  margin: 0;
}

/* Bottom Promo Banner */
.faq-promo-banner {
  background: linear-gradient(135deg, var(--faq-theme) 0%, #7d4422 100%);
  border-radius: 20px;
  padding: 40px 50px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--faq-shadow);
  position: relative;
  overflow: hidden;
}

.promo-content {
  max-width: 550px;
  z-index: 2;
}

.promo-content h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}

.promo-content p {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 24px;
  color: #ffffff;
}

.promo-btn {
  display: inline-block;
  background-color: #ffffff;
  color: var(--faq-theme);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  color: var(--faq-theme);
}

.promo-image-wrap {
  width: 320px;
  z-index: 2;
}

.promo-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-promo-banner {
    flex-direction: column;
    text-align: center;
    padding: 30px 24px;
  }

  .promo-content {
    max-width: 100%;
    margin-bottom: 24px;
  }

  .promo-image-wrap {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 576px) {
  .new__faq___added___ .main-heading {
    font-size: 2rem;
  }

  .faq-toggle {
    font-size: 1rem;
    padding: 16px;
  }

  .promo-content h3 {
    font-size: 1.5rem;
  }
}





.product-media-container.media-fit img {
    object-fit: contain !important;
}







/* Base Section Setup */
.slider___added__Section__new {
  padding: 0px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #ffffff;
  color: #111111;
}

/* Header Controls */
.slider___added__Section__new .gender-toggle-wrapper {
  background-color: #434343;
  padding: 3px;
  border-radius: 30px;
  display: inline-flex;
}

.slider___added__Section__new .btn-toggle {
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 22px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider___added__Section__new .btn-toggle.active {
  background-color: #e5e5e5;
  color: #111111;
  font-weight: 600;
}

.slider___added__Section__new .btn-shop-now {
  background-color: #0f150a;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.slider___added__Section__new .btn-shop-now:hover {
  opacity: 0.9;
  color: #ffffff;
}

.slider___added__Section__new .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #111111;
}

.section-title span{
  color:#9e5b32;
}

/* Product Card */
.slider___added__Section__new .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border:2px solid #9e5b32;
  border-radius: 0.3rem;
}

.slider___added__Section__new .img-wrapper {
  position: relative;
  background-color: #f7f7f7;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.slider___added__Section__new .img-wrapper img {
  object-fit: fill;
  object-position: center;
  width: 100%;
  height: 100%;
}

.slider___added__Section__new .badge-discount {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #000000;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 2;
}

/* Product Typography */
.slider___added__Section__new .product-info {
  text-align:left;
  padding-left:1rem;
}

.slider___added__Section__new .product-name {
  font-size: 1rem;
  font-weight: 600;
  color: #111111;
  margin: 0;
  line-height: 1.3;
      padding: 0.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slider___added__Section__new .product-color {
  font-size: 1rem;
  color: #707070;
  margin: 0;
  line-height: 1.2;
}

.slider___added__Section__new .price-box {
  margin-top: 4px;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
}

.slider___added__Section__new .price-old {
  color: #999999;
  text-decoration: line-through;
  font-weight: 400;
}

.slider___added__Section__new .price-current {
 color: #9e5b32;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Swiper Adjustments */
.slider___added__Section__new .swiper {
  width: 100%;
  padding-bottom: 40px; /* Space for pagination dots */
      padding-top: 1rem;
}

.slider___added__Section__new .swiper-slide {
  height: auto; /* Ensures cards match height across the row */
}

/* Custom Swiper Controls (Optional Dark Theme) */
.slider___added__Section__new .swiper-button-next,
.slider___added__Section__new .swiper-button-prev {
      color: #9e5b32;
      display:none;
}

.slider___added__Section__new .swiper-pagination-bullet-active {
  background-color: #111111;
}

.cta___section .hero-content-overlay{
 position: absolute;
    top: 76%;
    /* right: -78rem; */
    left: 39rem;
    transform: translateY(-50%);
    z-index: 5;
  width:100%;

}

 /* Base Layout & Heights */
.more__atractive__section___ {
  padding: 10px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.more__atractive__section___ .heading h2{
  font-size: 2.5rem;
    font-weight: 700;
  color:black;
}
.more__atractive__section___ .heading span{
  color:#9e5b32;
}

.more__atractive__section___ .banner-card {
  display: flex;
  width: 100%;
  background-color: #222222;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
      border-radius: 0.5rem;
  
}

.more__atractive__section___ .banner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.more__atractive__section___ .banner-card:hover .banner-img {
  transform: scale(1.05);
}

.more__atractive__section___ .banner-large {
  min-height: 460px;
}

.more__atractive__section___ .banner-small {
  min-height: 220px;
}

.more__atractive__section___ .banner-wide {
  min-height: 224px;
}

/* Image Wrapper Positioning & Zoom Effect */
.more__atractive__section___ .banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 0;
  transition: transform 0.5s ease;
}

/* Dark Gradient Overlays for High Text Contrast */
.more__atractive__section___ .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Darkens right side for right-aligned text
.more__atractive__section___ .overlay-right {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.1) 100%);
}

/* Darkens left side for left-aligned text */
/* .more__atractive__section___ .overlay-left {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.1) 100%);
} */ */

/* Overlay & Text Placement */
.more__atractive__section___ .banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Prevents text blending */
}

.more__atractive__section___ .content-right {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
  max-width: 60%;
}

.more__atractive__section___ .content-left {
  align-items: flex-start;
  text-align: left;
  max-width: 65%;
}

/* Badges & Color Enhancements */
.more__atractive__section___ .badge-discount {
  background-color: #2563eb;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.more__atractive__section___ .badge-pill {
  color: #38bdf8;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.more__atractive__section___ .text-white-80 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.more__atractive__section___ .tracking-wider {
  letter-spacing: 1.5px;
}

/* Interactive Button Effects */
.more__atractive__section___ .btn-light:hover {
  background-color: #ffffff;
  color: #000000;
  transform: translateY(-2px);
}

.more__atractive__section___ .btn-link-text {
  transition: all 0.3s ease;
  display: inline-block;
}

.more__atractive__section___ .btn-link-text:hover {
  transform: translateX(4px);
  color: #38bdf8 !important;
}

/* Responsive Handling */
@media (max-width: 991.98px) {
  .more__atractive__section___ .banner-large {
    min-height: 380px;
  }
}

@media (max-width: 575.98px) {
  .more__atractive__section___ .content-right,
  .more__atractive__section___ .content-left {
    max-width: 100%;
  }

  .more__atractive__section___ .overlay-right,
  .more__atractive__section___ .overlay-left {
    background: rgba(0, 0, 0, 0.65); /* Full dark overlay on small screens */
  }
}




/* Main Parent Container */
.second__banerr_new__design__many____ {
      width: 100%;
    position: relative;
    padding: 24px 31px;
    z-index: 3;
    margin-top: -8rem;
    box-sizing: border-box;

}

/* Horizontal Wrapper */
.second__banerr_new__design__many____ .circle-category-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
padding-left: 1rem;

    padding-right: 1rem;
 margin: 0 5rem;
  background: white;
  overflow-x: auto;
  border-radius:0.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* Hide scrollbar for clean UI */
.second__banerr_new__design__many____ .circle-category-container::-webkit-scrollbar {
  display: none;
}
.second__banerr_new__design__many____ .circle-category-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Individual Item Card */
.second__banerr_new__design__many____ .circle-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
      gap: 10px;
  width: 271px;
}

/* Circular Image Container */
.second__banerr_new__design__many____ .circle-img-wrapper {


      border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
      padding: 0rem 1rem;
    display: flex;
    border: 2px solid #9e5b32;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.second__banerr_new__design__many____ .circle-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-height: 12rem;
  min-height: 12rem;
}

/* Black Sale Circle Variant */
.second__banerr_new__design__many____ .circle-sale-badge {
  background-color: #111111;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Title Styling */
.second__banerr_new__design__many____ .circle-category-title {
  font-size: 17px;
    font-weight: 700;

  color: #9e5b32;

  text-align: center;
  transition: color 0.2s ease;
}

/* Hover Effects */
.second__banerr_new__design__many____ .circle-category-item:hover .circle-img-wrapper {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.second__banerr_new__design__many____ .circle-category-item:hover .circle-category-title {
  color: #000000;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .second__banerr_new__design__many____ {
   padding: 41px 0px 0px 0px;
  }

  .second__banerr_new__design__many____ .circle-category-container {
    justify-content: flex-start;
    gap: 16px;
  }

  .second__banerr_new__design__many____ .circle-category-item {
    width: 75px;
  }

  .second__banerr_new__design__many____ .circle-img-wrapper {
    width: 68px;
    height: 68px;
  }

  .second__banerr_new__design__many____ .circle-category-title {
    font-size: 12px;
  }
}


.btn{
      border-radius: 1.25rem !important;
      padding: .375rem 1.75rem !important;

}


.announcement-bar__text{
   padding-top:0.5rem;
}






/* Scoped to parent class */
.new__new__uniq___section____ {
  position: relative;
  overflow: hidden;
}

.new__new__uniq___section____ .manu____ h2{
  font-size:2.5rem;
  color:black;
  font-weight:700;
}
.new__new__uniq___section____ .manu____ span{
  color:#9e5b32;
}

/* Base Card Styling */
.new__new__uniq___section____ .promo-card {
  position: relative;
  background-color: #f7f9fa;
  border-radius: 24px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 45px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.new__new__uniq___section____ .promo-card:hover {
  transform: translateY(-6px);
  box-shadow: rgba(0, 0, 0, 0.45) 0px 12px 28px;
}

/* Left Content Area */
.new__new__uniq___section____ .promo-content {
  position: relative;
  z-index: 3;
  max-width: 55%;
}

.new__new__uniq___section____ .promo-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9e5b32;
  margin-bottom: 12px;
}

.new__new__uniq___section____ .promo-heading {
  font-size: 2.3rem;
  line-height: 1.15;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 24px;
}

.new__new__uniq___section____ .highlight-text {
  color: #9e5b32;
}

/* Call to Action Buttons */
.new__new__uniq___section____ .promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #9e5b32;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
padding: .375rem 1.75rem !important;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(158, 91, 50, 0.3);
  transition: all 0.3s ease;
}

.new__new__uniq___section____ .promo-btn:hover {
  background-color: #834723;
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(158, 91, 50, 0.4);
}

.new__new__uniq___section____ .promo-btn i {
  transition: transform 0.3s ease;
}

.new__new__uniq___section____ .promo-btn:hover i {
  transform: translateX(4px);
}

/* Floating / Pop-out Image Effect (Card 1) */
.new__new__uniq___section____ .promo-card-overflow {
  overflow: visible !important;
  margin-top: 15px; /* Gives room for top overflow */
}

.new__new__uniq___section____ .promo-image-pop {
  position: absolute;
  right: 25px;
  bottom: 0;
  top: -30px; /* Image pops out the top */
  width: 42%;
  z-index: 2;
  pointer-events: none;
}

.new__new__uniq___section____ .promo-image-pop img {
  height: calc(100% + 40px); /* Makes image extend out the bottom */
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 15px 15px rgba(0,0,0,0.15));
  transition: transform 0.4s ease;
}

.new__new__uniq___section____ .promo-card-overflow:hover .promo-image-pop img {
  transform: scale(1.05) translateY(-5px);
}

/* Right Aligned Rack Image (Card 2) */
.new__new__uniq___section____ .promo-card-fit {
  overflow: hidden;
}

.new__new__uniq___section____ .promo-image-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  z-index: 1;
}

.new__new__uniq___section____ .promo-image-right img {
  width: 100%;
  height: 100%;
      object-fit: fill;
  object-position: top;

  transition: transform 0.5s ease;
}

.new__new__uniq___section____ .promo-card-fit:hover .promo-image-right img {
  transform: scale(1.06);
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .new__new__uniq___section____ .promo-heading {
    font-size: 1.9rem;
  }
}

@media (max-width: 991px) {
  .new__new__uniq___section____ .promo-card {
    min-height: 260px;
    padding: 30px;
  }
  
  .new__new__uniq___section____ .promo-content {
    max-width: 60%;
  }

  .new__new__uniq___section____ .promo-image-pop {
    top: -20px;
    width: 38%;
  }
}

@media (max-width: 576px) {
  .new__new__uniq___section____ .promo-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 20px;
    min-height: auto;
  }

  .new__new__uniq___section____ .promo-content {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .new__new__uniq___section____ .promo-heading {
    font-size: 1.6rem;
  }

  .new__new__uniq___section____ .promo-image-pop,
  .new__new__uniq___section____ .promo-image-right {
    position: relative;
    width: 100%;
    height: 200px;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .new__new__uniq___section____ .promo-image-pop img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}





.variant-option--buttons legend, .variant-option--dropdowns>label, .variant-option[data-testid=variant-option-single] {
    color: #000000 !important;
}


.product-grid__card.product-grid__card {
    border: 2px solid #9e5b32;
}

.shopify-section:not(.header-section) :is(.section,.cart-summary) {
    padding-top: 0;
}



@media (min-width: 320px) and (max-width: 992px) {
   .slider___added__Section__new .gender-toggle-wrapper{
    display:none;
   }

   .slider___added__Section__new .btn-shop-now  {
    display:none;
   }

   section.more__atractive__section___.px-5.mx-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    section.blog__section____new.px-5.mx-5{
      margin:0 !important;
      padding:0!important;
    }

    section.new__faq___added___.px-5.mx-5{
      margin:0 !important;
      padding:0!important;
    }

}




.facets--filters-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: rgb(158 91 50) !important;
}

products-count-wrapper .status{
      font-weight: 700;
}

textarea, input:not([type=checkbox],[type=radio]) {
    background-color: rgb(255 255 255);
    border-color: rgb(158 91 50);
    border: 1px solid rgb(158 91 50);
}






.contact__detail___ {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.contact-card {
  position: relative;
  background-color: #fbf9f9;
  border: 1px solid #d3c4b1;
  border-radius: 4px;
  padding: 30px 20px 20px 40px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.contact-card .icon-box {
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: #c46d65;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card .icon-box svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

.contact-card h3 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.contact-card p, 
.contact-card a {
  font-size: 20px !important;
  color: #ffffffff;
  line-height: 1.5;
  text-decoration: none;
  margin: 0;
}

.contact-card a:hover {
  color: #c46d65;
}

/* Responsive adjust for mobile screens */
@media (max-width: 576px) {
  .contact-card {
    padding: 35px 20px 20px 20px;
  }
  
  .contact-card .icon-box {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
  }
}



.product-grid__card.product-grid__card {
    border-radius: 0.2rem;
}

.contact-form{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding:1rem;
  border-radius:0.5rem;
}




.contact__us__new___ {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
  }

  /* Banner Image Styles */
  .contact-banner {
    position: relative;
    width: 100%;
        height: auto; 
    overflow: hidden;
  }

  .contact-banner .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .contact-banner .banner-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
        font-size: 70px;
    font-weight: bold;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }

  /* Form Container Overlaying Effect */
  .contact-content-wrapper {
    max-width: 1500px;  
    margin: -60px auto 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 15px;
  }

  .contact-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 26px;
    display: flex;
    gap: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }

  /* Form Layout */
  .contact-form-side {
    flex: 1.4;
  }

  .contact-form-side h3 {
    color: #9e5b32;
        font-size: 40px;

    margin-bottom: 8px;
  }

  .form-subtext {
    color: #666;
    font-size: 13px;
    margin-bottom: 25px;
    line-height: 1.4;
  }

  .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
  }

  .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  .form-group label {
        font-size: 16px;

    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
  }

  .form-group input, 
  .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;

    font-size: 13px;
    outline: none;
    box-sizing: border-box;
  }

  .form-group textarea {
    border-radius: 12px;
    resize: vertical;
  }

  .phone-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    overflow: hidden;
    padding-left: 12px;
  }

  .phone-input-group .country-code {
    font-size: 13px;
    color: #333;
    font-weight: bold;
    padding-right: 8px;
    border-right: 1px solid #ddd;
  }

  .phone-input-group input {
    border: none;
    border-radius: 0;
  }

  .form-submit-btn {
    text-align: right;
    margin-top: 10px;
  }

  .btn-submit {
    background-color: #9e5b32;
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }

  .btn-submit:hover {
    background-color: #824a27;
  }

  /* Contact Info Side Card */
  .contact-info-side {
    flex: 1;
    background-color: #9e5b32;
    color: #ffffff;
    border-radius: 20px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .contact-info-side h3 {
        font-size: 28px;
    color: white;
    line-height: 1.3;
    margin-bottom: 25px;
  }

  .info-boxes {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .info-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .info-icon {
    font-size: 18px;
  }

  .info-box small {
    display: block;
        font-size: 17px;
    opacity: 0.8;
  }

  .info-box p {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
  }

  .social-connect {
    margin-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
  }

  .social-connect p {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .social-links {
    display: flex;
    gap: 15px;
  }

  .social-links a {
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
  }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .contact-card {
      flex-direction: column;
      padding: 20px;
    }

    .form-row {
      flex-direction: column;
      gap: 0;
    }

    .form-submit-btn {
      text-align: center;
    }

    .btn-submit {
      width: 100%;
    }
  }

  /* Align main form heading and subtext */
.contact-form-side h3,
.form-subtext,
.form-group label {
  text-align: left;
}

/* Align form inputs and textareas to the left */
.form-group input, 
.form-group textarea {
  text-align: left;
}

/* Fix phone input group alignment and contents */
.phone-input-group {
  display: flex;
  align-items: center; /* Changed from align-items: left (invalid CSS) */
  justify-content: flex-start;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  overflow: hidden;
  padding-left: 12px;
}

.phone-input-group input {
  text-align: left;
}

/* Align submit button wrapper to the left */
.form-submit-btn {
  text-align: left;
  margin-top: 10px;
}

/* Align side card content to the left */
.contact-info-side {
  text-align: left;
  align-items: flex-start;
}

.contact-info-side h3 {
  text-align: left;
}

/* Fix individual info box contents alignment */
.info-box {
  display: flex;
  align-items: center; /* Changed from align-items: left (invalid CSS) */
  justify-content: flex-start;
  text-align: left;
}

.info-box div {
  text-align: left;
}

/* Align social media section to the left */
.social-connect {
  text-align: left;
  width: 100%;
}

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

/* Ensure mobile responsive view maintains left alignment */
@media (max-width: 768px) {
  .form-submit-btn {
    text-align: left;
  }
}




.shopify-policy__container {
    max-width: 1462px !important;
   
}


.spacing-style p{
  font-size: 0.9rem !important;
}

details .details__header{
  display:flex;
}

.details-content .text-block p {
  max-width:100%
}


slideshow-container {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgb(157 91 50) 0px 0px 0px 1px;
   
}


.slideshow-controls__thumbnails .slideshow-control {
    width: clamp(90px, 7vw, var(--thumbnail-width)) !important;
 
}

.ai-breadcrumb-ab2fkvvrza0nssulmcaigenblock04af8b3bajb8t {
   
    margin-bottom: 1rem;
    
}








.blog-post-content {
    width: 100% !important;
        max-width: max-content !important;
}

.announcement-bar__text {
  color: white !important;
  display: inline-block;
  white-space: nowrap;
  animation: announcement-marquee 8s linear infinite;
}

@keyframes announcement-marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}


















.wuy___choose_____ {
  padding: 40px 20px;
  background-color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wuy___container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.wuy___card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 24px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.wuy___icon_wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px stroke #4a2c20;
  outline: 1px solid #4a2c20;
  outline-offset: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.wuy___icon {
  width: 32px;
  height: 32px;
  color: #4a2c20;
}

.wuy___card_title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 20px 0;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wuy___card_content {
  background-color: #9e5b32;
  color: #ffffff;
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}

.wuy___card_content p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #f3ece8;
}

.wuy___card_content strong {
  text-decoration: underline;
  color: #ffffff;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
  .wuy___container {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 480px) {
  .wuy___container {
    grid-template-columns: 1fr;
  }
}



.seo____purpose____ {
  padding: 40px 20px;
  background-color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo_container {
  max-width: 1383px;

  margin: 0 auto;
}

/* Header Section */
.seo_header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 36px auto;
}

.seo_title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 12px;
}

.seo_subtitle {
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.6;
}

.seo_subtitle a {
  color: #8c6849;
  text-decoration: underline;
}

/* Grid Layout */
.seo_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Card Styling */
.seo_card {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background-color: #ffffff;
}

.seo_card_alt {
  background-color: #fff9f0; /* Light cream tone for right card */
}

.seo_card_image {
  flex: 0 0 40%;
  max-width: 40%;
}

.seo_card_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.seo_card_content {
  flex: 0 0 60%;
  max-width: 60%;
  padding: 24px 20px;
  box-sizing: border-box;
}

.seo_card_title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 12px 0;
}

.seo_card_intro {
  font-size: 0.85rem;
  color: #444444;
  line-height: 1.5;
  margin-bottom: 16px;
}

.seo_card_subheading {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 12px 0;
}

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

.seo_card_list li {
  font-size: 0.825rem;
  color: #555555;
  line-height: 1.4;
  margin-bottom: 10px;
  position: relative;
  padding-left: 0;
}

.seo_card_list li:last-child {
  margin-bottom: 0;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .seo_grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .seo_card {
    flex-direction: column;
  }
  
  .seo_card_image, 
  .seo_card_content {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .seo_card_image {
    height: 240px;
  }
}



@media (min-width: 320px) and (max-width: 576px) {
  .second__banerr_new__design__many____ .circle-category-container {
        gap: 11px;
    }

.second__banerr_new__design__many____ .circle-category-container {
    margin: 0 0rem;
}

.contact-banner .banner-title {
    font-size: 33px; 
}

}