/* Fonts */
@font-face {
  font-family: 'Century Gothic';
  src: url(https://overstockla.com/assets/fonts/CenturyGothic-Regular.ttf);
}

/* Track home graphic progress */
@property --timer {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Anchor position fallbacks */
@position-try --bottom {
  inset: auto;
  top: anchor(bottom);
}

@position-try --top {
  inset: auto;
  bottom: anchor(top);
}

@position-try --left {
  inset: auto;
  right: anchor(left);
}

@position-try --right {
  inset: auto;
  left: anchor(right);
}

@property --color-a {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

@property --color-b {
  syntax: '<color>';
  inherits: false;
  initial-value: black;
}

:root {
  font-family: Arial, Helvetica, sans-serif;

  --gray-1: hsl(220, 10%, 96%);
  --gray-2: hsl(220, 10%, 92%);
  --gray-3: hsl(220, 10%, 85%);
  --gray-4: hsl(220, 10%, 70%);
  --gray-5: hsl(220, 10%, 50%);
  --gray-6: hsl(220, 10%, 30%);
  --gray-7: hsl(220, 10%, 20%);
  --gray-8: hsl(220, 10%, 10%);

  --c-green: rgba(170, 255, 204, var(--opacity, 1)); /* #aaffcc; */
  --c-yellow: rgba(255, 248, 208, var(--opacity, 1)); /* #fffd80; */
  --c-orange: rgba(255, 212, 0, var(--opacity, 1)); /* #ffd400; */
  --c-pink: rgba(255, 136, 170, var(--opacity, 1)); /* #ff88aa; */
  --c-red: hsl(0, 80%, 40%); /* #ff88aa; */
  --c-purple: rgba(153, 85, 153, var(--opacity, 1)); /* #99ff99; */
  --c-dark-purple: hsl(295, 100%, 10%);
  --c-blue: rgba(187, 204, 255, var(--opacity, 1)); /* #bbccff; */
  --c-navy: rgba(0, 102, 187, var(--opacity, 1)); /* #0066bb; */

  --white: rgba(255, 255, 255, var(--opacity, 1));
  --black: rgba(0, 0, 0, var(--opacity, 1));

  /* Absolute page width */
  --max-width: 100%;

  /* Section row heights */
  --home-banner-height: 3rem;
  --home-graphic-height: clamp(400px, 84vh, 80vw);

  /* Header settings */
  --header-padding: 1rem; /* Padding for filter headers */
  --nav-header-height: calc(2rem + (2 * var(--header-padding)));
  --filter-main-header-height: calc(1.5rem + (2 * var(--header-padding)));
  --filter-input-margin: .6rem; /* Margin between filter inputs */
  --filter-toggle-padding: 1.5rem;
  --nav-header-top-offset: 0px; /* Will break sticky if unit is not included */

  @media (hover: none) {
    --filter-toggle-padding: 0;
  }

  --dialog-margin: 6rem;

  /* Grid set up */
  --side-padding: 1rem;
  --column-gap: 1.5rem;
  --row-gap: 3rem;
}

[hidden] {
  display: none !important;
}

/* Home graphic scroll animation */
@keyframes home-graphic-scroll {
  0% {  
    --timer: 0;  
    background-color: var(--c-blue);
  }
  100% {  
    --timer: 1;  
    background-color: var(--c-purple);
  }
}

/* Nav header scroll animation - white to black & that stupid line */
@keyframes nav-header-scroll {
  0% {
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: linear-gradient(to right, transparent 0%, transparent var(--column-gap), var(--gray-8) var(--column-gap), var(--gray-8) calc(100% - var(--column-gap)), transparent  calc(100% - var(--column-gap)), transparent 100%);
  }

  99% {
    background: #fff;
    color: #000;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: linear-gradient(to right, transparent 0%, transparent var(--column-gap), var(--gray-8) var(--column-gap), var(--gray-8) calc(100% - var(--column-gap)), transparent  calc(100% - var(--column-gap)), transparent 100%);
  }

  99.1% {
    background: #000;
    color: #fff;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: none;
  }

  100% {
    background: #000;
    color: #fff;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: none;
  }
}

@keyframes dialog-from-left {
  0% {
    left: -100dvw;
  }
  100% {
    left: 0dvw;
  }
}

@keyframes dialog-from-right {
  0% {
    left: 100dvw;
  }
  100% {
    left: var(--dialog-margin);
  }
}

@keyframes dialog-backdrop {
  0% {
    backdrop-filter: blur(0px);
  }
  100% {
    backdrop-filter: blur(4px);
  }
}

@keyframes from-display-none {
  0% {
    display: none;
    visibility: hidden;
  }

  100% {
    display: var(--display);
    visibility: visible;
  }
}

@keyframes to-display-none {
  0% {
    display: var(--display);
    visibility: visible;
  }

  100% {
    display: none;
    visibility: hidden;
  }
}

/* Disable scroll animations based on user preference */
@media (prefers-reduced-motion: no-preference) {
  #home-graphic[display] {  
    animation: home-graphic-scroll linear forwards;
    animation-timeline: view();
    animation-range-start: 100vh;
    animation-range-end: 200vh;
  }

  body[home] #nav-header {
    animation: nav-header-scroll linear forwards;
    animation-timeline: view();
    animation-range-start: calc(100vh - var(--home-graphic-height));
    animation-range-end: calc(100vh + (100vh - var(--home-banner-height) - var(--home-graphic-height)));
  }
}

@media (orientation: landscape) {
  .portrait-only {
    display: none !important;
  }
}

@media (orientation: portrait) {
  .landscape-only {
    display: none;
  }
}

@media (hover: hover) {
  .no-hover-only {
    display: none;
  }
}

@media (hover: none) {
  .hover-only {
    display: none;
  }
}

  /**********/
 /* LAYOUT */
/**********/

body {
  margin: 0;
  padding: 0;
  background-color: var(--gray-1);
  overflow-x: clip;
  overflow-y: scroll;

  &::selection {
    background-color: var(--c-yellow);
    color: #000;
  }

  &:not([home]) {
    #home-banner, #home-graphic {
      height: 0;
      display: none;
    }

    #nav-header {
      background: #000;
      color: #fff;
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position-y: bottom;
      background-image: none;
    }

    #spacer {
      height: 0;
    }
  }
}

