/* =========================================================================
   RichAsians - WooCommerce skin (the buy area)
   ========================================================================= */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  background:var(--steel);border-top:3px solid var(--vp-red);color:#fff;
  font-family:var(--f-mono);font-size:.82rem;list-style:none}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before{color:var(--vp-red)}

/* product grid */
.woocommerce ul.products{display:grid;gap:clamp(1rem,2.4vw,1.6rem);margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:100%!important;margin:0!important;float:none!important;padding:1.2rem;text-align:left;
  background:var(--steel);border:1px solid var(--hair);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);border-color:rgba(255,70,85,.5)}
.woocommerce ul.products li.product a img{margin:0 0 1rem;transition:transform .6s var(--ease)}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-display);text-transform:uppercase;font-size:1.25rem!important;
  padding:0!important;line-height:1;color:#fff}
.woocommerce ul.products li.product .price{
  color:var(--vp-red)!important;font-family:var(--f-mono);font-weight:700;font-size:1.05rem;
  display:block;margin:.4rem 0 1rem}
.woocommerce ul.products li.product .price del{color:var(--muted);font-weight:400;font-size:.85rem}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce span.onsale{
  background:var(--vp-red);color:#fff;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;border-radius:0;min-height:auto;min-width:auto;padding:.3rem .6rem;
  top:0;right:0;left:auto;margin:0;line-height:1.4}

/* buttons */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt,.woocommerce #respond input#submit.alt{
  background:var(--vp-red);color:#fff;border-radius:0;font-family:var(--f-mono);font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.9rem 1.5rem;
  transition:background .25s,transform .25s var(--ease);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{
  background:var(--ember);color:#fff;transform:translateY(-2px)}
.woocommerce a.added_to_cart{display:inline-block;margin-top:.6rem;font-family:var(--f-mono);font-size:.72rem}

/* single product */
.woocommerce div.product .product_title{font-family:var(--f-display);text-transform:uppercase;font-size:var(--step-3)}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--vp-red);font-family:var(--f-mono);font-size:1.8rem;font-weight:700}
.woocommerce div.product .woocommerce-product-details__short-description{color:#C9C9D4}
.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce .quantity input.qty{background:#0E0E14;border:1px solid var(--hair);color:#fff;height:48px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 1.5rem;border-bottom:1px solid var(--hair)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;margin:0 1.4rem 0 0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:.9rem 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--vp-red)}
.woocommerce div.product .woocommerce-tabs .panel{color:#C9C9D4}
.woocommerce .star-rating span,.woocommerce p.stars a{color:var(--vp-red)}

/* cart + checkout */
.woocommerce table.shop_table{border:1px solid var(--hair);border-radius:0;background:var(--steel)}
.woocommerce table.shop_table th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);background:#0E0E14}
.woocommerce table.shop_table td{border-top:1px solid var(--hair);color:#E4E4EC}
.woocommerce-cart table.cart img{width:60px}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-family:var(--f-display);text-transform:uppercase}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container--default .select2-selection--single{
  background:#0E0E14!important;border:1px solid var(--hair)!important;color:#fff!important;
  padding:.8rem 1rem!important;height:auto!important;border-radius:0!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#fff;line-height:1.6}
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register,
.woocommerce-checkout #payment{background:var(--steel);border:1px solid var(--hair);border-radius:0}
.woocommerce-checkout #payment div.payment_box{background:#0E0E14;color:#C9C9D4}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#0E0E14}
.woocommerce .woocommerce-ordering select{background:#0E0E14;border:1px solid var(--hair);color:#fff;padding:.7rem 1rem}
.woocommerce nav.woocommerce-pagination ul{border:0;gap:.4rem;display:flex}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--hair);padding:.6rem .95rem;font-family:var(--f-mono);font-size:.8rem;color:#fff}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--vp-red);color:#fff}

/* theme extras injected into the loop */
.ra-vp-badge{position:absolute;left:0;top:0;background:#0B0B0F;border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;
  padding:.3rem .6rem;color:var(--vp-red);text-transform:uppercase;z-index:2}
.ra-delivery{display:flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.ra-delivery i{width:6px;height:6px;border-radius:50%;background:var(--online)}

/* ==========================================================================
   MY ACCOUNT
   ========================================================================== */
/* The account grid lives in style.css section 24, keyed off the presence of the
   navigation rather than a body class. Repeating it here with higher
   specificity would override that, so it deliberately is not repeated. */

.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--hair)}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--hair)}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:.8rem 1rem;color:var(--muted);font-family:var(--f-mono);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;
  border-left:2px solid transparent;transition:color .2s,background .2s,border-color .2s;
}
.woocommerce-MyAccount-navigation li a:hover{color:#fff;background:rgba(255,255,255,.03)}
.woocommerce-MyAccount-navigation li.is-active a{
  color:#fff;background:rgba(255,70,85,.1);border-left-color:var(--vp-red);
}

.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{margin-top:0}

/* orders table */
.woocommerce-orders-table{width:100%;border-collapse:collapse;font-size:.88rem}
.woocommerce-orders-table th{
  text-align:left;font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);padding:.7rem .8rem;border-bottom:1px solid var(--hair);
  font-weight:400;
}
.woocommerce-orders-table td{padding:.85rem .8rem;border-bottom:1px solid var(--hair);vertical-align:middle}
.woocommerce-orders-table tr:hover td{background:rgba(255,255,255,.02)}
.woocommerce-orders-table__cell-order-number a{color:var(--vp-red);font-family:var(--f-mono)}
@media(max-width:720px){
  .woocommerce-orders-table thead{display:none}
  .woocommerce-orders-table tr{display:block;border:1px solid var(--hair);margin-bottom:.8rem;padding:.4rem}
  .woocommerce-orders-table td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.45rem .6rem}
  .woocommerce-orders-table td::before{
    content:attr(data-title);font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;
    letter-spacing:.12em;color:var(--muted);
  }
}

