/*
 * Checkout-only refinements.  Loaded after common.css so that checkout
 * controls stay usable without changing EC-Force's IDs, names, or JS hooks.
 */

#cart-show-view,
#new-view,
#confirm-view,
#perform-view,
#contacts-form-view,
#customers-registrations-sign-up-view {
  --checkout-surface: var(--t-card, #fff);
  --checkout-line: var(--t-hairline, #e8e4dd);
  --checkout-ink: var(--t-ink, #26231f);
  --checkout-muted: var(--t-ink-soft, #5c5a55);
  --checkout-accent: var(--t-shu, #e60012);
  --checkout-accent-hover: var(--t-shu-soft, #c50010);
}

#new-view .p-checkout__list__block,
#confirm-view .p-checkout_confirm__inner__list__block,
#contacts-form-view .p-account_form__inner,
#customers-registrations-sign-up-view .p-account_form__inner,
#cart-show-view .p-cart_content {
  border-color: var(--checkout-line);
}

#new-view .c-form_table > tbody > tr > th,
#new-view .c-form_table > tbody > tr > td,
#contacts-form-view .c-form_table > tbody > tr > th,
#contacts-form-view .c-form_table > tbody > tr > td,
#customers-registrations-sign-up-view .c-form_table > tbody > tr > th,
#customers-registrations-sign-up-view .c-form_table > tbody > tr > td {
  border-color: var(--checkout-line);
}

/* Inputs retain the theme's validation classes while getting a consistent focus cue. */
#new-view .c-form_table input:not([type='checkbox']):not([type='radio']),
#new-view .c-form_table select,
#new-view .c-form_table textarea,
#contacts-form-view .c-form_table input:not([type='checkbox']):not([type='radio']),
#contacts-form-view .c-form_table select,
#contacts-form-view .c-form_table textarea,
#customers-registrations-sign-up-view .c-form_table input:not([type='checkbox']):not([type='radio']),
#customers-registrations-sign-up-view .c-form_table select,
#customers-registrations-sign-up-view .c-form_table textarea {
  box-sizing: border-box;
  border-color: var(--checkout-line);
  background-color: var(--checkout-surface);
  color: var(--checkout-ink);
}

#new-view .c-form_table input:focus-visible,
#new-view .c-form_table select:focus-visible,
#new-view .c-form_table textarea:focus-visible,
#contacts-form-view .c-form_table input:focus-visible,
#contacts-form-view .c-form_table select:focus-visible,
#contacts-form-view .c-form_table textarea:focus-visible,
#customers-registrations-sign-up-view .c-form_table input:focus-visible,
#customers-registrations-sign-up-view .c-form_table select:focus-visible,
#customers-registrations-sign-up-view .c-form_table textarea:focus-visible {
  outline: 2px solid var(--checkout-accent);
  outline-offset: 2px;
  border-color: var(--checkout-accent);
}

/*
 * EC-Force toggles delivery rows through an inline display value.  A broad
 * mobile card rule must never revive these rows: they contain required
 * controls which are intentionally inactive until the order JS exposes them.
 * Once JS clears/changes the inline style (or hidden attribute), normal card
 * rendering applies again.
 */
#new-view .c-form_table > tbody > tr[style*='display: none' i],
#new-view .c-form_table > tbody > tr[style*='display:none' i],
#new-view .c-form_table > tbody > tr[hidden],
#new-view .c-form_table--confirm > tbody > tr[style*='display: none' i],
#new-view .c-form_table--confirm > tbody > tr[style*='display:none' i],
#new-view .c-form_table--confirm > tbody > tr[hidden] {
  display: none !important;
}

/* Checkout CTAs use one hit area and keep disabled/hover states distinguishable. */
#new-view .p-checkout__bottom__submit,
#confirm-view .p-checkout_confirm__submit,
#confirm-view .p-checkout_confirm__inner__list__block__submit,
#contacts-form-view .p-account_form__inner__bottom__btn,
#customers-registrations-sign-up-view .p-account_form__inner__bottom__btn,
#cart-show-view .p-cart_content a[class*='__btn'] {
  min-height: 48px;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

#new-view .p-checkout__bottom__submit:hover:not(:disabled),
#confirm-view .p-checkout_confirm__submit:hover:not(:disabled),
#confirm-view .p-checkout_confirm__inner__list__block__submit:hover:not(:disabled),
#contacts-form-view .p-account_form__inner__bottom__btn:hover:not(:disabled),
#customers-registrations-sign-up-view .p-account_form__inner__bottom__btn:hover:not(:disabled) {
  background-color: var(--checkout-accent-hover) !important;
}

