@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@400;600&family=League+Spartan:wght@600&display=swap');

:root {
  /* Color palette */
  --color-cream: #FAF7F3;        /* Soft section background */

  --accent: #B68B63;       /* Warm tan highlight */
  --text-main: #242121;    /* Body text (deep grey) */
  --text-muted: #6A6A6A;   /* Secondary text */
  --border: #E6E2DD;       /* Borders */

  --btn-dark: #B68B63;    /* warm tan */
  --btn-light: #A2795A;   /* slightly darker on hover */

  --cta-bg: #EAD8C4;         /* soft warm beige */
  --cta-text: #242121;       /* deep grey for readability */





  --color-bg: #F5F2F0;
  --color-surface: #EBDAC6;
  --color-primary: #886644;
  --color-secondary: #A99886;
  --color-accent: #565229;
  --color-text: #303030;

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Cormorant Garamond', serif;
  --font-logo: 'League Spartan', sans-serif;

  --bulma-primary-h: 33deg;
  --bulma-primary-s: 25%;
  --bulma-primary-l: 40%;
  --bulma-link-h: 33deg;
  --bulma-link-s: 25%;
  --bulma-link-l: 40%;
  --bulma-body-background-color: hsl(24, 20%, 95%);
}

/* sorts out mobile navbar positioning */
@media screen and (max-width: 1023px) {
    .navbar-brand {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .navbar-end-mobile {
      display: flex;
      align-items: center;
      margin-left: auto;
    }
}
/* --- */

.is-primary {
    color: #fff;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.button.is-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.button.is-secondary {
  background-color: var(--color-secondary);
  color: #fff;
}

.has-background-cream {
  background-color: var(--color-cream);
}
.has-background-surface {
  background-color: var(--color-surface);
}

.has-background-off-white {
  background-color: var(--color-bg);
}

.has-text-accent {
  color: var(--color-accent);
}

.has-text-color {
  color: var(--color-text-);
}

.has-font-logo {
  font-family: var(--font-logo);
}

.has-font-heading {
  font-family: var(--font-heading);
  color: var(--text-main);
  letter-spacing: 0.5px;
}

.product-image {
  object-fit: contain;      /* zoom/crops to fill the box */
}

/* for the product selection size chips */
/* Container for size options */
.size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Base chip style */
.size-chip {
  border-radius: 9999px;            /* Perfect pill shape */
  min-width: 3rem;                  /* Keeps XS and XL consistent */
  text-align: center;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  border: 2px solid #886644;        /* Primary brown */
  background: var(--cta-bg);              /* Off-white background */
  color: #303030;                   /* Charcoal text */
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Hover/touch feedback */
.size-chip:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

/* Selected state */
.size-chip.selected,
.size-chip:has(input[type="radio"]:checked) {
  background: #886644;              /* Primary brown */
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Hide actual radios inside chips */
.size-chip input[type="radio"] {
  display: none;
}

/* Disabled (out of stock) */
.size-chip.disabled {
  border-color: #ccc;
  background: #f0f0f0;
  color: #999;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

.size-chip.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ---- */

.black-chip {
    background: #262626;
}

.white-chip {
    background: #080808;
}

.color-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.color-chip {
  position: relative;
  border: 2px solid #886644;        /* Primary brown */
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.color-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* Swatch fill */
.color-chip span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  transition: all 0.2s ease;
}

/* Selected state: outer ring */
.color-chip input[type="radio"]:checked + span {
  box-shadow: 0 0 0 4px #ffb347, 0 2px 8px rgba(0,0,0,0.2);
  transform: scale(1.1);
  transition: all 0.2s ease;
}


/* for sliding in sizing */
.size-chart-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.size-chart-panel {
  position: fixed;
  top: 0; right: -500px;
  width: 480px; max-width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.size-chart-panel.active { right: 0; }
.size-chart-overlay.active {
  opacity: 1;
  visibility: visible;
}

.panel-heading {
    border-radius: 0;
    color: #fff;
}