/* order detail */
.woocommerce-order-details,.woocommerce-customer-details{margin-top:2rem}
.woocommerce-table--order-details{width:100%;border-collapse:collapse;font-size:.9rem}
.woocommerce-table--order-details th,.woocommerce-table--order-details td{
  padding:.8rem;border-bottom:1px solid var(--hair);text-align:left;
}
.woocommerce-table--order-details tfoot th{color:var(--muted);font-weight:400}

/* the codes block inside an order line */
.woocommerce-table--order-details .ra-keys{margin-top:.7rem}

.woocommerce-EditAccountForm fieldset{margin-top:1.6rem}
.woocommerce-form-login,.woocommerce-form-register{border:0;padding:0}

/* ==========================================================================
   ACCOUNT LAYOUT, STATED PLAINLY
   WooCommerce ships its own float layout for this screen
   (.woocommerce-MyAccount-navigation{float:left;width:30%}). Mixing that with
   a grid gives a collapsed nav and labels spilling outside their box, so the
   floats are removed outright and the columns declared here, in the sheet that
   loads last.
   ========================================================================== */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float:none;width:auto;margin:0;
}

/* The nav fills its column rather than shrinking to its longest word. */
.woocommerce-MyAccount-navigation{
  width:100%;min-width:0;justify-self:stretch;align-self:start;
}
.woocommerce-MyAccount-navigation ul{
  display:block;width:100%;margin:0;padding:0;list-style:none;
  border:1px solid var(--hair);
}
.woocommerce-MyAccount-navigation li{display:block;width:100%;margin:0}

