/*
 Theme Name:   Best Koko Mart
 Theme URI:    https://bestkokomart.id/
 Description:  Custom WooCommerce child theme for Koko Mart.
 Author:       Best Koko Mart
 Version:      1.0.0
 Text Domain:  koko-mart
*/

@media screen and (max-width: 600px) {
    .km-hide-mobile {
        display: none;
    }
}
:root {
  /* Primary (red) */
  --km-primary-100: #fce8e6;
  --km-primary-200: #f5c1bc;
  --km-primary-300: #e8887f;
  --km-primary-400: #d95a4f;
  --km-primary: #c1382d;
  --km-primary-600: #a42f26;
  --km-primary-700: #87261f;
  --km-primary-800: #6a1d18;
  --km-primary-900: #4d1511;

  /* Accent (gold) */
  --km-accent-100: #fef4e0;
  --km-accent-200: #fde6b8;
  --km-accent-300: #fcd88f;
  --km-accent-400: #fbc56a;
  --km-accent: #fab251;
  --km-accent-600: #e09a3a;
  --km-accent-700: #b87c28;
  --km-accent-800: #8f5f1a;
  --km-accent-900: #664310;

  /* Secondary */
  --km-secondary: #FF714E;
  --km-secondary-600: #D1411E;

  /* Neutral */
  --km-neutral-100: #f5f5f4;
  --km-neutral-200: #e5e5e4;
  --km-neutral-300: #d4d4d3;
  --km-neutral-400: #a3a3a2;
  --km-neutral: #737372;
  --km-neutral-600: #525251;
  --km-neutral-700: #3f3f3e;
  --km-neutral-800: #262625;
  --km-neutral-900: #141413;

  /* Semantic */
  --km-white: #ffffff;
  --km-black: #141413;
  --km-border: #e2e2e2;
  --km-track: #d9d9d9;
  --km-surface: #ffffff;
  --km-overlay: rgba(20, 20, 19, 0.25);

  /* Text */
  --km-text-primary: rgba(20, 20, 19, 1);
  --km-text-secondary: rgba(20, 20, 19, 0.6);
  --km-text-muted: rgba(20, 20, 19, 0.72);
  --km-text-strikethrough: rgba(20, 20, 19, 0.18);

  /* Typography */
  --km-font-base: 'Poppins', sans-serif;
  --km-font-mono: 'DM Mono', monospace;
  --km-fw-regular: 400;
  --km-fw-medium: 500;
  --km-fw-semibold: 600;
  --km-fw-extrabold: 800;

  /* Font sizes */
  --km-fs-2xs: 7px;
  --km-fs-xs: 8px;
  --km-fs-sm: 10px;
  --km-fs-md: 12px;
  --km-fs-lg: 14px;
  --km-fs-xl: 16px;
  --km-fs-2xl: 20px;
  --km-fs-3xl: 24px;
  --km-fs-4xl: 32px;

  /* Letter spacing */
  --km-ls-2xs: 0.21px;
  --km-ls-xs: 0.24px;
  --km-ls-sm: 0.30px;
  --km-ls-md: 0.33px;

  /* Opacity */
  --km-opacity-strikethrough: 0.18;
  --km-opacity-secondary: 0.60;
  --km-opacity-muted: 0.72;

  /* Spacing */
  --km-space-page-x: 15px;
  --km-space-xs: 4px;
  --km-space-sm: 8px;
  --km-space-md: 12px;
  --km-space-lg: 16px;
  --km-space-xl: 20px;
  --km-space-2xl: 24px;
  --km-space-3xl: 30px;

  --km-sp-xs: 4px;
  --km-sp-sm: 8px;
  --km-sp-md: 12px;
  --km-sp-lg: 16px;
  --km-sp-xl: 20px;
  --km-sp-2xl: 24px;
  --km-sp-3xl: 30px;

  /* Border radius */
  --km-radius-xs: 4px;
  --km-radius-sm: 6px;
  --km-radius-md: 7px;
  --km-radius-lg: 8px;
  --km-radius-xl: 11px;
  --km-radius-2xl: 16px;
  --km-radius-full: 9999px;
  --km-r-pill: 8px;

  /* Box shadow */
  --km-shadow-card: 0 0 8px -2px rgba(20, 20, 19, 0.25);

  /* Sizing */
  --km-card-w: 108px;
  --km-card-h: 206px;
  --km-card-img: 79px;
  --km-flash-card-w: 91px;
  --km-flash-card-h: 145px;
  --km-category-icon: 56px;

  /* Container */
  --km-container-max: 1200px;
}

