/*
Theme Name: EGO SK Design Child
Theme URI: https://marumaru-health.com/
Description: TCD EGO Welcart - SK Design child theme. Unified design with ion-shower-eco.jp.
Author: Good Corporation
Author URI: https://www.good-good.co.jp/
Template: ego_welcart_tcd079
Version: 1.0.0
Text Domain: ego-sk-child
*/

/* ============================================
   SK DESIGN SYSTEM - CSS Custom Properties
   ============================================ */
:root {
  --sk-white: #ffffff;
  --sk-black: #000000;
  --sk-red: #d1544d;
  --sk-red-dark: #b8413b;
  --sk-gray-light: #f5f5f5;
  --sk-gray-mid: #e0e0e0;
  --sk-gray-text: #666666;
}

/* ============================================
   GLOBAL TYPOGRAPHY
   ============================================ */
body,
.p-headline,
.p-entry__body,
.c-btn,
.p-footer,
.p-header {
  font-family: 'Helvetica Neue', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   GLOBAL RESET - Remove all border-radius
   ============================================ */
*,
.c-btn,
.c-btn--primary,
.c-btn--secondary,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="submit"],
input[type="button"],
textarea,
select,
.p-card,
.p-entry,
.wp-block-button__link,
.usces_cart .send input[type="submit"],
.cart_navi input[type="submit"] {
  border-radius: 0 !important;
}

/* ============================================
   HEADER - SK Style
   ============================================ */
.p-header {
  background: var(--sk-white) !important;
  border-bottom: 1px solid var(--sk-black) !important;
  box-shadow: none !important;
}

.p-header__nav a {
  color: var(--sk-black) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  transition: color 0.2s !important;
}

.p-header__nav a:hover {
  color: var(--sk-red) !important;
}

/* ============================================
   BUTTONS - SK Style (Black & Red)
   ============================================ */
.c-btn--primary,
.usces_cart .send input[type="submit"],
.cart_navi input.to_customerinfo_button,
input.to_confirm_button,
input.to_completion_button,
.usces_cart input[type="submit"][name="purchase"] {
  background: var(--sk-red) !important;
  color: var(--sk-white) !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 14px 32px !important;
  transition: background 0.2s !important;
}

.c-btn--primary:hover,
.usces_cart .send input[type="submit"]:hover {
  background: var(--sk-red-dark) !important;
}

.c-btn--secondary,
.cart_navi input[type="submit"] {
  background: var(--sk-black) !important;
  color: var(--sk-white) !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  transition: background 0.2s !important;
}

.c-btn--secondary:hover {
  background: #333333 !important;
}

/* ============================================
   PRODUCT CARDS - SK Style
   ============================================ */
.p-item__thumb,
.p-item,
.p-card {
  border-radius: 0 !important;
  overflow: hidden;
}

.p-item__title {
  font-weight: 700 !important;
  color: var(--sk-black) !important;
  letter-spacing: -0.01em !important;
}

.p-item__price {
  color: var(--sk-red) !important;
  font-weight: 900 !important;
}

/* ============================================
   PRODUCT DETAIL PAGE - SK Style
   ============================================ */
.p-single-item__title,
.welcart_basic_item_single h1 {
  font-weight: 900 !important;
  color: var(--sk-black) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.itemGrPrice,
.itemPrice,
.skuPrice {
  color: var(--sk-red) !important;
  font-weight: 900 !important;
  font-size: 1.5em !important;
}

.incart_btn input[type="submit"],
.to_cart input[type="submit"],
.incart_btn button,
input[name="usces_cart_button"] {
  background: var(--sk-red) !important;
  color: var(--sk-white) !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 16px 40px !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  width: 100% !important;
  max-width: 400px !important;
}

.incart_btn input[type="submit"]:hover,
.to_cart input[type="submit"]:hover {
  background: var(--sk-red-dark) !important;
}

.skuArea,
.itemSku {
  border: 1px solid var(--sk-gray-mid) !important;
  padding: 20px !important;
  background: var(--sk-gray-light) !important;
}

/* ============================================
   CART PAGE - SK Style
   ============================================ */
.usces_cart table {
  border-collapse: collapse !important;
}

.usces_cart table th {
  background: var(--sk-black) !important;
  color: var(--sk-white) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  padding: 14px 16px !important;
}

.usces_cart table td {
  border-bottom: 1px solid var(--sk-gray-mid) !important;
  padding: 14px 16px !important;
}

.cart_navi {
  border-bottom: 2px solid var(--sk-black) !important;
}

.cart_navi .current {
  color: var(--sk-red) !important;
  font-weight: 700 !important;
}

/* ============================================
   FOOTER - SK Style
   ============================================ */
.p-footer {
  background: var(--sk-black) !important;
  color: var(--sk-white) !important;
}

.p-footer a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.2s !important;
}