/* One line per label. Nothing may escape the box. */
.woocommerce-MyAccount-navigation li a{
  display:block;width:100%;padding:.85rem 1rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

.woocommerce-MyAccount-content{width:100%;min-width:0;align-self:start}

/* Narrow enough to stack: the nav becomes a row of its own, full width. */
@media (max-width:880px){
  .woocommerce-MyAccount-navigation li a{white-space:normal}
}

/* The columns, declared here too. This file loads after style.css, so whatever
   else is in play, this is what the browser settles on. */
.woocommerce:has(> .woocommerce-MyAccount-navigation),
body.woocommerce-account .woocommerce{
  display:grid;
  grid-template-columns:minmax(215px,250px) minmax(0,1fr);
  gap:2.4rem;
  align-items:start;
}
.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{grid-column:1}
.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content{grid-column:2}

/* Notices and anything else Woo prints alongside them span the full width
   instead of claiming the nav column. */
.woocommerce:has(> .woocommerce-MyAccount-navigation) > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content),
body.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content){
  grid-column:1/-1;
}

@media (max-width:880px){
  .woocommerce:has(> .woocommerce-MyAccount-navigation),
  body.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation,
  .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content,
  body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content{grid-column:1}
}

/* ==========================================================================
   BLOCK CHECKOUT: DARK SKIN
   The checkout block ships its own light styling and sets it with high
   specificity, so this has to be explicit. Everything here is cosmetic —
   no layout is changed, so WooCommerce updates cannot break the form.
   ========================================================================== */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{
  --wc-blocks-color-white:var(--steel-2);
  color:#E8E8EF;
}

/* ---- headings and labels ---- */
.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wc-block-components-checkout-step__title{
  color:#fff!important;
}
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content{
  color:var(--muted)!important;
}

/* ---- text inputs, selects, textareas ---- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input{
  background:#101018!important;
  color:#fff!important;
  border:1px solid var(--hair)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus,
.wc-block-components-combobox-control input:focus{
  border-color:var(--vp-red)!important;
  outline:2px solid rgba(255,70,85,.25)!important;
  outline-offset:0!important;
}

/* The label floats inside the field, so it needs to read on dark. */
.wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-block-components-select label,
.wc-block-components-select__label{
  color:var(--muted)!important;
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.04em;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label{
  color:var(--vp-red)!important;
}

/* Autofill paints its own background in WebKit unless told otherwise. */
.wp-block-woocommerce-checkout input:-webkit-autofill,
.wp-block-woocommerce-checkout input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #101018 inset;
  caret-color:#fff;
}

/* The select arrow is drawn dark by default and vanishes on dark. */
.wc-block-components-select__container svg,
.wc-block-components-combobox-control svg{fill:var(--muted)}