#skip-content {
  display: block;
  position: fixed;
  z-index: 9999;
  height: var(--home-banner-height);
  top: calc(-1 * var(--home-banner-height));
  padding: 1em; 
  background-color: #000;
  color: #fff;

  &:focus {
    top: 0;
  }
}

#home-banner {  
  height: var(--home-banner-height);
  padding-block: .8rem 1rem;
  padding-inline: var(--column-gap);
  margin-inline: auto;
  max-width: var(--max-width);
  background-color: #fff;

  & #discount-code {
    position: relative;

    font-family: 'Century Gothic';
    text-decoration: none;
    border: 2px dashed black;
    padding: .2em;
    margin-block-start: -1rem;
  }
}

/* Display content on top of home graphic */
#home-graphic-overlay {
  display: grid;
  position: absolute;
  z-index: 10;

  position-anchor: --home-graphic;
  top: anchor(top);
  right: anchor(right);
  bottom: calc(anchor(bottom) + 15cqh);
  left: anchor(left);

  font-family: 'Century Gothic';
  font-size: 4rem;  

  &:empty {
    display: none !important;
  }
}

#wrap {
  display: grid;
  min-height: 100svh;
  max-width: var(--max-width);
  
  align-content: start;
  align-items: start;

  position: sticky;
  top: 0;

  grid-template-columns: 1fr;
  margin-inline: auto;

  background-color: #fff;
}

#nav-header {
  position: sticky; 
  top: var(--nav-header-top-offset);
  z-index: 2;

  height: var(--nav-header-height);

  padding-block: 1rem;
  padding-inline: var(--column-gap);

  background-color: #fff;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-image: linear-gradient(to right, transparent 0%, transparent var(--column-gap), var(--gray-8) var(--column-gap), var(--gray-8) calc(100% - var(--column-gap)), transparent  calc(100% - var(--column-gap)), transparent 100%);

  font-family: 'Century Gothic';
  font-size: 1.4rem;

  & *:not(rect) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    height: 100%;
  }

  & svg {
    fill: currentColor;
  }

  & a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;

    transition: text-decoration-color 150ms linear;

    &:hover {
      text-decoration-color: currentColor;
    }
  }

  & button {
    cursor: pointer;

    & svg {
      height: 1.2em;
    }
  }

  li:has(#menu-button) {
    display: none;
  }

  & #search-button > svg {
    fill: transparent;
    stroke: currentColor;
  }

  & #checkout-button {
    --fill-color: #000;
  }

  & #checkout-button[count] {
    justify-content: center;
    align-items: center;

    /* Counter for checkout items */
    &::after {
      content: attr(count);

      display: grid;
      place-items: center;

      position: absolute;   
      z-index: 1;
  
      height: .8rem;
      width: .8rem;
      padding: .2rem;

      margin-block-start: .5rem;
      border-radius: 100%;

      mix-blend-mode: difference;

      font-size: .4em;
      font-weight: 600;
      line-height: 0;

      color: #000;
      background-color: #fff;
    }
  }
  

  & #checkout-button > svg {
    path {
      fill: currentColor;
    }
    
    circle {
      fill: transparent;
      stroke: currentColor;
    }
  }

  & #menu-button > svg {
    fill: currentColor;
  }
}