#new-view .p-checkout__bottom__submit:disabled,
#confirm-view .p-checkout_confirm__submit:disabled,
#confirm-view .p-checkout_confirm__inner__list__block__submit:disabled,
#contacts-form-view .p-account_form__inner__bottom__btn:disabled,
#customers-registrations-sign-up-view .p-account_form__inner__bottom__btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

#cart-show-view .c-cart_item,
#confirm-view .c-cart_list__list__item {
  border-color: var(--checkout-line);
}

#cart-show-view .c-cart_item__info,
#confirm-view .c-cart_list__list__item__info {
  min-width: 0;
}

#cart-show-view .c-cart_item__info__title,
#confirm-view .c-cart_list__list__item__info__title,
#confirm-view .c-cart_list__list__item__info__variant {
  overflow-wrap: anywhere;
}

#confirm-view .c-billing_list__total {
  border-color: var(--checkout-line);
}

@media screen and (max-width: 719px) {
  #new-view .p-checkout,
  #confirm-view .p-checkout_confirm,
  #contacts-form-view .p-account_form,
  #customers-registrations-sign-up-view .p-account_form,
  #cart-show-view .p-cart_content {
    min-width: 0;
  }

  #new-view .c-form_table > tbody > tr,
  #contacts-form-view .c-form_table > tbody > tr,
  #customers-registrations-sign-up-view .c-form_table > tbody > tr {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--checkout-line);
    background: var(--checkout-surface);
  }

  #new-view .c-form_table > tbody > tr[style*='display: none' i],
  #new-view .c-form_table > tbody > tr[style*='display:none' i],
  #new-view .c-form_table > tbody > tr[hidden] {
    display: none !important;
  }

  #new-view .c-form_table > tbody > tr > th,
  #contacts-form-view .c-form_table > tbody > tr > th,
  #customers-registrations-sign-up-view .c-form_table > tbody > tr > th {
    margin-bottom: 8px;
    white-space: normal;
  }

  #new-view .c-form_table__name,
  #contacts-form-view .c-form_table__name,
  #customers-registrations-sign-up-view .c-form_table__name {
    gap: 8px;
  }

  #new-view .c-form_table__name input,
  #contacts-form-view .c-form_table__name input,
  #customers-registrations-sign-up-view .c-form_table__name input {
    min-width: 0;
  }

  #new-view .c-form_table__postcode,
  #contacts-form-view .c-form_table__postcode,
  #customers-registrations-sign-up-view .c-form_table__postcode,
  #new-view .c-form_table__tel,
  #contacts-form-view .c-form_table__tel,
  #customers-registrations-sign-up-view .c-form_table__tel {
    gap: 5px;
  }

  #new-view .c-form_table__postcode *:not(:last-child),
  #contacts-form-view .c-form_table__postcode *:not(:last-child),
  #customers-registrations-sign-up-view .c-form_table__postcode *:not(:last-child),
  #new-view .c-form_table__tel > *:not(:last-child),
  #contacts-form-view .c-form_table__tel > *:not(:last-child),
  #customers-registrations-sign-up-view .c-form_table__tel > *:not(:last-child) {
    margin-right: 0;
  }

  #new-view .p-checkout__bottom,
  #confirm-view .p-checkout_confirm__inner__list__block--bottom,
  #contacts-form-view .p-account_form__inner__bottom,
  #customers-registrations-sign-up-view .p-account_form__inner__bottom {
    display: grid;
    gap: 12px;
  }

  #new-view .p-checkout__bottom__submit,
  #new-view .p-checkout__bottom__back,
  #confirm-view .p-checkout_confirm__inner__list__block__submit,
  #confirm-view .p-checkout_confirm__inner__list__block__back,
  #contacts-form-view .p-account_form__inner__bottom__btn,
  #customers-registrations-sign-up-view .p-account_form__inner__bottom__btn {
    width: 100%;
    min-width: 0;
  }

  #cart-show-view .c-cart_item {
    grid-template-columns: minmax(76px, 30%) minmax(0, 1fr);
  }

  #cart-show-view .c-cart_item__action,
  #cart-show-view .c-cart_item__info__quantity {
    min-width: 0;
  }
}


/* design05 signup parity: preserve every EC-Force field and validation hook while
   presenting the registration form as the approved account card on small screens. */