/* ---- checkboxes and radios ---- */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input{
  background:#101018!important;
  border-color:var(--hair)!important;
}
.wc-block-components-checkbox__input:checked,
.wc-block-components-radio-control__input:checked{
  background:var(--vp-red)!important;
  border-color:var(--vp-red)!important;
}
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label{color:#DCDCE6!important}

/* ---- panels, cards and the summary ---- */
.wc-block-components-panel,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary,
.wc-block-checkout__order-notes,
.wc-block-components-address-card{
  background:var(--steel)!important;
  border-color:var(--hair)!important;
  color:#E8E8EF!important;
}
.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color:rgba(255,70,85,.5)!important;
}
.wc-block-components-panel__button,
.wc-block-components-totals-item__label,
.wc-block-components-order-summary-item__description{color:#DCDCE6!important}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:#fff!important}
.wc-block-components-product-name{color:#fff!important}
.wc-block-components-product-metadata{color:var(--muted)!important}

/* ---- links, notices, validation ---- */
.wp-block-woocommerce-checkout a{color:var(--vp-red)}
.wc-block-components-validation-error,
.wc-block-components-validation-error p{color:#FF8A94!important}
.wc-block-components-text-input.has-error input{border-color:#FF8A94!important}
.wc-block-components-notice-banner{
  background:var(--steel-2)!important;color:#fff!important;border-color:var(--hair)!important;
}
.wc-block-components-notice-banner.is-error{border-color:var(--vp-red)!important}
.wc-block-components-notice-banner.is-success{border-color:var(--online)!important}

/* ---- the place order button, in the theme's language ---- */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.wc-block-components-button--text){
  background:var(--vp-red)!important;
  color:#fff!important;
  border-radius:0!important;
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
  min-height:52px;
}
.wc-block-components-checkout-place-order-button:hover:not([disabled]),
.wc-block-components-button:not(.wc-block-components-button--text):hover{
  background:var(--ember)!important;
}
.wc-block-components-checkout-place-order-button[disabled]{
  background:#2A2A34!important;color:var(--muted)!important;cursor:not-allowed;
}
.wc-block-components-button--text{color:var(--vp-red)!important}

/* ---- the address card shown once a step is filled in ---- */
.wc-block-components-address-card address,
.wc-block-components-address-card__edit{color:#DCDCE6!important}
.wc-block-components-address-card__edit{color:var(--vp-red)!important}

/* ---- step separators ---- */
.wc-block-checkout__form .wc-block-components-checkout-step{
  border-color:var(--hair)!important;
}
.wc-block-components-checkout-step--disabled{opacity:.55}

/* ---- coupon row ---- */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input{
  background:#101018!important;
}

/* ---- guest notice at the top ---- */
.wc-block-checkout__login-prompt,
.wc-block-checkout__guest-checkout-notice{color:var(--muted)!important}

/* ---- cart block, same treatment ---- */
.wp-block-woocommerce-cart .wc-block-cart-item__wrap,
.wp-block-woocommerce-cart table,
.wp-block-woocommerce-cart td,
.wp-block-woocommerce-cart th{
  color:#E8E8EF!important;border-color:var(--hair)!important;
}
.wc-block-cart-item__quantity .wc-block-components-quantity-selector{
  background:#101018;border:1px solid var(--hair);
}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button{color:#fff!important;background:none!important}

@media (max-width:640px){
  .wc-block-components-checkout-place-order-button{min-height:50px}
}

/* ==========================================================================
   SHORT CHECKOUT
   The address fields are switched off server side, so these rules only tidy
   what is left and catch anything a future WooCommerce renders anyway.
   ========================================================================== */
.ra-slim-note{
  font-size:.86rem;color:var(--muted);line-height:1.6;margin:0 0 1.2rem;
  padding-left:.9rem;border-left:2px solid rgba(255,70,85,.5);
}

/* Belt and braces for the block checkout. */
.wc-block-components-address-form .wc-block-components-text-input#billing-address_1,
.wc-block-components-address-form .wc-block-components-text-input#billing-address_2,
.wc-block-components-address-form .wc-block-components-text-input#billing-city,
.wc-block-components-address-form .wc-block-components-text-input#billing-postcode,
.wc-block-components-address-form .wc-block-components-text-input#billing-company,
.wc-block-components-address-form .wc-block-components-select#billing-state,
.wc-block-components-address-form .wc-block-components-combobox#billing-state,
.wc-block-checkout__shipping-fields,
.wc-block-checkout__shipping-option{
  display:none!important;
}

/* Woo hides the "add apartment" toggle's field but leaves the link. */
.wc-block-components-address-address-wrapper .wc-block-components-address-form__address_2-toggle{
  display:none!important;
}

/* Our own fields deserve to look like the point of the form, not an add-on. */
.wc-block-checkout__additional-fields,
.wc-block-checkout__order-fields{
  border-left:2px solid rgba(255,70,85,.5);
  padding-left:1rem;
}
#order-richasians-riot-id,
#order-richasians-region{margin-bottom:.9rem}

/* Classic checkout: the remaining rows sit two-up rather than stretched. */
.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last{width:48.5%}
@media (max-width:640px){
  .woocommerce-billing-fields .form-row-first,
  .woocommerce-billing-fields .form-row-last{width:100%}
}

/* Our delivery fields sit with contact details now, so mark them as the part
   that actually determines where the points land. */
.wc-block-checkout__contact-fields .wc-block-components-address-form,
.wc-block-checkout__contact-fields{position:relative}
#contact-richasians-riot-id,
#contact-richasians-region,
#contact-richasians-discord{margin-top:.85rem}
#contact-richasians-riot-id input{
  font-family:var(--f-mono)!important;letter-spacing:.03em;
}