/* =====================================================================
   colours-sizes.css
   Updated for Bookware catalogue swatches

   Notes:
   - Preserves the original size and swatch UI styles from the previous site.
   - Adds alias classes for new Bookware colour names.
   - Adds new colour classes that were not present in the legacy CSS.
   - Adds a TEMPORARY multi-colour / bundle treatment.

   Important:
   - In the current Twig, colour classes are normalized like this:
       "ROYAL BLUE"    -> .ROYAL-BLUE
       "NO COLOR"      -> .NO-COLOR
       "BLACK,GREY"    -> .BLACK--GREY
   - Multi-colour values are currently treated as a generic bundle/multi-colour
     indicator because some of these are assorted packs rather than a single
     garment with multiple fabric colours.
   - If you later want true split swatches for selected values, add specific
     overrides below the generic multi-colour section.
   ===================================================================== */

.moreInfo {
  text-decoration: none;
}

.colours-lrg ul,
.colours-small ul {
  list-style: none;
  display: block;
}

.colours-lrg li:hover,
.colours-small li:hover,
.colours-lrg li:focus,
.colours-small li:focus {
  text-decoration: underline;
  cursor: pointer;
}

.colours-lrg {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  width: 100%;
  font-family: Roboto Condensed, sans-serif;
  font-size: 16px;
  line-height: 20px;
  margin-left: 1rem;
}

.colours-small {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  width: 100%;
  font-family: Roboto Condensed, sans-serif;
  font-size: 10px;
  line-height: 10px;
  /*margin-left: .5rem;*/
  padding-left: 0;
  margin: 0 0 .6rem 0;
}

.colours-small li > a,
.colours-lrg li > a,
.sizes-small li > a,
.sizes-lrg li > a {
  display: block;
  width: 100%;
  height: 100%;
}

.colours-small li:hover,
.colours-small li:focus,
.colours-lrg li:hover,
.colours-lrg li:focus {
  border: 2px solid blue;
}

.sizes-lrg {
  display: block;
  margin-left: 1rem;
}

.sizes-small {
  display: block;
  margin-left: 0;
  width: 100%;
}

.sizes-small a:link,
.sizes-small a,
.sizes-small a:active,
.sizes-lrg a:link,
.sizes-lrg a,
.sizes-lrg a:active {
  color: #000;
  text-decoration: none;
}

.sizes-small li.selected > a,
.sizes-lrg li.selected > a {
  color: #fff !important;
  text-decoration: none;
}

.sizes-lrg li {
  display: inline-block;
  height: 28px;
  min-width: 34px;
  border-radius: 8px;
  border: 1px solid black;
  padding: 2px 3px 1px 3px;
  background-clip: content-box;
  margin-right: 10px;
  text-align: center;
  cursor: pointer;
}

.sizes-small li {
  display: inline-block;
  height: 1rem;
  min-width: 1rem;
  border-radius: 9px;
  border: 1px solid black;
  padding: 2px 3px 1px 3px;
  background-clip: content-box;
  font-size: 9px;
  margin-right: 2px;
  text-align: center;
  cursor: pointer;
  /* margin-bottom: 2px !important; */
}

.sizes-lrg li.selected,
.sizes-small li.selected {
  border: 2px solid black;
  background-color: #696969;
  color: #fff;
}

.sizes-lrg li.out,
.sizes-small li.out {
  border: 1px solid rgb(0 0 0 / 65%);
  color: rgb(0 0 0 / 65%);
  pointer-events: none;
}

.sizes-lrg li:not(.out):hover,
.sizes-small li:not(.out):hover {
  color: #000000;
  cursor: pointer;
}

.sizes-lrg li.\32XS.out,
.sizes-lrg li.\33XL.out,
.sizes-lrg li.\34XL.out,
.sizes-lrg li.\35XL.out,
.sizes-small li.\32XS.out,
.sizes-small li.\33XL.out,
.sizes-small li.\34XL.out,
.sizes-small li.\35XL.out {
  display: none;
}

.colours-lrg li:hover,
.colours-small li:hover,
.colours-lrg li:focus,
.colours-small li:focus {
  text-decoration: none;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}

.colours-small li,
.colours-lrg li {
  position: relative;
  overflow: visible;
}

.swatch {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  vertical-align: top;
  border: .5px solid #999;
}