/* .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--km-white);
  border: none;
  border-radius: var(--km-radius-sm);
  font-family: var(--km-font-base);
  font-size: var(--km-fs-lg);
  font-weight: var(--km-fw-semibold);
  padding: var(--km-space-sm) var(--km-space-lg);
  transition: background-color 0.2s ease;

  &:hover {
    background-color: var(--km-primary-700);
  }
}

.is-style-secondary-button {
  .wp-block-button__link {
    background-color: var(--km-white);
    border-color: var(--km-primary);
    color: var(--km-primary);
    &:hover {
      background-color: rgba(193,56,45,0.04);
    }
  }
} */

h2 {
    font-weight: var(--km-fw-semibold);
}

/* Header: the middle flex-child (logo + search wrapper) must also carry
min-width: 0 so it can shrink on real Chrome Android — not just the input */
.wc-blocks-header-pattern > .wp-block-group:has(.wp-block-search) {
    min-width: 0;
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--wp--preset--color--white, #fff);
    z-index: 100;
}

.page-content {
    max-width: 800px !important;
    margin: 0 auto;
    /* overflow-x: hidden; */
}

.page-brand-empty {
    min-height:60vh;
    justify-content: center;
    background-color: var(--km-neutral-100);

    & p {
        flex-grow: 0;
        width: 300px;
    }
    & h2 {
        font-size: 32px !important;
    }
}

.footer-icon, .footer-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.km-header, .km-footer {
  max-width: 800px;
  margin: 0 auto;
}

.km-heading-muted {
    font-size: var(--km-fs-xl) !important;
    font-weight: var(--km-fw-semibold);
    color: var(--wp--preset--color--neutral-500);
}

.woocommerce-breadcrumb {
    font-size: var(--km-fs-md) !important;
    color: var(--wp--preset--color--neutral-500) !important;
}

.woocommerce-breadcrumb a {
    color: var(--wp--preset--color--neutral-500);
    text-decoration: none;
}

.wp-block-woocommerce-product-image-gallery  span.onsale {
    background-color: var(--km-secondary);
    padding: 0 var(--km-space-sm);
    border-radius: var(--km-radius-sm);
    font-weight: var(--km-fw-semibold);
}

.wp-block-woocommerce-product-image-gallery  span.onsale {
    background-color: var(--km-secondary);
    padding: 0 var(--km-space-sm);
    border-radius: var(--km-radius-sm);
    font-weight: var(--km-fw-semibold);
}

.horizontal-card-list {
    max-width: 100%;
    overflow: hidden;
}

.wp-block-post-title {
    font-weight: var(--km-fw-medium);
    font-size: var(--km-fs-2xl);
}

.single-product .wp-block-post-title {
    font-size: var(--km-fs-xl) !important;
    line-height: 1.5;
}

.single-product .product-header ins .woocommerce-Price-amount, 
.single-product .product-header .wc-block-components-product-price > .woocommerce-Price-amount {
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-semibold);
    line-height: 1.2;
}

.single-product .wc-block-components-product-price del {
	font-size: var(--km-fs-lg);
	font-weight: var(--km-fw-medium);
	color: var(--wp--preset--color--neutral-300, #d4d4d3);
	line-height: 1.3;
}

.products-grid{
    grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(33.33333% - .83333em)), 1fr));
}

.km-padding-md {
    padding: 0 var(--km-space-md) !important;
}

.page-index-content, .page-brand-content {
    & .wp-block-heading {
        font-size: var(--km-fs-2xl) !important;
    }
}

.wp-block-heading {
	font-size: var(--km-fs-2xl);
    text-align: left;
    font-weight: var(--km-fw-semibold) !important;
}

.wp-block-woocommerce-order-confirmation-status h1 {
    font-size: var(--km-fs-3xl);
    text-align: left;
    font-weight: var(--km-fw-semibold) !important;
    color: var(--wp--preset--color--primary);
    margin-bottom: var(--km-space-sm);
}
.wp-block-woocommerce-order-confirmation-status p {
    font-size: var(--km-fs-lg);
    margin-bottom: var(--km-space-lg);
}

.wp-block-woocommerce-order-confirmation-additional-information {
    border: 1px solid var(--wp--preset--color--border);
    padding: var(--km-space-xs) var(--km-space-lg);
    border-radius: var(--km-radius-xs);
    background-color: var(--km-neutral-100);
}

