.item-checkout-absolute {

    position: fixed;
    top: 0;
    right: 0;

    display: inline-block;

    width: 40vw;
    height: 100dvh;

    padding: 0;

    background-color:rgb(255, 252, 247);

    transform: translateX(40vw);

    will-change: transform;

    transition: transform 0.2s ease-in-out;

    overflow-y: auto;

}

.item-checkout-back-button {
    font-family: 'Jost', sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    
    position: absolute;
    top: 0;
    left: 0;

    margin: 1dvh;

    color: black;

    text-align: center;

    background-color: transparent;
    border: none;

    cursor: pointer;
}

.item-checkout-flex-row {

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.item-description-centered {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2dvh;
    text-align: left;

    width: 100%;

    margin-bottom: 3dvh;

    display: flex;
    flex-direction: column;
    text-align: center;
}

.item-checkout-quantity-button-left,
.item-checkout-quantity-button-right {
    background: #f2f2f2;
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.cart-checkout-container {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: gray;
}

.cart-checkout-middle-content-wrapper {

    vertical-align: middle;

    font-family: 'Jost', sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;

    padding-bottom: 4dvh;

    width: 80%;
    /* padding-left: 1dvh;
    padding-right: 1dvh; */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    color: black;
}

.cart-checkout-header-wrapper {
    scrollbar-gutter: stable;

    vertical-align: middle;

    /* font-family: 'Jost', sans-serif; */
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;

    width: 80%;
    height: 20dvh;
    /* padding-left: 1dvh;
    padding-right: 1dvh; */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    color: black;
}

.cart-checkout-footer-wrapper {
    vertical-align: middle;

    font-family: 'Jost', sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;

    width: 80%;
    height: 20dvh;
    /* padding-left: 1dvh;
    padding-right: 1dvh; */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    color: black;
}

.item-checkout-absolute.opened {
    transform: translateX(0);
}

.item-title {

    font-family: 'Bahnschrift', sans-serif;
    font-size: 4dvh;
    text-align: left;

    width: 100%;

    margin-bottom: 1dvh;
}

.item-subtitle {
    font-family: 'Bahnschrift', sans-serif;
    font-size: 2.5dvh;
    text-align: left;

    width: 100%;

    margin-bottom: 1dvh;
}

.item-price {
    font-family: 'Bahnschrift', sans-serif;
    font-size: 3dvh;
    text-align: left;

    width: 100%;

    margin-bottom: 4dvh;
}

.item-description {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2dvh;
    text-align: left;

    width: 100%;

    margin-bottom: 3dvh;
}

.item-dimensions {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2dvh;
    text-align: left;

    color: rgb(135, 135, 135);

    width: 100%;

    background-color:rgb(242, 236, 229);

    border-radius: 2dvh;

    margin-bottom: 2dvh;
}

.item-button-container {
    height: 8dvh;

    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: 0;
    margin-bottom: 1dvh;
}

.item-add-to-cart-button {
    font-family: 'Bahnschrift', sans-serif;
    font-size: 2.5dvh;

    width: 100%;

    padding: 2dvh;

    border-width: 0.3dvh;
    border-radius: 2dvh;

    /* background-color: white; */
    background-color: rgb(255, 252, 247);
    color: gray;
    border-color: gray;
    border-style: solid;
    
    transition: background-color 0.1s ease-in-out, border-width 0.1s ease-in-out;

    cursor: pointer;
}

.item-add-to-cart-button:hover {
    border-width: 0.4dvh;
    background-color: rgb(237, 212, 101);
}

.item-buy-now-button {
    font-family: 'Bahnschrift', sans-serif;
    font-size: 2.5dvh;

    color:black;

    width: 100%;

    padding: 2dvh;

    border-width: 0.3dvh;
    border-radius: 2dvh;

    /* background-color: white; */
    background-color: rgb(255, 252, 247);
    
    transition: background-color 0.1s ease-in-out, border-width 0.1s ease-in-out;

    cursor: pointer;
}

.item-buy-now-button.complete-purchase{
    background-color: white;    
}

.item-buy-now-button:hover {
    border-width: 0.4dvh;
    background-color: rgb(237, 212, 101);
}

.checkout-item-wrapper {
    width: 100%;

    padding-bottom: 3dvh;

    box-sizing: border-box;
}

.checkout-back-button {
    position: absolute;
    top: 0;
}

/* --- Tokens with safe fallbacks --- */
:root {
  --p-inputSpacingY: 0px;          /* vertical padding handled by height/align */
  --p-inputSpacingX: 12px;         /* horizontal breathing room */
  --colorBackground: #fff;
  --borderRadius: 16px;
  --p-colorBackgroundDeemphasize10: rgba(0,0,0,0.10);
  --accent: #0074d4;               /* focus color */

  --c-inputHeight: 44px;           /* outer wrapper height */
  --c-inputBorderTopWidth: 1px;    /* wrapper border widths; keep consistent */
  --c-inputBorderBottomWidth: 1px;
  --c-inputFontSize: 16px;
  --c-inputFontColor: #30313d;
  --c-inputColorScheme: light;
}

/* ==========================
   Stripe-style wrapper
   - single border radius source
   - border-box sizing
   - focus ring via :focus-within so it's rounded
   - vertical thickness driven by height, not padding
   ========================== */
.stripe-style-input {

    font-family: system-ui, sans-serif;
    width: 100%;
    /* margin-bottom: 3dvh; */

    box-sizing: border-box;
    display: flex;                   /* vertically center the child input */
    align-items: center;
    height: var(--c-inputHeight);

    padding: var(--p-inputSpacingY) var(--p-inputSpacingX);
    background-color: var(--colorBackground);
    border-radius: var(--borderRadius);
    border: 1px solid var(--p-colorBackgroundDeemphasize10);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.03), 0px 3px 6px rgba(0,0,0,0.02);

    transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Rounded focus ring applied to the WRAPPER */
.stripe-style-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent), 0px 1px 1px rgba(0,0,0,0.03), 0px 3px 6px rgba(0,0,0,0.02);
}

/* ==========================
   Actual input element
   - no border, no extra padding
   - inherits color/size
   - outline removed; wrapper handles focus visuals
   ========================== */
.stripe-style-input .stripe-style-input-input {
  -webkit-animation: native-autofill-out 1ms; animation: native-autofill-out 1ms;
  color-scheme: var(--c-inputColorScheme);
  width: 100%;
  border: 0; margin: 0; padding: 0; background: transparent;

  /* resets similar to your globals */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border-radius: 0; box-shadow: none; color: inherit; -webkit-filter: none; filter: none;
  font: inherit; letter-spacing: inherit; outline: none; outline-offset: 0; outline-width: 0;

  font-size: var(--c-inputFontSize);
  color: var(--c-inputFontColor);
  line-height: calc(var(--c-inputHeight) - var(--c-inputBorderTopWidth) - var(--c-inputBorderBottomWidth));
  min-height: calc(var(--c-inputHeight) - var(--c-inputBorderTopWidth) - var(--c-inputBorderBottomWidth));
}

/* Chrome/Safari/Edge: Style autofill background and text */
.stripe-style-input .stripe-style-input-input:-webkit-autofill,
.stripe-style-input .stripe-style-input-input:-webkit-autofill:hover,
.stripe-style-input .stripe-style-input-input:-webkit-autofill:focus,
.stripe-style-input .stripe-style-input-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important; /* Match your background; use 'inset' for inner shadow */
    -webkit-text-fill-color: #30313d !important; /* Match your text color */
    background-color: transparent !important; /* Fallback */
    border-radius: 1dvh !important;
    font-family: system-ui, sans-serif !important; /* Match your font */
    font-size: 16px !important;
}

/* Firefox: Style autofill */
.stripe-style-input .stripe-style-input-input:-moz-autofill {
    background-color: transparent !important;
    color: #30313d !important;
    border-radius: 1dvh !important;
    font-family: system-ui, sans-serif !important;
    font-size: 16px !important;
}

/* Placeholder tone */
.stripe-style-input .stripe-style-input-input::placeholder {
  color: #77787e;
}
/* Autofill fix hooks (keep as no-ops) */
@-webkit-keyframes native-autofill-out { from {opacity:1} to {opacity:1} }
@keyframes native-autofill-out { from {opacity:1} to {opacity:1} }

/* ===== Optional: Inward-cut top shadow variant (toggle class on wrapper) ===== */
.stripe-style-input.is-inset {
  /* Subtle inward shadow from the top edge, without affecting size */
  box-shadow: inset 0 -10px 14px -14px rgba(0,0,0,0.7), 0px 1px 1px rgba(0,0,0,0.03), 0px 3px 6px rgba(0,0,0,0.02);
}
.stripe-style-input.is-inset:focus-within {
  box-shadow: inset 0 -14px 18px -16px rgba(0,0,0,0.8), 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent), 0px 1px 1px rgba(0,0,0,0.03), 0px 3px 6px rgba(0,0,0,0.02);
}