#customers-registrations-sign-up-view .t-signup_lead{
  margin:8px 0 0;color:var(--checkout-muted);font-size:13px;line-height:1.9;
}
#customers-registrations-sign-up-view .account-return-login{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 28px;
  border:1px solid var(--checkout-ink);border-radius:4px;background:#fff;color:var(--checkout-ink);
  font-size:13.5px;font-weight:700;text-decoration:none;
}
@media screen and (max-width:719px){
  #customers-registrations-sign-up-view > .l-container__row{margin-top:0!important;margin-bottom:0!important}
  #customers-registrations-sign-up-view .p-page_header{margin:0;padding:24px 16px 0!important;width:100%!important}
  #customers-registrations-sign-up-view .p-page_header__inner{max-width:none!important;padding:0!important}
  #customers-registrations-sign-up-view .p-page_header__inner__title{
    font-family:'Noto Serif JP',serif!important;font-size:21px!important;line-height:1.45!important;
    margin:0 0 10px!important;padding:0!important;text-align:left!important;display:flex!important;align-items:center;gap:12px;
  }
  #customers-registrations-sign-up-view .p-page_header__inner__title::before{
    content:''!important;display:block!important;width:4px;height:30px;background:var(--checkout-accent);flex:none;
  }
  #customers-registrations-sign-up-view .t-signup_required_note{display:none!important}
  #customers-registrations-sign-up-view .p-account_form{width:100%!important;padding:18px 16px 58px!important;margin:0!important}
  #customers-registrations-sign-up-view .p-account_form__inner.au-wrap.au-panel{
    width:100%!important;max-width:none!important;margin:0!important;padding:22px 18px!important;
    background:#fff!important;border:1px solid var(--checkout-line)!important;
  }
  #customers-registrations-sign-up-view .c-form_table{display:block!important;width:100%!important;margin:0!important}
  #customers-registrations-sign-up-view .c-form_table tbody,
  #customers-registrations-sign-up-view .c-form_table tr,
  #customers-registrations-sign-up-view .c-form_table th,
  #customers-registrations-sign-up-view .c-form_table td{display:block!important;width:100%!important}
  #customers-registrations-sign-up-view .c-form_table > tbody > tr{
    padding:12px 0!important;border:0!important;border-bottom:1px solid var(--checkout-line)!important;background:#fff!important;
  }
  #customers-registrations-sign-up-view .c-form_table > tbody > tr > th{
    margin:0!important;padding:0 0 6px!important;border:0!important;background:transparent!important;
    font-size:12.5px!important;font-weight:700!important;line-height:1.7!important;
  }
  #customers-registrations-sign-up-view .c-form_table > tbody > tr > td{
    padding:0!important;border:0!important;background:#fff!important;
  }
  #customers-registrations-sign-up-view .c-form_table input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  #customers-registrations-sign-up-view .c-form_table select,
  #customers-registrations-sign-up-view .c-form_table textarea{
    width:100%!important;max-width:none!important;min-height:44px!important;padding:10px 12px!important;
    border:1px solid #CFCAC2!important;border-radius:3px!important;background:#fff!important;font-size:14px!important;
  }
  #customers-registrations-sign-up-view .c-form_table__name{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important;
  }
  #customers-registrations-sign-up-view .c-form_table__postcode:not(.is-single){
    display:grid!important;grid-template-columns:auto 1fr auto 1fr!important;gap:6px!important;align-items:center!important;width:100%!important;
  }
  #customers-registrations-sign-up-view .c-form_table__tel{
    display:grid!important;grid-template-columns:1fr auto 1fr auto 1fr!important;gap:5px!important;align-items:center!important;width:100%!important;
  }
  #customers-registrations-sign-up-view .c-form_table__select{width:100%!important}
  #customers-registrations-sign-up-view .t-signup_actions{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:24px!important}
  #customers-registrations-sign-up-view .t-signup_actions > *{width:100%!important;min-width:0!important}
}