.wc-block-order-confirmation-summary-list .wc-block-order-confirmation-summary-list-item__key,
.wp-block-woocommerce-order-confirmation-totals-wrapper th,
.woocommerce-checkout-review-order-table th {
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold) !important;
    color: var(--km-neutral-700);
}

.wp-block-woocommerce-order-confirmation-totals-wrapper .wp-block-heading {
    margin: 0
}

.wp-block-woocommerce-order-confirmation-totals-wrapper .wp-block-woocommerce-order-confirmation-totals {
    margin-top: var(--km-space-sm);
}

.wp-block-woocommerce-order-confirmation-totals-wrapper td a {
    color: var(--wp--preset--color--black);
}

.wp-block-woocommerce-order-confirmation-totals-wrapper td .product-quantity {
    font-weight: var(--km-fw-semibold) !important;
}

.wc-block-checkout-empty {
    box-sizing: border-box;
}

.wc-block-mini-cart__empty-cart-wrapper strong {
    font-weight: var(--km-fw-semibold);
    font-size: var(--km-fs-2xl);
}

.wp-block-query-title {
	font-size: var(--km-fs-2xl);
    font-weight: var(--km-fw-semibold);
    text-align: left;
    color: var(--km-primary);
}

/* ======================= BRAND CARD */
.km-official-partner {
    & .wp-block-heading {
        font-size: var(--km-fs-2xl) !important;
        color: var(--wp--preset--color--primary) !important;
    }
}