.swatch.selected::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid #000;
  pointer-events: none;
}

.colours-small li:hover .swatch::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
    pointer-events: none;
}

/* ItemView swatch layout */
.colours-lrg.colours-itemview {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: .75rem;
  margin-left: 0;
  padding-left: 0;
}

.colours-lrg.colours-itemview li {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.colours-lrg.colours-itemview .swatch {
  width: 3rem;
  height: 3rem;
  display: block;
}

.colours-placeholder {
    min-height: 28px;
    width: 100%;
}

.swatch-group {
    list-style: none;
    gap: 7px;
    padding: 0;
    margin: 0 0 .6rem 0;
}

.swatch-option {
    max-width: 40px;
    padding: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.swatch-option:focus .swatch::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid #7A003C;
    pointer-events: none;
}

/* single colour → not interactive */
.single-swatch-group .swatch-option {
    cursor: default;
    pointer-events: none;
}

/* remove hover feedback */
.single-swatch-group .swatch-option:hover .swatch::before {
    display: none;
}

/* remove keyboard focus visuals */
.single-swatch-group .swatch-option:focus .swatch::before {
    display: none;
}

/*Accesibility Highlighting for keyboard nav and screen readers*/

.swatch-option {
    outline: none;
}

.swatch-option:focus:not(:focus-visible) .swatch::before {
    content: none;
}

.swatch-option:focus-visible .swatch::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid #7A003C;
    pointer-events: none;
}

.single-swatch-group .swatch-option {
    cursor: default;
    pointer-events: none;
}

.single-swatch-group .swatch-option:focus .swatch::before,
.single-swatch-group .swatch-option:hover .swatch::before {
    display: none;
}

/*More colours link*/
.more-colours-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-colours-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: .85rem;
    font-weight: 600;

    color: #666;
    text-decoration: none;

    padding: 0;
    margin-left: .25rem;

    border: none;
    background: none;
    box-shadow: none;
}

.more-colours-link:hover,
.more-colours-link:focus {
    text-decoration: none;
    border-color: #7A003C;
    color: #7A003C;
    background: #f8f4f6;
    outline: none;
}

.more-colours-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(122, 0, 60, .18);
}

/*accessibilty fixes for size buttons*/

.arrow_radio_buttons input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    display: block;
    pointer-events: none;
}

.arrow_radio_buttons input[type="radio"]:focus + label,
.arrow_radio_buttons input[type="radio"]:focus-visible + label {
    outline: 2px solid #7A003C;
    outline-offset: 2px;
}

.arrow_radio_buttons input[type="radio"]:checked + label {
    background: #3d434a;
    color: #fff;
    border-color: #3d434a;
}



/* =====================================================================
   Legacy swatch colours preserved from the previous site
   ===================================================================== */