#primary-nav-dialog {
  background-color: inherit;
  color: inherit;
  border: none;
  position: relative;

  #primary-nav-more {
    display: none;
  }
}

/* Portrait orientation */
@media (orientation: portrait) {
  :root {
    --column-gap: 1rem;
  }

  li:has(#menu-button) {
    display: flex !important;
  }

  /* Primary nav */
  body:has(#primary-nav-dialog[open]) {
    overflow: clip; 
  }

  #primary-nav-dialog:not([open]) {
    display: none;
  }
  
  #primary-nav-dialog {
    position: fixed;
    top: 0;
    left: var(--dialog-margin);

    width: calc(100dvw - var(--dialog-margin));
    height: calc(100dvh);

    background: #000;
    box-shadow: 0 4rem 0 #000; /* REFACTOR Hacky because 100dvh isn't working? */

    direction: ltr;
    animation: dialog-from-right 300ms ease-out;

    &::backdrop {
      background-color: rgba(0, 0, 0, .4);
      backdrop-filter: blur(4px);
      animation: dialog-backdrop 300ms ease-in;
    }
  }

  #primary-nav {
    flex-flow: column nowrap !important; /* REFACTOR */
    justify-content: start !important;
    align-items: start !important;
    align-content: start !important;
    color: #fff !important;

    padding-block: var(--header-padding);
    padding-inline: var(--column-gap);

    width: 100%;

    & > li, & > li * {
      height: min-content;
    }

    .close {
      font-size: 2rem;
      line-height: 1.4;
      width: 100%;
      direction: rtl;
      margin-top: -.2em;
    }
  }
}


  /****************/
 /* MAIN CONTENT */
/****************/ 

#main-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(32ch, 100%), 1fr));
  row-gap: var(--row-gap);
  column-gap: var(--column-gap);
  margin-inline: var(--column-gap);

  container-name: main-content;
  container-type: inline-size;

  /* Pages, products */
  & > section[page] {
    display: none;
  }

  & > section {
    grid-template-columns: inherit;
    row-gap: var(--row-gap);
    column-gap: var(--column-gap);
    align-items: start;

    &[page] {
      margin-block-start: calc(var(--nav-header-height) - 1rem);
    }

    &[active] {
      display: grid;
      height: max-content;
      min-height: 50vh;
    }
  }

  /* Hide filters if page open */
  &:has([page][active]) {
    & #filter-main-header {
      display: none;
    }

    & #products {
      display: none;
    }
  }

  /* Hide filters if product open */
  &:has(product-card[open]) {
    product-card:not([open]) {
      display: none;
    }

    product-card[open] {
      grid-column: 1 / -1;
    }

    & #filter-main-header {
      display: none;
    }
  }

  & .full-width {
    grid-column: 1 / -1;
  }

  & #filter-main-header {
    position: sticky;
    z-index: 40;
    top: var(--nav-header-height);

    & h2 {
      display: none;
    }
  }
}

/* No results for filter/search */
#no-results {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 50vh;

  & [oh-no] {
    font-size: 4rem;
    font-family: 'Century Gothic';
    margin-block-end: 3rem;
    margin-inline: auto;
  }

  & button {
    display: block;
    font-family: 'Century Gothic';
    margin-block-start: 3rem;
    margin-inline: auto;
  }
}

/* Recommended products */
#main-content > #recs {
  /* display: grid; */

  display: none;

  grid-template-columns: 1fr;
  grid-template-rows: 1.8rem max-content;
  gap: 0;

  & span {
    color: #fff;
    background-color: #000;
    padding-block-start: .2rem;
    padding-inline: .2rem;
    width: max-content;

    position: relative;
    z-index: 1;
    top: 1px;
  }

  & div {  
    display: flex;
    overflow-x: auto;

    gap: var(--column-gap);
    padding: var(--column-gap);
    border: 1px solid var(--gray-4);

    & a {
      height: 6rem;
      aspect-ratio: 1;
      background-color: var(--gray-2);
    }
  }
}

[filter-page-wrap]:not(:has([filter-page])) {
  display: none !important;
}

[filter-page] {
  padding: var(--column-gap);
  background-color: green;

  &:not([active]) {
    display: none;
  }
}


  /**********/
 /* FOOTER */
/**********/

#footer {
  margin-inline: var(--column-gap);
  margin-block-start: var(--row-gap);
  padding-block: var(--row-gap);
  border-top: 1px solid var(--gray-4);

  text-align: center;

  nav {
    margin-bottom: var(--row-gap);
  }

  a:not(:last-child) {
    margin-inline-end: var(--row-gap);
  }

  a:hover {
    text-decoration: underline;
  }

  #copyright {
    font-size: .6rem;
  }
}

#sale-tags:not([active]) {
  display: none;
}

h1 {  display: none;  }
#spacer {  height: 100vh;  }
#template-store {  display: none;  }