.km-brand-cards__grid {
    display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

@media screen and (min-width: 600px) {
    .km-brand-cards__grid {
        grid-template-columns: repeat(8, 1fr);
        overflow: hidden;
    }
}

.km-brand-card {
    padding: 0;
	background-color: var(--wp--preset--color--white, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e2e2e2);
	border-radius: var(--km-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
	height: 56px;
    width: 80px;
    text-decoration: none;
}

.km-brand-card__logo {
	width: 100%;
	height: auto;
    flex-shrink: 0;
	/* object-fit: cover;
	display: block; */
}

/* Verified badge icon after "Official Partner" heading title */
.km-official-partner__heading::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-left: 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%231F8EFA'/%3E%3Cpath d='M5.5 10.5L8.5 13.5L14.5 7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Fallback: brand name text (no thumbnail) */
.km-brand-card__name {
	font-family: var(--wp--preset--font-family--poppins, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 10px);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-700, #3f3f3e);
	text-align: center;
	word-break: break-word;
	line-height: 1.3;
    text-decoration: none;
}

.wp-block-woocommerce-product-collection-no-results {
    padding: var(--km-space-lg);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-lg);
}

.wp-block-woocommerce-product-collection-no-results strong {
    font-size: var(--km-fs-2xl) !important;
}

.wp-block-woocommerce-product-meta a {
    color: var(--km-text-secondary);
    text-decoration-color: var(--km-border);
}

.single-product .single_add_to_cart_button.button {
    padding: var(--km-space-xs) var(--km-space-lg);
    border-radius: var(--km-radius-sm) !important;
    font-size: var(--km-fs-xl) !important;
    font-weight: var(--km-fw-semibold) !important;
}

.single-product-cta {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: var(--km-white);
    padding: var(--km-space-lg) var(--km-space-md) var(--km-space-2xl);
    box-sizing: border-box;
    border-top: 1px solid var(--km-border);
    display: flex;
    z-index: 10;
}

.single-cta-desktop {
    display: none;
}

@media screen and (min-width: 600px) {
    .single-product-cta {
        display: none;
    }
    .single-cta-desktop {
        display: block;
    }
    
}

.single-product-cta .wp-block-button{
    flex-grow: 1;
    flex-direction: row !important;
}

.wc-block-components-notice-banner.is-success {
    background-color: #f4fff7 !important;
    color: var(--wp--preset--color--muted) !important;
    border-left: 4px solid #4ab866 !important;
}

.wp-block-add-to-cart-with-options {
    /* padding: var(--wp--preset--spacing--lg) 0; */
    border-top: 1px solid var(--wp--preset--color--border, #e2e2e2);
    border-bottom: 1px solid var(--wp--preset--color--border, #e2e2e2);
}

.wp-block-accordion-item {
    border-bottom: 1px solid var(--wp--preset--color--border, #e2e2e2);
}

.wp-block-accordion-heading {
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-semibold);
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.wp-block-accordion-heading__toggle:hover {
    text-decoration: none;
}

.wp-block-accordion-panel {
    padding-bottom: var(--wp--preset--spacing--md);
}

.wp-block-woocommerce-product-specifications th {
    font-weight: var(--km-fw-medium);
}

.wp-block-woocommerce-product-reviews-title {
    font-size: var(--wp--preset--font-size--md);
    font-weight: var(--km-fw-medium);
}

.wc-block-mini-cart__title {
    font-size: var(--km-fs-3xl) !important;
    font-weight: var(--km-fw-semibold);
    line-height: 1.2;
}

.wc-block-mini-cart__items, .wp-block-woocommerce-cart {
    .wc-block-components-product-name{
        text-decoration: none;
        color: var(--wp--preset--color--black) !important;
    }
}

.woocommerce-table__product-name a {
    text-decoration: none;
    color: var(--wp--preset--color--black) !important;
}

.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 1fr 2fr 2fr !important;
}

.wc-block-cart-item__product {
    grid-column-start: 2 !important;
    grid-column-end: 3 !important;
}

.wc-block-cart-item__product .wc-block-components-product-metadata__description {
    display: none;
}

.wc-block-mini-cart__items .wc-block-components-product-price {
    font-size: var(--wp--preset--font-size--lg) !important;
    font-weight: var(--km-fw-medium) !important;
    color: var(--wp--preset--color--black) !important;
}

.wc-block-checkout__main, .wc-block-components-checkout-step {
    box-shadow: none !important;
}

.wc-block-checkout__main .wc-block-components-text-input {
    border: 0 !important;
}

.wc-block-components-form .wc-block-components-checkout-step {
    margin: 0 0 32px;
}

.wc-block-components-text-input label {
    font-size: var(--wp--preset--font-size--md) !important;
    color: var(--km-neutral-700) !important; 
}

.wc-blocks-components-select__label {
    font-size: 10px !important;
    color: var(--km-neutral-700) !important;
}

.wc-block-components-checkout-step__title, .woocommerce-order-details__title {
    color: var(--wp--preset--color--primary);
}

.woocommerce-customer-details h2,
.wc-block-components-checkout-order-summary__title-text,
.woocommerce-billing-fields h3, 
.woocommerce-shipping-fields h3, 
.woocommerce-checkout h3,
.woocommerce-Address-title h2{
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--2-xl) !important;
    font-weight: var(--km-fw-semibold) !important;
}

.woocommerce-account table.shop_table.order_details td,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table strong, 
.woocommerce-checkout-review-order-table tfoot td{
    font-weight: var(--km-fw-regular) !important;
}

.woocommerce-account table.shop_table.order_details strong,
.woocommerce-checkout-review-order-table tfoot td strong {
    font-weight: var(--km-fw-semibold) !important;
}

.woocommerce-customer-details .woocommerce-column {
    margin-bottom: var(--km-space-lg);
}

.wc-block-components-totals-item__description .wc-block-components-totals-footer-item-shipping {
    width: 50%;
    color: var(--km-neutral);
    font-size: var(--km-fs-md);
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: var(--km-neutral-100);
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--km-neutral-200);
}

.woocommerce-checkout #payment div.payment_box::before {
    /* display: block; */
    border: 1em solid var(--km-neutral-200);
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    /* position: absolute;
    top: -.75em;
    left: 0;
    margin: -1em 0 0 2em; */
}

.woocommerce-Address {
    margin-bottom: var(--km-space-2xl);
}

header.woocommerce-Address-title.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

header.woocommerce-Address-title.title h2 {
    flex-grow: 1;
    margin: var(--km-space-sm) 0;
}

header.woocommerce-Address-title.title a {
    text-decoration: none;
    color: var(--km-primary);
    border: 1px solid var(--km-neutral-300);
    border-radius: var(--km-radius-xs);
    padding: var(--km-space-xs) var(--km-space-sm);
    box-sizing: border-box;
    margin: 0 !important;
}

.woocommerce-Address address {
    padding: var(--km-space-sm);
    background-color: var(--km-neutral-100);
    border-radius: var(--km-radius-xs);
    margin-top: var(--km-space-md);
}

.woocommerce-orders-table__cell-order-actions a {
    display: inline-flex !important;
    color: var(--wp--preset--color--white) !important;
}

.woocommerce table.shop_table_responsive tr td::before,
.woocommerce-page table.shop_table_responsive tr td::before {
    font-weight: var(--km-fw-semibold);
}