/* ===================================================================
   Cart drawer and product options.

   A separate file so styles.css stays exactly as you wrote it. Uses your
   own variables (--red, --ink, --dark, --card, --page, --gray,
   --cardradius) so it follows the site when you change them.
   =================================================================== */

/* Everything below borrows from styles.css. These are the only values it
   does not already define. */
:root {
    --cart-font:    "Montserrat";      /* your body face */
    --cart-display: "sens";            /* Sansation, your headings face */
    --cart-radius:  4px;               /* matches your buttons and top bar */
    --cart-ok:      #2f7d43;           /* the brief green on "added" */

    /* Your .TOPBAR sits at z-index 1000. The drawer has to clear it, or
       your header covers the drawer's title and close button. */
    --cart-z:       1100;
}

/* ---- the count on the cart icon ---------------------------------- */
.CART_BUTTON { position: relative; }

.CART_COUNT {
    font-family: var(--cart-font);
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
.CART_COUNT[hidden] { display: none; }

/* ---- the drawer --------------------------------------------------- */
.CART_OVERLAY {
    position: fixed;
    inset: 0;
    background: rgba(23, 23, 23, .45);   /* your --dark, softened */
    opacity: 0;
    transition: opacity .24s ease;
    z-index: calc(var(--cart-z) - 1);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}
.CART_OVERLAY.on { opacity: 1; }
.CART_OVERLAY[hidden] { display: none; }

.CART_DRAWER {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
    box-shadow: -18px 0 46px rgba(0, 0, 0, .16);
    font-family: var(--cart-font);
    color: var(--ink);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
    z-index: var(--cart-z);
    /* the drawer scrolls inside itself, never the page behind it */
    overscroll-behavior: contain;
}
.CART_DRAWER.on { transform: translateX(0); }
.CART_DRAWER[hidden] { display: none; }

/* Stop the page behind from scrolling while the drawer is open. */
body.CART_LOCK { overflow: hidden; }

.CD_HEAD {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(18, 18, 18, .10);
}
.CD_TITLE {
    margin: 0;
    font-family: var(--cart-display);
    font-size: 1.3rem;
    font-weight: 1000;
    letter-spacing: -.01em;
    color: var(--ink);
}
.CD_CLOSE {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .13s, color .13s;
}
.CD_CLOSE svg { width: 18px; height: 18px; display: block; }
.CD_CLOSE:hover { background: var(--page, #f5f5f7); color: var(--red); }

.CD_BODY {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 20px 20px;
}

/* ---- one line ----------------------------------------------------- */
.CD_LINE {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(18, 18, 18, .08);
}
.CD_LINE:last-child { border-bottom: 0; }

.CD_THUMB {
    width: 78px;
    height: 78px;
    flex: none;
    border-radius: var(--cart-radius);
    background: var(--page, #f5f5f7);
    object-fit: cover;
}

.CD_MID { flex: 1 1 auto; min-width: 0; }
.CD_NAME {
    margin: 0 0 3px;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
}
.CD_OPTS {
    margin: 0 0 10px;
    font-size: .76rem;
    color: var(--gray, #6e6e73);
}

.CD_QTY {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(18, 18, 18, .16);
    border-radius: var(--cart-radius);
    overflow: hidden;
}
.CD_QB {
    width: 30px;
    height: 30px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.CD_QB:hover { background: var(--page, #f5f5f7); color: var(--red); }
.CD_QV {
    min-width: 26px;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
}

.CD_RIGHT {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    gap: 10px;
}
.CD_PRICE {
    font-family: var(--cart-display);
    font-size: .95rem;
    font-weight: 1000;
    white-space: nowrap;
    color: var(--ink);
}
.CD_DROP {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--gray, #6e6e73);
    cursor: pointer;
    border-radius: 50%;
    transition: color .12s, background-color .12s;
}
.CD_DROP svg { width: 15px; height: 15px; display: block; }
.CD_DROP:hover { color: var(--red); background: var(--page, #f5f5f7); }

/* ---- empty -------------------------------------------------------- */
.CD_EMPTY { padding: 70px 10px; text-align: center; }
.CD_EMPTY_T {
    margin: 0 0 14px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--gray, #6e6e73);
}
.CD_EMPTY_L {
    display: inline-block;
    padding: 11px 22px;
    border-radius: var(--cart-radius);
    background: var(--dark);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .13s;
}
.CD_EMPTY_L:hover { background: var(--red); }

/* ---- suggestions (off unless you turn them on in cart.js) --------- */
.CD_ALSO { margin-top: 26px; }
.CD_ALSO[hidden] { display: none; }
.CD_ALSO_H {
    margin: 0 0 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray, #6e6e73);
}
.CD_ALSO_ROW {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 128px;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.CD_SUG { text-decoration: none; color: inherit; }
.CD_SUG_IMG {
    width: 128px;
    height: 96px;
    border-radius: var(--cart-radius);
    background: var(--page, #f5f5f7);
    object-fit: cover;
    display: block;
    margin-bottom: 7px;
}
.CD_SUG_NAME {
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}
.CD_SUG_PRICE { font-size: .74rem; color: var(--gray, #6e6e73); margin-top: 2px; }

/* ---- footer ------------------------------------------------------- */
.CD_FOOT {
    flex: none;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(18, 18, 18, .10);
    background: var(--card, #fff);
}
.CD_FOOT[hidden] { display: none; }

.CD_NOTE_T {
    border: 0;
    background: none;
    padding: 0 0 10px;
    color: var(--gray, #6e6e73);
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    cursor: pointer;
}
.CD_NOTE_T:hover { color: var(--ink); }
.CD_NOTE_T[hidden] { display: none; }

.CD_NOTE {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(18, 18, 18, .16);
    border-radius: var(--cart-radius);
    background: var(--page, #f5f5f7);
    font: inherit;
    font-size: .82rem;
    color: var(--ink);
    resize: vertical;
}
.CD_NOTE:focus { outline: none; border-color: var(--ink); }
.CD_NOTE[hidden] { display: none; }

.CD_CHECKOUT {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--cart-radius);
    background: var(--dark);
    color: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .13s;
}
.CD_CHECKOUT:hover { background: var(--red); }
.CD_TOTAL { font-family: var(--cart-display); font-weight: 1000; font-variant-numeric: tabular-nums; }

.CD_FINE {
    margin: 10px 0 0;
    font-size: .72rem;
    color: var(--gray, #6e6e73);
    text-align: center;
}

@media (max-width: 480px) {
    .CART_DRAWER { width: 100vw; }
    .CD_THUMB { width: 66px; height: 66px; }
    .CD_BODY { padding: 6px 16px 16px; }
    .CD_HEAD, .CD_FOOT { padding-left: 16px; padding-right: 16px; }
}

/* Someone who asked for less motion gets the drawer, just not the slide. */
@media (prefers-reduced-motion: reduce) {
    .CART_DRAWER, .CART_OVERLAY { transition: none; }
}

/* ===================================================================
   Options on the product page
   =================================================================== */
.OPT_PANEL {
    font-family: var(--cart-font);
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    padding-top: 6px;
}

.OPT_GROUP { display: flex; flex-direction: column; gap: 8px; }

.OPT_LABEL {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
}
.OPT_VALUE { font-weight: 500; color: var(--gray, #6e6e73); }

.OPT_ROW { display: flex; flex-wrap: wrap; gap: 8px; }

.OPT_CHIP {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(18, 18, 18, .18);
    border-radius: var(--cart-radius);
    background: var(--card, #fff);
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .13s, background-color .13s, color .13s;
}
.OPT_CHIP:hover { border-color: var(--ink); }
.OPT_CHIP.on {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

.OPT_CHIP.SWATCH {
    width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.SWATCH_DOT {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    display: block;
}
.OPT_CHIP.SWATCH.on {
    border-color: var(--dark);
    border-width: 2px;
    background: var(--card, #fff);
}

.BUY_ROW { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

.QTY {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(18, 18, 18, .18);
    border-radius: var(--cart-radius);
    background: var(--card, #fff);
    flex: none;
}
.QTY_B {
    width: 38px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
    cursor: pointer;
}
.QTY_B:hover { color: var(--red); }
.QTY_V {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
}

.ADD_BTN {
    flex: 1 1 200px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--cart-radius);
    background: var(--dark);
    color: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .13s;
}
.ADD_BTN:hover { background: var(--red); }
.ADD_BTN.added { background: var(--cart-ok); }

.OPT_NOTE { font-size: .82rem; color: var(--gray, #6e6e73); min-height: 1em; }
.OPT_LINK { color: var(--red); text-decoration: underline; }

@media (max-width: 560px) {
    .ADD_BTN { flex-basis: 100%; }
}

/* Sold out: still visible, clearly not choosable. A diagonal line reads as
   "gone" without relying on colour alone. */
.OPT_CHIP.sold {
    cursor: not-allowed;
    opacity: .45;
    position: relative;
    border-style: dashed;
}
.OPT_CHIP.sold:hover { border-color: rgba(18, 18, 18, .18); }
.OPT_CHIP.sold::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 1px;
    background: currentColor;
    transform: rotate(-16deg);
    opacity: .8;
    pointer-events: none;
}
.OPT_CHIP.SWATCH.sold .SWATCH_DOT { filter: grayscale(.7); }

.ADD_BTN:disabled {
    background: var(--gray, #6e6e73);
    cursor: not-allowed;
    opacity: .7;
}
.ADD_BTN:disabled:hover { background: var(--gray, #6e6e73); }

/* ---- language menu, where the search button was ------------------- */
.LANG_BOX select {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: var(--cart-font);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}
.LANG_BOX select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }