.shop{padding-top:160px;padding-bottom:100px;min-height:70vh}.shop-top,.shop-price{display:flex;justify-content:space-between;align-items:center;gap:18px}.shop-top{padding-bottom:30px;border-bottom:1px solid var(--color-line);font-size:14px}.shop-heading{padding:55px 0;max-width:760px}.shop h1{font-family:var(--font-display);font-size:clamp(36px,5vw,64px);line-height:1.14;margin:18px 0 24px;font-weight:400}.shop p{color:var(--color-muted);line-height:1.7}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.shop-card{border:1px solid var(--color-line);border-radius:4px;overflow:hidden;transition:transform .2s}.shop-card:hover{transform:translateY(-4px)}.shop-media{aspect-ratio:1;background:#262a22;display:grid;place-items:center;overflow:hidden}.shop-media img{width:100%;height:100%;object-fit:cover}.shop-placeholder{font-family:var(--font-display);font-size:90px;color:var(--color-cream);text-align:center}.shop-placeholder span{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:3px;margin-top:20px}.shop-card-body{padding:26px}.shop h2{font-family:var(--font-display);font-weight:400;font-size:25px;margin:16px 0}.shop-card-body p{min-height:3em}.shop-price{padding-top:20px;border-top:1px solid var(--color-line);font-size:16px}.shop-detail{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding-top:55px;align-items:start}.shop-detail h1{font-size:clamp(32px,4vw,50px)}.shop-description{white-space:pre-line;color:var(--color-muted);line-height:1.8;margin:24px 0}.shop-form{display:grid;gap:12px;margin-top:28px}.shop-form label,.shop-quantity label{font-size:14px}.shop input,.shop select,.shop textarea{width:100%;background:#24231f;border:1px solid #777266;color:var(--color-text);padding:13px 15px;border-radius:3px;font:inherit}.shop select option{background:#24231f}.shop input:focus-visible,.shop select:focus-visible,.shop textarea:focus-visible,.shop a:focus-visible,.shop button:focus-visible{outline:2px solid var(--color-gold);outline-offset:4px}.shop-form button{margin-top:12px}.shop button:disabled{opacity:.45;cursor:not-allowed}.shop-muted{font-size:14px}.shop-empty{grid-column:1/-1;text-align:center;padding:65px 25px;border:1px solid var(--color-line);background:var(--color-bg-soft)}.shop-empty .button{margin-top:20px}.shop-notice{padding:18px 24px;margin-top:24px;border:1px solid #607b50;background:#202b1c}.shop-notice--error{border-color:var(--color-gold);background:#32211e}.shop-checkout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}.shop-summary{padding:30px;background:var(--color-bg-soft);border:1px solid var(--color-line)}.shop-cart-line{padding:24px 0;border-bottom:1px solid var(--color-line)}.shop-quantity{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0}.shop-quantity input{width:75px}.shop-quantity .button{padding:12px 16px;min-height:44px}.shop-remove{background:none;border:0;color:var(--color-text);text-decoration:underline;cursor:pointer;padding:12px;font:inherit}.shop-warning{color:#f1a79f!important}.shop-back{display:inline-block;margin-top:28px}.shop-pagination{display:flex;gap:28px;justify-content:center;margin-top:40px}@media(max-width:1000px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-detail{gap:30px}.shop-checkout{gap:25px}}@media(max-width:650px){.shop{padding-top:120px;padding-bottom:60px}.shop-heading{padding:35px 0}.shop-grid,.shop-detail,.shop-checkout{grid-template-columns:1fr}.shop-top{font-size:12px}.shop-summary{padding:22px}.shop-detail{padding-top:30px}}

/* Product catalog: simple framed cards on a white surface. */
.shop-page:has(.shop--catalog) {
    background: #fff;
    color: #252525;
}
.shop--catalog {
    min-height: 0;
    padding-top: 140px;
    padding-bottom: 70px;
}
.shop--catalog .shop-top { display: none; }
.shop-catalog-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.shop--catalog .shop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
}
.shop--catalog .shop-card {
    display: flex;
    flex-direction: column;
    flex: 0 1 296px;
    max-width: 100%;
    padding: 4px;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fff;
    color: #252525;
    transition: border-color .2s;
}
.shop--catalog .shop-card:hover {
    transform: none;
    border-color: #bcbcbc;
}
.shop--catalog .shop-media {
    display: grid;
    aspect-ratio: 1;
    background: #f3f2ed;
}
.shop--catalog .shop-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shop--catalog .shop-placeholder { color: #77725f; }
.shop--catalog .shop-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px 16px;
    font-family: Arial, sans-serif;
}
.shop-card__category {
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}
.shop--catalog .shop-card h2 {
    margin: 12px 0 8px;
    color: #262626;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 400;
}
.shop--catalog .shop-card-body p {
    min-height: 0;
    margin: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.shop-card__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: auto;
    padding-top: 24px;
}
.shop-card__price { color: #777; }
.shop-card__price small { display: block; margin-bottom: 5px; font-size: 11px; }
.shop-card__price strong { font-size: 16px; font-weight: 700; }
.shop-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #dedede;
    background: #fff;
    color: #20242a;
    font-size: 13px;
    line-height: 1.2;
    transition: background .2s, border-color .2s;
}
.shop-card__cta:hover { background: #f3f3f0; border-color: #aaa; }
.shop--catalog a:focus-visible { outline: 2px solid #7b5144; outline-offset: 3px; }
.shop--catalog .shop-empty { width: 100%; background: #f7f7f5; border-color: #e2e2e2; }
.shop--catalog .shop-empty p { color: #666; }
.shop--catalog .shop-pagination { color: #333; }
@media (max-width: 650px) {
    .shop--catalog { padding-top: 110px; padding-bottom: 45px; }
    .shop--catalog .shop-grid { gap: 24px; }
    .shop-card__cta { min-height: 44px; }
}

/* Product detail */
.shop-page:has(.shop--product) { background: #fff; color: #252525; }
.shop--product { min-height: 0; padding-top: 140px; padding-bottom: 80px; }
.shop--product .shop-top { display: none; }
.product-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.product-gallery { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; }
.product-gallery__thumbs { display: grid; gap: 12px; }
.product-gallery__thumb { display: block; border: 1px solid #ddd; padding: 3px; background: #fff; }
.product-gallery__thumb[aria-current="true"] { border-color: #333; }
.product-gallery__thumb img { width: 100%; height: 72px; object-fit: contain; }
.product-gallery__main { position: relative; display: block; padding-bottom: 14px; background: #f1f1f1; }
.product-gallery__main img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; background: #fff; }
.product-gallery__zoom { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px #0002; color: #333; }
.product-gallery__placeholder { grid-column: 1 / -1; display: grid; place-items: center; aspect-ratio: 1; background: #f3f2ed; }
.product-gallery__placeholder .shop-placeholder { color: #77725f; }
.shop--product h1 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; color: #262626; }
.product-purchase { font-family: Arial, sans-serif; }
.shop--product .product-purchase__intro { margin: 0 0 20px; font-size: 13px; line-height: 1.6; color: #555; }
.shop--product .product-purchase__price { margin: 0 0 26px; color: #555; font-size: 17px; }
.product-purchase__form { display: grid; gap: 8px; }
.product-purchase__form label { display: block; font-size: 12px; color: #666; margin-bottom: 5px; }
.shop--product select, .shop--product input { border: 1px solid #d7d7d7; border-radius: 0; background: #fff; color: #333; font-family: Arial, sans-serif; font-size: 13px; padding: 10px 12px; min-height: 42px; }
.shop--product select option { background: #fff; color: #333; }
.product-purchase__actions { display: flex; align-items: flex-end; gap: 16px; margin-top: 8px; }
.product-purchase__actions input { width: 72px; }
.product-purchase__actions button { min-height: 42px; padding: 12px 30px; border: 1px solid #272a2e; background: #272a2e; color: #fff; font: 600 12px Arial, sans-serif; cursor: pointer; }
.product-purchase__actions button:hover { background: #414448; }
.shop--product .product-purchase__note { margin-top: 24px; color: #777; font-size: 12px; line-height: 1.6; }
.product-description { margin-top: 60px; }
.product-description__heading { display: flex; justify-content: center; border-bottom: 1px solid #d9d9d9; }
.shop--product .product-description__heading h2 { margin: 0; padding: 14px 20px; border-bottom: 2px solid #333; font: 400 14px Arial, sans-serif; color: #333; }
.product-description__content { max-width: 780px; margin: 34px auto 0; color: #333; font-size: 14px; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.shop--product a:focus-visible, .shop--product input:focus-visible, .shop--product select:focus-visible, .shop--product button:focus-visible { outline: 2px solid #7b5144; outline-offset: 3px; }
@media (max-width: 650px) {
    .shop--product { padding-top: 110px; padding-bottom: 45px; }
    .product-overview { grid-template-columns: 1fr; gap: 30px; }
    .product-gallery { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .product-gallery__thumb img { height: 55px; }
    .product-gallery__main img { max-height: 420px; }
    .product-purchase__actions button { min-height: 44px; flex: 1; }
    .product-description { margin-top: 35px; }
}

/* Cart */
.shop-page:has(.shop--cart) { background: #fff; color: #555; }
.shop--cart { min-height: 0; padding-top: 125px; padding-bottom: 70px; font-family: Arial, sans-serif; }
.shop--cart .shop-top { display: none; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 2.08fr) minmax(290px, 1fr); gap: 30px; align-items: start; }
.cart-panel, .cart-summary { padding: 22px; border: 1px solid #e6e3df; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px #24242408; }
.cart-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.shop--cart .cart-heading h1 { margin: 0 0 8px; font: 700 21px/1.3 Arial, sans-serif; color: #555; }
.shop--cart .cart-heading p { margin: 0; font-size: 13px; line-height: 1.5; color: #62707a; }
.cart-badge { flex-shrink: 0; display: inline-block; border: 1px solid #edd5af; border-radius: 999px; background: #faf3e7; color: #996519; padding: 10px 12px; font-size: 12px; font-weight: 600; }
.cart-info { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #efd7af; border-radius: 18px; background: linear-gradient(105deg,#fff8ed,#fff); margin-bottom: 18px; }
.cart-info__icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px; background: #f4ead7; color: #a5762d; font-size: 25px; }
.cart-info strong { font-size: 15px; font-weight: 500; }
.shop--cart .cart-info p { margin: 6px 0 0; color: #62707a; font-size: 12px; line-height: 1.5; }
.cart-items { display: grid; gap: 18px; }
.cart-item { padding: 18px; border: 1px solid #e7e3df; border-radius: 20px; }
.cart-item__heading { display: flex; align-items: flex-start; gap: 15px; }
.cart-item__image { display: grid; place-items: center; width: 94px; height: 110px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: #f4f2eb; color: #8b8062; }
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__name { flex: 1; min-width: 0; }
.shop--cart .cart-item h2 { margin: 2px 0 8px; font: 700 16px/1.4 Arial, sans-serif; color: #505050; overflow-wrap: anywhere; }
.shop--cart .cart-item__name p { margin: 0; color: #888; font-size: 13px; line-height: 1.6; }
.cart-remove { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #efdcdc; border-radius: 50%; background: white; color: #c65555; cursor: pointer; }
.cart-remove:hover { background: #fff1f1; }
.cart-remove svg { width: 19px; height: 19px; }
.cart-item__metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.cart-metric { padding: 14px; border: 1px solid #eee8e1; border-radius: 16px; background: #faf9f7; min-width: 0; }
.cart-metric > span, .cart-metric > label { display: block; color: #888; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.cart-metric strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.cart-stepper { display: inline-flex; border: 1px solid #dedbd5; border-radius: 10px; overflow: hidden; max-width: 100%; }
.shop--cart .cart-stepper input { width: 40px; min-width: 0; padding: 7px 2px; border: 0; border-radius: 0; background: #fff; color: #555; text-align: center; font-weight: 700; font-size: 14px; appearance: textfield; -moz-appearance: textfield; }
.cart-stepper input::-webkit-inner-spin-button, .cart-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-stepper button { width: 28px; border: 0; background: #f6f5f2; color: #555; font-size: 17px; cursor: pointer; flex-shrink: 0; }
.cart-stepper button[hidden] { display: none; }
.cart-continue { display: inline-block; margin: 22px 0; font-size: 13px; }
.cart-summary { position: sticky; top: 100px; }
.shop--cart .cart-summary h2 { font: 400 24px var(--font-display); color: #292c30; margin: 0 0 24px; }
.cart-summary__row { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; margin-bottom: 20px; }
.cart-summary__row strong { color: #292c30; text-align: right; }
.cart-summary__shipping { font-size: 12px; color: #777; }
.cart-summary__total { background: #f7f7f5; border-radius: 18px; padding: 20px 18px; margin-bottom: 20px; }
.cart-summary__total > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cart-summary__total > div > span { font-size: 14px; }
.cart-summary__total strong { display: block; text-align: right; font-size: 23px; line-height: 1.5; }
.shop--cart .cart-summary__total p { margin: 14px 0 0; font-size: 12px; color: #64705c; line-height: 1.7; }
.cart-primary { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 18px; border: 1px solid #262a30; border-radius: 14px; background: #262a30; color: white; font: 700 14px/1.4 Arial,sans-serif; text-align: center; cursor: pointer; }
.cart-primary:hover { background: #3b4046; }
.shop--cart .cart-error { font-size: 13px; color: #ad4141; line-height: 1.6; }
.cart-empty { text-align: center; padding: 60px 25px; border: 1px solid #e6e3df; border-radius: 22px; }
.shop--cart .cart-empty h1 { font-size: 32px; color: #333; }
.shop--cart .cart-empty p { color: #777; }
.cart-empty .cart-primary { max-width: 250px; margin: 28px auto 0; }
.shop--cart a:focus-visible, .shop--cart input:focus-visible, .shop--cart textarea:focus-visible, .shop--cart button:focus-visible { outline: 2px solid #987342; outline-offset: 3px; }
@media(max-width:1000px) { .cart-layout { grid-template-columns: 1fr; gap: 24px; } .cart-summary { position: static; } }
@media(max-width:650px) {
    .shop--cart { padding-top: 105px; padding-bottom: 45px; }
    .cart-panel, .cart-summary { padding: 16px; border-radius: 18px; }
    .cart-heading { align-items: flex-start; gap: 10px; }
    .shop--cart .cart-heading h1 { font-size: 18px; }
    .cart-badge { padding: 8px; font-size: 11px; }
    .cart-info { padding: 14px; }
    .cart-item { padding: 14px; }
    .cart-item__image { width: 66px; height: 80px; }
    .cart-item__heading { gap: 10px; }
    .cart-item__metrics { grid-template-columns: 1fr; gap: 8px; }
    .cart-metric { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
    .cart-metric > span, .cart-metric > label { margin: 0; }
    .cart-stepper button { width: 36px; min-height: 40px; }
    .cart-remove { width: 40px; height: 40px; }
}

/* Billing and delivery checkout */
.shop-page:has(.shop--checkout) { background: #fff; color: #30343a; }
.shop--checkout { min-height: 0; padding-top: 115px; padding-bottom: 70px; max-width: 1040px; font-family: Arial, sans-serif; }
.shop--checkout .shop-top { display: none; }
.checkout-heading { text-align: center; margin-bottom: 30px; }
.shop--checkout .checkout-heading h1 { font-size: 34px; margin: 0 0 10px; color: #292c30; }
.shop--checkout .checkout-heading p { font-size: 13px; margin: 0; color: #777; }
.checkout-progress { display: flex; justify-content: center; gap: 24px; padding: 0; list-style: none; margin: 22px 0 0; font-size: 12px; color: #999; }
.checkout-progress [aria-current="step"] { color: #292c30; font-weight: 700; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 26px; align-items: start; }
.checkout-sections { display: grid; gap: 22px; }
.checkout-panel { padding: 24px; border: 1px solid #e6e3df; border-radius: 16px; background: white; box-shadow: 0 12px 30px #25252507; min-width: 0; }
.shop--checkout .checkout-panel h2 { margin: 0 0 22px; color: #333; font: 600 16px Arial,sans-serif; }
.checkout-panel h2 > span { color: #a78e68; font-size: 11px; margin-right: 8px; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkout-wide { grid-column: 1 / -1; }
.checkout-fields > div { min-width: 0; }
.shop--checkout label { display: block; color: #555; font-size: 12px; line-height: 1.5; margin-bottom: 6px; }
.shop--checkout label > span:not(:last-child), .checkout-fields label > span { color: #ac4840; }
.shop--checkout input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .shop--checkout textarea, .shop--checkout select { width: 100%; min-height: 42px; background: white; color: #333; border: 1px solid #dcdfe2; border-radius: 5px; padding: 11px; font: 13px Arial,sans-serif; }
.shop--checkout select option { background: white; color: #333; }
.shop--checkout input::placeholder, .shop--checkout textarea::placeholder { color: #999; }
.checkout-field { margin-top: 18px; }
.checkout-panel h2 + .checkout-field { margin-top: 0; }
.shop--checkout fieldset { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.shop--checkout fieldset[hidden] { display: none; }
.shop--checkout legend { font-size: 12px; color: #777; margin-bottom: 12px; }
.shop--checkout .checkout-checkbox { display: flex; align-items: center; gap: 10px; margin: 20px 0; cursor: pointer; }
.shop--checkout input[type="checkbox"], .shop--checkout input[type="radio"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: #333; padding: 0; }
.shop--checkout .checkout-country { margin: 0; color: #888; font-size: 12px; }
.shop--checkout .checkout-payment { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid #d7b481; border-radius: 10px; background: #fffcf6; }
.checkout-payment svg { width: 28px; height: 28px; flex-shrink: 0; color: #846b47; }
.checkout-payment strong { display: block; font-size: 14px; color: #333; }
.checkout-payment small { display: block; color: #777; font-size: 11px; margin-top: 4px; }
.checkout-payment-note { padding: 16px; margin-top: 16px; border-radius: 8px; background: #f7f7f5; font-size: 12px; color: #666; }
.shop--checkout .checkout-payment-note p { color: #777; font-size: 12px; margin: 8px 0 0; }
.checkout-summary { position: sticky; top: 100px; }
.shop--checkout .checkout-summary h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 8px; font-weight: 400; }
.shop--checkout .checkout-summary__caption { margin: 0 0 20px; color: #888; font-size: 11px; }
.checkout-summary__caption a { text-decoration: underline; }
.checkout-summary__item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #ececec; }
.checkout-summary__item img { width: 52px; height: 64px; object-fit: cover; border-radius: 6px; }
.checkout-summary__item > div { flex: 1; min-width: 0; }
.checkout-summary__item strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.checkout-summary__item small { display: block; color: #888; font-size: 11px; margin-top: 6px; }
.checkout-summary__item span { display: block; margin-top: 10px; font-size: 13px; text-align: right; }
.checkout-summary__row { display: flex; justify-content: space-between; gap: 15px; margin-top: 20px; font-size: 12px; color: #666; }
.checkout-summary__total { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; margin-top: 20px; border-top: 1px solid #e5e5e5; font-size: 13px; }
.checkout-summary__total strong { font-size: 20px; text-align: right; }
.checkout-summary .cart-primary { width: 100%; min-height: 46px; border-radius: 8px; font-size: 13px; }
.shop--checkout .checkout-summary__note { padding: 12px; margin: 14px 0 0; background: #f6f7f7; border-radius: 8px; color: #888; font-size: 11px; line-height: 1.6; }
.shop--checkout .shop-notice { background: #f3f7ef; color: #3c5432; border-radius: 8px; margin: 0 0 24px; font-size: 13px; }
.shop--checkout .shop-notice--error { background: #fff4f2; color: #984b42; }
.shop--checkout :is(input,select,textarea,button,a):focus-visible { outline: 2px solid #9b7c50; outline-offset: 3px; }
@media(max-width:800px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; } }
@media(max-width:480px) { .shop--checkout { padding-top: 105px; } .checkout-panel { padding: 18px; } .checkout-fields { grid-template-columns: 1fr; } .checkout-progress { gap: 18px; } }

#credit-card { scroll-margin-top: 110px; }
.checkout-card-frame { width: 100%; min-height: 660px; border: 0; margin-top: 16px; background: #fff; }
.checkout-card-frame[hidden], [data-payment-submit][hidden] { display: none; }
.checkout-inline-error { margin-top: 16px; padding: 14px; background: #fff1ee; color: #923c31; border: 1px solid #ecc6bf; border-radius: 8px; font-size: 13px; }
.shop--checkout .checkout-inline-status { color: #666; font-size: 12px; }
@media(max-width:480px) { .checkout-card-frame { min-height: 720px; } }

/* VKoffee card form, matching the Decollage payment card. */
.shop-card-wrap { width: min(100%, 430px); aspect-ratio: 430 / 245; perspective: 1200px; margin: 24px 0 30px; }
.shop-credit-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.shop-credit-card.is-flipped { transform: rotateY(180deg); }
.shop-card-face { position: absolute; inset: 0; padding: 24px; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; color: #fff; box-shadow: 0 22px 35px rgba(20,23,28,.18); background: radial-gradient(circle at 85% 20%,rgba(255,255,255,.22),transparent 26%),linear-gradient(135deg,#22252c,#4a4e58 55%,#1e2026); display: flex; flex-direction: column; justify-content: space-between; }
.shop-card-face::before { content: ''; position: absolute; inset: -70px; background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12),transparent 62%); transform: rotate(14deg); pointer-events: none; }
.shop-card-chip { width: 54px; height: 42px; border-radius: 10px; background: linear-gradient(135deg,#ddc08b,#f5dfab,#a87b3d); flex-shrink: 0; }
.shop-card-number { font-size: clamp(15px, 3.8vw, 23px); letter-spacing: 1.5px; font-weight: 700; position: relative; white-space: nowrap; }
.shop-card-bottom { display: flex; align-items: flex-end; gap: 18px; position: relative; }
.shop-card-bottom > div:first-child { flex: 1; min-width: 0; }
.shop-card-bottom small { display: block; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #d0d0d2; margin-bottom: 5px; }
.shop-card-bottom strong { display: block; font-size: 14px; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.shop-card-bottom b { font-size: 16px; }
.shop-card-back { transform: rotateY(180deg); padding: 0; justify-content: flex-start; }
.shop-card-stripe { background: #111; height: 50px; margin-top: 30px; }
.shop-card-cvv { margin: 20px 24px; text-align: right; }
.shop-card-cvv small { font-size: 12px; }
.shop-card-cvv strong { display: block; background: #fff; color: #222; border-radius: 6px; padding: 12px; letter-spacing: 3px; margin-top: 6px; }
.shop-card-expiration { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.checkout-payment-note[hidden], .checkout-inline-error[hidden] { display: none; }
@media (max-width: 480px) { .shop-card-face { padding: 18px; border-radius: 18px; } .shop-card-back { padding: 0; } .shop-card-chip { width: 44px; height: 32px; } .shop-card-bottom { gap: 12px; } .shop-card-bottom strong { font-size: 12px; } .shop-card-bottom b { font-size: 12px; } .shop-card-expiration { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .shop-credit-card { transition: none; } }

/* Order result pages */
.shop--result { background: #fff; min-height: 0; padding-top: 140px; padding-bottom: 72px; }
.shop--result .shop-top { display: none; }
.payment-result { max-width: 1080px; margin: 0 auto; color: #292c30; --result-accent: #ad8551; --result-tint: #fff8ec; --result-border: #ead9bf; }
.payment-result--paid { --result-accent: #28855b; --result-tint: #f2faf5; --result-border: #cce5d6; }
.payment-result--failed { --result-accent: #d3424d; --result-tint: #fff5f5; --result-border: #f0c8cb; }
.result-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 28px; border: 1px solid #e6dccf; border-radius: 22px; background: linear-gradient(110deg,#fff 35%,#f7eddf); box-shadow: 0 10px 30px #25282c08; margin-bottom: 22px; }
.payment-result--failed .result-banner { background: linear-gradient(110deg,#fff 65%,#fff1f2); }
.shop--result .result-banner h1 { color: #262a2e; font-size: clamp(24px,3vw,34px); line-height: 1.2; margin: 5px 0 10px; }
.shop--result p { color: #70747a; font-size: 13px; line-height: 1.7; margin: 5px 0 0; }
.result-eyebrow { font-size: 10px; letter-spacing: 1.5px; color: #9b805e; }
.result-banner > div { flex: 1; }
.result-state-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; background: var(--result-tint); color: var(--result-accent); border-radius: 12px; font-size: 26px; }
.result-badge { align-self: flex-start; flex-shrink: 0; border: 1px solid var(--result-border); background: var(--result-tint); color: var(--result-accent); font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 20px; }
.result-panel { background: #fff; border: 1px solid #e6e3df; border-radius: 18px; box-shadow: 0 8px 28px #24272c07; overflow: hidden; }
.result-status { padding: 22px; margin-bottom: 22px; }
.result-status-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.shop--result h2 { color: #303236; font-size: 16px; line-height: 1.4; margin: 0; }
.shop--result h3 { color: #303236; font-size: 14px; line-height: 1.5; margin: 0; }
.result-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; }
.result-facts > div { padding: 13px 15px; background: #faf9f7; border: 1px solid #ebe7e2; border-radius: 10px; }
.shop--result dt { font-size: 11px; color: #7e8084; }
.shop--result dd { margin: 5px 0 0; font-size: 12px; color: #33373b; font-weight: 600; overflow-wrap: anywhere; }
.result-columns { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(270px,1fr); gap: 22px; align-items: start; }
.result-main { display: grid; gap: 22px; min-width: 0; }
.result-panel-heading { padding: 16px 20px; border-bottom: 1px solid #eeeae5; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.result-panel-heading h2 { font-size: 15px; }
.result-panel-heading h2 span { color: #b38a53; margin-right: 7px; }
.result-panel-heading > span { color: #8a8c8f; font-size: 11px; }
.result-panel-body { padding: 20px; }
.result-product { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid #eeeae5; }
.result-product:first-child { padding-top: 0; }
.result-product:last-child { padding-bottom: 0; border-bottom: 0; }
.result-product img, .result-product-placeholder { width: 64px; height: 76px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.result-product-placeholder { display: grid; place-items: center; background: #f6eee3; font-size: 27px; }
.result-product > div { flex: 1; min-width: 0; }
.result-product p { font-size: 12px; }
.result-product small { color: #898b8f; font-size: 11px; }
.result-product > strong { font-size: 14px; white-space: nowrap; }
.result-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.result-detail-card { border: 1px solid #ebe7e2; border-radius: 12px; padding: 16px; overflow-wrap: anywhere; }
.result-detail-card:first-child { grid-column: 1 / -1; }
.result-detail-card h3 { margin-bottom: 12px; }
.result-detail-card > strong { font-size: 12px; }
.result-detail-card dl { margin: 0; }
.result-detail-card dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid #f1eeea; }
.result-detail-card dl > div:last-child { border: 0; }
.result-detail-card dd { margin: 0; text-align: right; }
.result-detail-card small { font-size: 11px; color: #787c80; }
.result-summary { position: sticky; top: 100px; }
.result-summary dl { margin: 0; }
.result-summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #eeeae5; }
.result-summary dd { margin: 0; text-align: right; }
.result-summary .result-summary-total { padding: 20px 0; border-bottom: 0; }
.result-summary-total dd { font-size: 21px; font-weight: 750; }
.result-summary-note { padding: 16px; border-radius: 12px; background: var(--result-tint); border: 1px solid var(--result-border); }
.result-summary-note strong { color: var(--result-accent); font-size: 13px; }
.result-summary-note p { font-size: 12px; }
.result-shipping-note { display: block; margin: 12px 0 18px; color: #85878a; font-size: 11px; line-height: 1.6; }
.result-action { width: 100%; padding: 12px 16px; display: flex; justify-content: center; align-items: center; gap: 15px; border: 1px solid #282b30; border-radius: 9px; background: #282b30; color: #fff; text-decoration: none; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .2s; }
.result-action:hover { background: #44484e; color: #fff; }
.result-action:focus-visible { outline: 3px solid #bb9463; outline-offset: 3px; }
.result-action--outline { background: #fff; color: #333; border-color: #d8d5d0; }
.result-summary form { margin: 0 0 12px; }
.result-alert { border: 1px solid var(--result-border); border-left: 3px solid var(--result-accent); border-radius: 12px; background: var(--result-tint); padding: 16px; margin-bottom: 16px; }
.result-alert strong { font-size: 13px; color: var(--result-accent); }
.result-facts--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.result-panel-body > p + .result-action { margin-top: 18px; }
.result-help { background: #faf7f2; border: 1px solid #eaddca; border-radius: 10px; padding: 14px; margin-top: 18px; }
.result-help strong { font-size: 12px; }
.result-help p { font-size: 11px; }
.result-timeline { list-style: none; padding: 22px; margin: 0; }
.result-timeline li { display: flex; gap: 14px; position: relative; padding-bottom: 25px; }
.result-timeline li:last-child { padding-bottom: 0; }
.result-timeline li:not(:last-child)::before { content: ''; position: absolute; top: 29px; left: 14px; bottom: 3px; width: 1px; background: #e8e1d7; }
.result-timeline li > span { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 50%; background: #f2f2f1; color: #9c9c9c; font-size: 14px; }
.result-timeline .is-complete > span { color: #35805b; background: #eef8f1; }
.result-timeline .is-current > span { color: #b78c43; background: #fff4df; }
.result-timeline strong { font-size: 12px; }
.result-timeline p { font-size: 11px; margin-top: 2px; }
@media(max-width: 760px) { .result-columns { grid-template-columns: 1fr; } .result-summary { position: static; } .result-banner { flex-wrap: wrap; padding: 22px; gap: 12px; } .result-banner > div { min-width: 70%; } .result-badge { margin-left: 54px; } .result-facts { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 420px) { .result-panel-body, .result-status { padding: 16px; } .result-details { grid-template-columns: 1fr; } .result-product { flex-wrap: wrap; } .result-product > strong { margin-left: 78px; } .result-facts > div { padding: 10px; } .result-summary-total dd { font-size: 19px; } }

/* Readable order pages with a full-width white canvas. */
.shop-page:has(.shop--result), .shop-page:has(.shop--result) #main-content { background: #fff; color: #252a31; }
.shop--result .payment-result { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; }
.shop--result .result-banner h1 { font-size: clamp(26px,3vw,34px); font-weight: 600; color: #20252b; }
.shop--result p { color: #505862; font-size: 14px; line-height: 1.7; }
.shop--result h2, .shop--result h3 { font-family: Arial, Helvetica, sans-serif; font-weight: 600; color: #242a31; }
.shop--result h2 { font-size: 17px; }
.shop--result h3 { font-size: 15px; }
.shop--result dt { font-size: 13px; color: #59616b; }
.shop--result dd { font-size: 14px; color: #20262e; font-weight: 600; }
.shop--result .result-eyebrow { font-size: 11px; color: #80613d; }
.shop--result .result-badge { font-size: 12px; }
.shop--result .result-panel-heading > span, .shop--result .result-product small, .shop--result .result-detail-card small, .shop--result .result-shipping-note { color: #59616b; font-size: 12px; }
.shop--result .result-timeline strong, .shop--result .result-alert strong, .shop--result .result-help strong, .shop--result .result-summary-note strong { font-size: 14px; }
.shop--result .result-timeline p, .shop--result .result-help p { font-size: 13px; }
.shop--result .result-action { font-size: 14px; min-height: 44px; }
.shop--result .result-summary-total dd { font-size: 22px; }

.checkout-pending-payment { padding: 20px 24px; margin: 0 0 24px; border: 1px solid #e3cba6; border-radius: 14px; background: #fffaf2; color: #38342e; }
.checkout-pending-payment strong { font-size: 15px; }
.shop--checkout .checkout-pending-payment p { color: #625541; font-size: 14px; margin: 8px 0 16px; }
.checkout-pending-payment .cart-primary { width: auto; padding-inline: 20px; }