.p-footer a:hover {
  color: var(--sk-white) !important;
}

/* ============================================
   FORMS - SK Style
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--sk-gray-mid) !important;
  padding: 12px 16px !important;
  font-family: 'Helvetica Neue', 'Noto Sans JP', sans-serif !important;
  font-size: 14px !important;
  transition: border-color 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--sk-black) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================
   BREADCRUMB - SK Style
   ============================================ */
.p-breadcrumb {
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
}

.p-breadcrumb a {
  color: var(--sk-gray-text) !important;
}

.p-breadcrumb a:hover {
  color: var(--sk-red) !important;
}

/* ============================================
   SIDEBAR - SK Style
   ============================================ */
.p-sidebar .widget_title,
.l-sidebar .widget_title {
  font-weight: 700 !important;
  color: var(--sk-black) !important;
  border-bottom: 2px solid var(--sk-black) !important;
  padding-bottom: 8px !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
}

/* ============================================
   PAGINATION - SK Style
   ============================================ */
.p-pager a,
.p-pager span {
  border: 1px solid var(--sk-black) !important;
  color: var(--sk-black) !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
}

.p-pager .current,
.p-pager a:hover {
  background: var(--sk-black) !important;
  color: var(--sk-white) !important;
}

/* ============================================
   CONTENT HEADINGS - SK Style
   ============================================ */
.p-entry__body h2,
.p-entry__body h3 {
  border: none !important;
  padding-left: 0 !important;
}

.p-entry__body h2::before,
.p-entry__body h3::before {
  display: none !important;
}

.p-entry__body h2 {
  font-size: 1.5em !important;
  font-weight: 900 !important;
  color: var(--sk-black) !important;
  border-bottom: 2px solid var(--sk-black) !important;
  padding-bottom: 8px !important;
  margin-bottom: 24px !important;
}

.p-entry__body h3 {
  font-size: 1.2em !important;
  font-weight: 700 !important;
  color: var(--sk-black) !important;
  margin-bottom: 16px !important;
}

/* ============================================
   TABLES - SK Style
   ============================================ */
.p-entry__body table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.p-entry__body table th {
  background: var(--sk-gray-light) !important;
  font-weight: 700 !important;
  border: 1px solid var(--sk-gray-mid) !important;
  padding: 12px 16px !important;
  text-align: left !important;
}

.p-entry__body table td {
  border: 1px solid var(--sk-gray-mid) !important;
  padding: 12px 16px !important;
}

/* ============================================
   WELCART LOGIN / MEMBER PAGES
   ============================================ */
.usces_member input[type="submit"],
.usces_login input[type="submit"] {
  background: var(--sk-black) !important;
  color: var(--sk-white) !important;
  border: none !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
}

.usces_member input[type="submit"]:hover,
.usces_login input[type="submit"]:hover {
  background: #333333 !important;
}

/* ============================================
   CLEAN LINK STYLES
   ============================================ */
a {
  color: var(--sk-black);
  transition: color 0.2s;
}

a:hover {
  color: var(--sk-red);
}

/* ============================================
   CUSTOM UTILITY CLASSES
   ============================================ */
.sk-subscription-badge {
  display: inline-block;
  background: var(--sk-red);
  color: var(--sk-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  text-transform: uppercase;
}

.sk-save-badge {
  display: inline-block;
  background: var(--sk-black);
  color: var(--sk-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 12px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .incart_btn input[type="submit"],
  .to_cart input[type="submit"] {
    max-width: 100% !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
  }

  .usces_cart table th,
  .usces_cart table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}