/** Critical CSS for the theme. This file is included on every page. */

/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
}

html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
  overflow: hidden;
}

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

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

select {
  background-color: var(--color-background);
  color: currentcolor;
}

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

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

p:empty {
  display: none;
}

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

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

/** Theme styles below */
body {
  font-family: var(--font-primary--family);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/** Section layout utilities */

.shopify-section {
  /* Removed CSS grid constraints to allow Tailwind full-width layouts. */
  width: 100%;
}

/** BUCKS Currency Converter Styling */
span.money {
  display: inline-block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: inherit;
  font-weight: inherit;
}

/** Make BUCKS inline dropdown look like the native language selector */
.buckscc-currency-box {
  display: flex !important;
  align-items: center !important;
}

.buckscc-currency-box select, 
.buckscc-currency-box .bucks-dropdown-btn {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px !important;
  padding: 0.5rem 2rem 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 0.75rem !important;
}

.buckscc-currency-box select:hover,
.buckscc-currency-box .bucks-dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.buckscc-currency-box select option {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* ===== BUCKS Currency Converter - Floating Widget Fix ===== */
@media (max-width: 1023px) {
  /* Targets various possible wrappers of the BUCKS floating widget */
  #bucks-app-wrapper,
  .bucks-app-wrapper,
  #buckscc-app-wrapper,
  .buckscc-app-wrapper,
  .bucksMobile,
  div[class*="bucks-position-bottom"] {
    bottom: 85px !important;
    transition: bottom 0.3s ease !important;
  }
}