/* KK-20260819-CHECKOUT-RIGHT-RAIL: desktop purchase navigation stays on the right rail. */
@media(min-width:1025px){
 #new-view .p-checkout{
   display:grid;
   grid-template-columns:minmax(0,1fr) 320px;
   gap:32px;
   align-items:start;
 }
 #new-view .p-checkout__list{grid-column:1;min-width:0}
 #new-view .p-checkout__bottom{
   grid-column:2;
   grid-row:1;
   position:sticky;
   top:120px;
   box-sizing:border-box;
   width:100%;
   margin:0;
   padding:22px 24px;
   border:1px solid var(--checkout-line);
   background:var(--checkout-surface);
 }
 #new-view .p-checkout__bottom__wrapper_newview,
 #new-view .p-checkout__bottom__buttons_wrap{display:grid;gap:10px;width:100%}
 #new-view .p-checkout__bottom__backbtn_wrap{order:2;text-align:center}
 #new-view .p-checkout__bottom__submit,
 #new-view .p-checkout__bottom__select,
 #new-view .p-checkout__bottom__back{box-sizing:border-box;width:100%;max-width:none;margin:0}
 #confirm-view .p-checkout_confirm__inner{
   display:grid;
   grid-template-columns:minmax(0,1fr) 320px;
   gap:32px;
   align-items:start;
 }
 #confirm-view .p-checkout_confirm__inner__list{grid-column:1;min-width:0}
 #confirm-view .p-checkout_confirm__inner__side{
   grid-column:2;
   grid-row:1;
   position:sticky;
   top:120px;
   width:100%;
   margin:0;
 }
}

/* KCC-20260819-006: checkout form ownership. EC FORCE fields/hooks stay intact; CSS owns presentation. */
#new-view .c-form_table{width:100%!important;border:0!important;border-collapse:separate!important;border-spacing:0!important;background:transparent!important}
#new-view .c-form_table>tbody>tr{
  display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;align-items:center!important;
  min-height:72px!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--checkout-line)!important;background:#fff!important;
}
#new-view .c-form_table>tbody>tr:first-child{border-top:1px solid var(--checkout-line)!important}
#new-view .c-form_table>tbody>tr>th,
#new-view .c-form_table>tbody>tr>td{
  box-sizing:border-box!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;
  margin:0!important;border:0!important;background:transparent!important;
}
#new-view .c-form_table>tbody>tr>th{padding:16px 18px!important;font-size:13px!important;font-weight:700!important;line-height:1.6!important;color:var(--checkout-ink)!important}
/* Keep the CVV label aligned with the security-code field even when help text/image makes this row much taller. */
#new-view .c-form_table>tbody>tr#view-input-card-cvv>th{align-self:start!important;vertical-align:top!important}
#new-view .c-form_table>tbody>tr>td{padding:12px 18px!important}
#new-view .c-form_table input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not(.c-form_table__postcode input),
#new-view .c-form_table select,#new-view .c-form_table textarea{
  box-sizing:border-box!important;width:100%!important;max-width:none!important;min-height:46px!important;margin:0!important;
  padding:10px 14px!important;border:1px solid #CFCAC2!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;
}
#new-view .c-form_table__name{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%!important}
#new-view .c-form_table__postcode:not(.is-single){display:grid!important;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)!important;gap:8px!important;align-items:center!important;width:100%!important}
#new-view .c-form_table__tel{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)!important;gap:6px!important;align-items:center!important;width:100%!important}
#new-view .c-form_table__select{width:100%!important}
@media(max-width:719px){
 #new-view .c-form_table>tbody>tr{display:block!important;min-height:0!important;padding:14px 0!important;border:0!important;border-bottom:1px solid var(--checkout-line)!important}
 #new-view .c-form_table>tbody>tr:first-child{border-top:0!important}
 #new-view .c-form_table>tbody>tr>th{padding:0 0 7px!important;background:transparent!important}
 #new-view .c-form_table>tbody>tr>td{padding:0!important;background:transparent!important}
 #new-view .c-form_table__name{grid-template-columns:1fr 1fr!important}
}

/* KKCART-20260824-FIELD-LENGTH: finite-value checkout controls do not fill the whole field column. */
@media(min-width:720px){
  #new-view .c-form_table input[type='number']{width:100%!important;max-width:180px!important}
  #new-view .c-form_table input[type='tel']:not(.c-form_table__postcode input){width:100%!important;max-width:360px!important}
  #new-view .c-form_table label.c-form_table__select:not(:has(select[name*='birth'])){width:100%!important;max-width:360px!important}
  #new-view .c-form_table label.c-form_table__select:not(:has(select[name*='birth']))>select{width:100%!important;max-width:360px!important}
  #new-view .c-form_table select[name*='prefecture_id']{max-width:260px!important}
  #new-view input[name*='coupon_code']{width:100%!important;max-width:320px!important}
}