.BEIGE { background-color: #F5F5DC; }
.BEIGE-DARK { background-color: #c0b08f; }
.BEIGE-LIGHT { background-color: #FFFDED; }
.BEIGE-MEDIUM { background-color: #c0c0a0; }
.BLACK { background-color: #000000; }
.BLUE { background-color: #4169e1; }
.BLUE-DARK { background-color: #003366; }
.BLUE-LIGHT { background-color: #add8e6; }
.BLUE-MEDIUM { background-color: #0000cd; }
.BRASS { background-color: #b5a642; }
.BROWN { background-color: #864c13; }
.BROWN-DARK { background-color: #654321; }
.BROWN-LIGHT { background-color: #b5651d; }
.BROWN-MEDIUM { background-color: #97673c; }
.BROWN-PASTEL { background-color: #836953; }
.BUFF { background-color: #f0dc82; }
.BURGUNDY { background-color: #800020; }
.CANARY { background-color: #ffff99; }
.CARIBBEAN-BLUE { background-color: #255068; }
.CEIL-BLUE { background-color: #92A1CF; }
.CHARCOAL { background-color: #909090; }
.CHROME { background-color: #E3DEDB; }
.COPPER { background-color: #b87333; }
.CREAM { background-color: #fffdd0; }
.DARK-MAROON { background-color: #800000; }
.FUCHSIA { background-color: #ff00ff; }
.GOLD { background-color: #FFD700; }
.GRAPHITE { background-color: #5e5f5d; }
.GRAY { background-color: #A9A9A9; }
.GRAY-DARK { background-color: #808080; }
.GRAY-LIGHT { background-color: #D3D3D3; }
.GRAY-MEDIUM { background-color: #a5a5a5; }
.GRAY-PASTEL { background-color: #cfcfc4; }
.GREEN { background-color: #008000; }
.GREEN-BRIGHT { background-color: #39ff14; }
.GREEN-DARK { background-color: #006400; }
.GREEN-KELLY { background-color: #4cbb17; }
.GREEN-MEDIUM { background-color: #05c369; }
.GREEN-PASTEL { background-color: #77dd77; }
.HUNTER-GREEN { background-color: #355e3b; }
.LAGOON { background-color: #017890; }
.LANDSCAPE { background-color: #1e98ae; }
.LILAC { background-color: #b666d2; }
.MAROON { background-color: #7a003c; }
.MISTY-GREEN { background-color: #48b296; }
.NATURAL { background-color: #f4efe2; }
.NAVY { background-color: #003366; }
.NO-COLOUR { background-color: transparent; }
.OCEAN-BLUE { background-color: #0077be; }
.ORANGE { background-color: #ffa500; }
.ORANGE-DARK { background-color: #FF8C00; }
.ORANGE-LIGHT { background-color: #ffae5a; }
.ORANGE-MEDIUM { background-color: #ff802c; }
.PEACH { background-color: #ffdab9; }
.PEWTER { background-color: #8e9294; }
.PINK { background-color: #FFC0CB; }
.PINK-DARK { background-color: #e75480; }
.PINK-LIGHT { background-color: #FFB6C1; }
.PINK-MEDIUM { background-color: #ed5496; }
.PLUM { background-color: #8e4585; }
.POSTMAN-BLUE { background-color: #075CA7; }
.PURPLE { background-color: #551A8B; }
.PURPLE-DARK { background-color: #3f074e; }
.PURPLE-LIGHT { background-color: #b19cd9; }
.PURPLE-MEDIUM { background-color: #9370DB; }
.RASPBERRY { background-color: #e30b5d; }
.RED { background-color: #ff0000; }
.RED-DARK { background-color: #8b0000; }
.RED-LIGHT { background-color: #ff6961; }
.RED-MEDIUM { background-color: #f3464a; }
.ROYAL-BLUE { background-color: #4169e1; }
.RUST { background-color: #a77f48; }
.SALMON { background-color: #fa8072; }
.SALT-PEPPER { background-color: #464545; }
.SEAFOAM-GREEN { background-color: #71eeb8; }
.SILVER { background-color: #c0c0c0; }
.STEEL-BLUE { background-color: #879fc0; }
.TAN { background-color: #D2B48C; }
.TEAL { background-color: #008080; }
.TURQUOISE { background-color: #00b1e9; }
.WHITE { background-color: #FFFAFA; }
.WINTER { background-color: #FDFDFD; }
.YELLOW { background-color: #ffff00; }

/* =====================================================================
   New / alias classes for Bookware colour names
   These map Bookware names to the closest existing or newly-added swatch.
   ===================================================================== */

/* New grey aliases used by Bookware */
.ASH-GREY,
.GREY {
  background-color: #A9A9A9;
}

.HEATHER-GREY {
  background-color: #a5a5a5;
}

.LIGHT-GREY {
  background-color: #D3D3D3;
}

.OCEAN-CARIBBEAN-BLUE{
    background-color: #1d5b78;
}

.NEUTRAL-GREY {
  background-color: #cfcfc4;
}

.DARK-GRAY {
  background-color: #808080;
}

/* New blue aliases / additions */
.DARK-BLUE {
  background-color: #003366;
}

.LIGHT-BLUE {
  background-color: #add8e6;
}

.LIGHT-PINK {
  background-color: #FFB6C1;
}

.NAVY-HEATHER {
  background-color: #4d5d73;
}

.DENIM {
  background-color: #4f6d8a;
}

/* New brown / neutral additions */
.ALMOND-MILK {
  background-color: #efe6d3;
}

.LIGHT-BROWN {
  background-color: #b5651d;
}

.DARK-BROWN,
.WALNUT {
  background-color: #654321;
}

.OXFORD {
  background-color: #4d5d73;
}

/* New green additions */
.DARK-GREEN {
  background-color: #006400;
}

.FOREST-GREEN {
  background-color: #355e3b;
}

.LIGHT-GREEN {
  background-color: #77dd77;
}

.SAGE {
  background-color: #9caf88;
}

.LIGHT-SAGE {
  background-color: #c7d2b6;
}

.DUSTY-GREEN {
  background-color: #7a8f74;
}

.OLIVE {
  background-color: #708238;
}

/* New pink / purple additions */
.BLUSH-PINK {
  background-color: #FFB6C1;
}

.DARK-PINK {
  background-color: #e75480;
}

.DUSTY-PINK {
  background-color: #c88f98;
}

.MAUVE {
  background-color: #a67b8b;
}

/* New red / orange / clay additions */
.LIGHT-RED {
  background-color: #ff6961;
}

.CLAY {
  background-color: #b66a50;
}

/* Specialty aliases */
.CHARCOAL-HEATHER {
  background-color: #909090;
}

.LAVENDER{
    background-color: #af54a6;
}

.NO-COLOR {
  background-color: transparent;
}

/* "No colour" / "No color" visual indicator */
.NO-COLOUR::after,
.NO-COLOR::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 46%, #999 47%, #999 53%, transparent 54%);
}

/* =====================================================================
   Temporary multi-colour / bundle handling

   Why generic instead of literal colour splits?
   Some Bookware values like BLACK,GREY,MAROON are not necessarily a single
   garment with three visible colours. They can be assorted bundles / packs.

   Current approach:
   - Any swatch class containing "--" gets a neutral striped bundle treatment.
   - Specific multi-colour combinations can be added below later if needed.
   ===================================================================== */

.swatch[class*="--"] {
  background:
    repeating-linear-gradient(
      135deg,
      #d7d7d7 0 4px,
      #8e8e8e 4px 8px,
      #d7d7d7 8px 12px
    );
}

/* Optional label-friendly bundle ring */
.swatch[class*="--"]::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------------------------
   Specific multi-colour overrides
   Uncomment / adjust if you later want literal split swatches instead of the
   generic bundle pattern above.

.BLACK--MAROON {
  background: linear-gradient(90deg, #000 0 50%, #7a003c 50% 100%);
}

.BLACK--GREY {
  background: linear-gradient(90deg, #000 0 50%, #A9A9A9 50% 100%);
}

.BLACK--GREY--MAROON {
  background: linear-gradient(
    90deg,
    #000 0 33.33%,
    #A9A9A9 33.33% 66.66%,
    #7a003c 66.66% 100%
  );
}

.ASH-GREY--BLUE {
  background: linear-gradient(90deg, #A9A9A9 0 50%, #0000FF 50% 100%);
}

.BLUE--RED {
  background: linear-gradient(90deg, #0000FF 0 50%, #ff0000 50% 100%);
}

.NAVY--PINK--PURPLE {
  background: linear-gradient(
    90deg,
    #003366 0 33.33%,
    #FFC0CB 33.33% 66.66%,
    #551A8B 66.66% 100%
  );
}

.OLIVE--MINK--SAND {
  background: linear-gradient(
    90deg,
    #708238 0 33.33%,
    #8b7d7b 33.33% 66.66%,
    #cdbb9a 66.66% 100%
  );
}
   --------------------------------------------------------------------- */

/* =====================================================================
   Extra single-colour additions for names appearing inside multi-colour labels
   These are not currently required for the generic bundle pattern, but keeping
   them here is useful if you later move to literal split swatches.
   ===================================================================== */

.MINK {
  background-color: #8b7d7b;
}

.SAND {
  background-color: #cdbb9a;
}

.MARAUDER-PATTERN {
  background-color:#fff;
  background-image: url('patterns/marauder-pattern.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* Equivalent to object-fit: cover */
  background-position: center; /* Centers the image */
}

.TERRA-COTTA {
     background-color: #b4887c;
}

.POSTMAN-STEEL-BLUE {
     background-color: #41526f;
}

.SLATE {
     background-color: #6f7c99;
}

.SAGE-GREEN {
     background-color: #b7b9ab;
}

.DARK-GREY {
     background-color: #454142;
}

.STEEL-GREY {
     background-color: #cbcbc9;
}

.OXFORD {
  background-color:#9d9a96;
  background-image: url('patterns/oxford.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* Equivalent to object-fit: cover */
  background-position: center; /* Centers the image */
}