/*
 * OP-1 Center WooCommerce Design System
 * Applied to all WooCommerce pages via child theme.
 * Matches the SPA design language exactly.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=DM+Mono:wght@300;400;500&display=swap');

:root {
	--op1-bg:             #D7D7D4;
	--op1-panel:          #ECECE8;
	--op1-border:         #BEBEB8;
	--op1-text:           #111111;
	--op1-text-secondary: #6B6B6B;
	--op1-accent:         #374151;
	--op1-accent-light:   #E5E7EB;
	--op1-vip:            #A855F7;
	--op1-radius:         6px;
	--font-mono:          'IBM Plex Mono', 'Courier New', monospace;
	--font-sans:          'DM Mono', 'Courier New', monospace;
}

/* =====================================================================
   BASE
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.woocommerce,
body.woocommerce-page,
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-account {
	background:  var(--op1-bg) !important;
	font-family: var(--font-sans) !important;
	color:       var(--op1-text) !important;
	margin:      0 !important;
}

/* =====================================================================
   HIDE REY CHROME
   ===================================================================== */

.rey-siteHeader,
.rey-siteFooter,
.rey-backTop,
#rey-floating-header,
.rey-siteNavigation,
.rey-breadcrumbs,
.page-title--inner { display: none !important; }

.rey-siteMain,
.rey-siteMain > .container,
.woocommerce-page .entry-content,
.woocommerce .entry-content {
	padding:   0 !important;
	margin:    0 !important;
	max-width: none !important;
	width:     100% !important;
}

/* =====================================================================
   TOP BAR
   ===================================================================== */

.op1-woo-topbar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0 24px;
	height:          48px;
	background:      var(--op1-panel);
	border-bottom:   1px solid var(--op1-border);
	position:        sticky;
	top:             0;
	z-index:         200;
}

.op1-woo-logo {
	font-family:     var(--font-mono);
	font-size:       12px;
	font-weight:     500;
	letter-spacing:  0.12em;
	text-decoration: none;
	color:           var(--op1-text);
}

.op1-woo-topbar-nav {
	display:     flex;
	align-items: center;
	gap:         20px;
}

.op1-woo-topbar-link {
	font-family:     var(--font-mono);
	font-size:       11px;
	color:           var(--op1-text-secondary);
	text-decoration: none;
	transition:      color 0.15s;
}

.op1-woo-topbar-link:hover { color: var(--op1-text); }

/* =====================================================================
   PAGE WRAPPER & CONTAINER
   ===================================================================== */

.op1-woo-page {
	min-height: calc(100vh - 96px);
	padding:    40px 24px 80px;
}

.op1-woo-container {
	max-width: 700px;
	margin:    0 auto;
}

/* =====================================================================
   PANELS
   ===================================================================== */

.op1-woo-panel {
	background:    var(--op1-panel);
	border:        1px solid var(--op1-border);
	border-radius: var(--op1-radius);
	padding:       28px;
}

.op1-woo-panel + .op1-woo-panel { margin-top: 16px; }

.op1-woo-panel-title {
	font-family:    var(--font-mono);
	font-size:      10px;
	font-weight:    500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--op1-text-secondary);
	margin:         0 0 20px;
	padding-bottom: 12px;
	border-bottom:  1px solid var(--op1-border);
}

/* =====================================================================
   FORMS
   ===================================================================== */

.op1-woo-form label,
.op1-woo-form .woocommerce-form-row label {
	display:        block;
	font-family:    var(--font-mono);
	font-size:      10px;
	font-weight:    500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--op1-text-secondary);
	margin-bottom:  6px;
}

.op1-woo-form .form-row,
.op1-woo-form p.form-row { margin-bottom: 14px; }

.op1-woo-form input[type="text"],
.op1-woo-form input[type="email"],
.op1-woo-form input[type="password"],
.op1-woo-form input[type="tel"],
.op1-woo-form input[type="number"],
.op1-woo-form select,
.op1-woo-form textarea,
.op1-woo-form .woocommerce-Input {
	width:         100%;
	height:        36px;
	background:    var(--op1-bg) !important;
	border:        1px solid var(--op1-border) !important;
	border-radius: 4px !important;
	padding:       0 12px !important;
	font-family:   var(--font-mono) !important;
	font-size:     12px !important;
	color:         var(--op1-text) !important;
	outline:       none;
	transition:    border-color 0.15s ease;
	box-shadow:    none !important;
}

.op1-woo-form textarea { height: auto; padding: 10px 12px !important; resize: vertical; }
.op1-woo-form select   { appearance: none; cursor: pointer; }

.op1-woo-form input:focus,
.op1-woo-form select:focus,
.op1-woo-form textarea:focus { border-color: var(--op1-accent) !important; }

.op1-woo-form .required { color: var(--op1-text-secondary); }

/* Checkbox */
.op1-woo-form input[type="checkbox"] {
	width:  14px;
	height: 14px;
	margin-right: 6px;
	accent-color: var(--op1-accent);
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

.op1-woo-btn,
.op1-woo-form button[type="submit"],
.op1-woo-form input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-page .button.alt,
.woocommerce #payment #place_order {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	height:          36px;
	padding:         0 18px;
	background:      var(--op1-accent) !important;
	color:           #fff !important;
	border:          none !important;
	border-radius:   4px !important;
	font-family:     var(--font-mono) !important;
	font-size:       11px !important;
	font-weight:     500;
	cursor:          pointer;
	text-decoration: none;
	letter-spacing:  0.05em;
	transition:      background 0.15s ease;
	box-shadow:      none !important;
}

.op1-woo-btn:hover,
.op1-woo-form button[type="submit"]:hover,
.woocommerce .button.alt:hover,
.woocommerce #payment #place_order:hover { background: #111 !important; }

.op1-woo-btn--secondary {
	background:  transparent !important;
	color:       var(--op1-text) !important;
	border:      1px solid var(--op1-border) !important;
}

.op1-woo-btn--secondary:hover { background: var(--op1-bg) !important; color: var(--op1-text) !important; }

/* =====================================================================
   ACCOUNT NAVIGATION TABS
   ===================================================================== */

.op1-account-nav {
	display:       flex;
	border-bottom: 1px solid var(--op1-border);
	margin-bottom: 32px;
	overflow-x:    auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.op1-account-nav::-webkit-scrollbar { display: none; }

.op1-account-nav-item {
	font-family:     var(--font-mono);
	font-size:       11px;
	color:           var(--op1-text-secondary);
	padding:         10px 18px;
	text-decoration: none;
	border-bottom:   2px solid transparent;
	margin-bottom:   -1px;
	white-space:     nowrap;
	transition:      color 0.15s, border-color 0.15s;
	flex-shrink:     0;
}

.op1-account-nav-item:hover   { color: var(--op1-text); }
.op1-account-nav-item.active,
.op1-account-nav-item.is-active { color: var(--op1-text); border-bottom-color: var(--op1-text); font-weight: 500; }

/* WooCommerce default account nav override */
.woocommerce-MyAccount-navigation { display: none; }

/* =====================================================================
   TABLES (orders, downloads)
   ===================================================================== */

.op1-woo-table {
	width:           100%;
	border-collapse: collapse;
	font-family:     var(--font-mono);
	font-size:       12px;
}

.op1-woo-table th {
	font-size:      10px;
	font-weight:    500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--op1-text-secondary);
	padding:        10px 16px;
	text-align:     left;
	border-bottom:  1px solid var(--op1-border);
}

.op1-woo-table td {
	padding:        12px 16px;
	border-bottom:  1px solid var(--op1-border);
	vertical-align: middle;
}

.op1-woo-table tr:last-child td { border-bottom: none; }
.op1-woo-table a { color: var(--op1-text); }
.op1-woo-table tr:hover td { background: rgba(0,0,0,0.02); }

/* =====================================================================
   STATUS BADGES
   ===================================================================== */

.op1-status {
	display:        inline-block;
	padding:        2px 8px;
	border-radius:  3px;
	font-size:      10px;
	font-weight:    500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.op1-status--completed  { background: #D1FAE5; color: #065F46; }
.op1-status--processing { background: #DBEAFE; color: #1E40AF; }
.op1-status--pending    { background: #FEF3C7; color: #92400E; }
.op1-status--on-hold    { background: #FEF3C7; color: #92400E; }
.op1-status--failed     { background: #FEE2E2; color: #991B1B; }
.op1-status--cancelled  { background: #F3F4F6; color: #6B7280; }

/* =====================================================================
   WOOCOMMERCE NOTICES
   ===================================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notices-wrapper ul {
	background:    var(--op1-panel) !important;
	border:        1px solid var(--op1-border) !important;
	border-left:   none !important;
	border-radius: var(--op1-radius) !important;
	padding:       14px 16px !important;
	font-family:   var(--font-mono) !important;
	font-size:     12px !important;
	color:         var(--op1-text) !important;
	box-shadow:    none !important;
	list-style:    none !important;
	margin-bottom: 16px !important;
}

/* =====================================================================
   CHECKOUT
   ===================================================================== */

.op1-checkout-grid {
	display:               grid;
	grid-template-columns: 1fr 320px;
	gap:                   24px;
	align-items:           start;
	max-width:             960px;
	margin:                0 auto;
}

/* WC order review table */
.woocommerce-checkout-review-order-table {
	width:           100%;
	border-collapse: collapse;
	font-family:     var(--font-mono);
	font-size:       12px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding:       10px 0;
	border-bottom: 1px solid var(--op1-border);
}

.woocommerce-checkout-review-order-table tfoot tr:last-child td,
.woocommerce-checkout-review-order-table tfoot tr:last-child th {
	font-weight:   700;
	font-size:     13px;
	border-bottom: none;
	border-top:    1px solid var(--op1-border);
}

/* Payment section */
#payment { background: transparent !important; border-radius: 0 !important; }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 16px; }
#payment ul.payment_methods li { padding: 10px 0; border-bottom: 1px solid var(--op1-border); }
#payment ul.payment_methods li:last-child { border-bottom: none; }
#payment ul.payment_methods li label { font-family: var(--font-mono); font-size: 12px; }
#payment div.payment_box { background: var(--op1-bg) !important; border-radius: 4px; padding: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; }

/* =====================================================================
   FOOTER
   ===================================================================== */

.op1-woo-footer {
	padding:         14px 24px;
	border-top:      1px solid var(--op1-border);
	background:      var(--op1-panel);
	font-family:     var(--font-mono);
	font-size:       10px;
	color:           var(--op1-text-secondary);
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
}

.op1-woo-footer a {
	color:           var(--op1-text-secondary);
	text-decoration: none;
}

.op1-woo-footer a:hover { color: var(--op1-text); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 700px) {
	.op1-woo-page          { padding: 24px 16px 60px; }
	.op1-checkout-grid     { grid-template-columns: 1fr; }
	.op1-woo-topbar        { padding: 0 16px; }
	.op1-login-grid        { grid-template-columns: 1fr !important; }
	.op1-woo-footer        { flex-direction: column; gap: 8px; text-align: center; }
}

/* =====================================================================
   v1.2.0 — components added for the previously unstyled pages
   (reset password, account nav, order detail, cart, payment methods)
   ===================================================================== */

/* Logo in the topbar — replaces the text wordmark */
.op1-woo-logo-img {
	width: 132px;
	height: auto;
	display: block;
	border-radius: 2px;
}

.op1-woo-container--narrow { max-width: 520px; }

.op1-woo-lede {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.6;
	color: var(--op1-text);
	margin: 0 0 18px;
}

.op1-woo-note {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--op1-text-secondary);
	margin: 0;
}

.op1-woo-empty {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--op1-text-secondary);
	margin: 0;
	padding: 18px 0;
}

.op1-woo-confirm { text-align: left; }

.op1-woo-btn--sm {
	font-size: 10px;
	padding: 7px 12px;
}

/* ---------- Account navigation ---------- */
.op1-account-nav-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 14px;
	margin: 0 0 12px;
	border-bottom: 1px solid var(--op1-border);
}

.op1-account-nav-avatar {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--op1-accent);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.op1-account-nav-id { min-width: 0; }

.op1-account-nav-name,
.op1-account-nav-email {
	display: block;
	font-family: var(--font-mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.op1-account-nav-name  { font-size: 12px; color: var(--op1-text); }
.op1-account-nav-email { font-size: 10px; color: var(--op1-text-secondary); }

/* ---------- Order detail ---------- */
.op1-order-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.op1-order-notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.op1-order-notes li {
	padding: 12px 0;
	border-bottom: 1px solid var(--op1-border);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.6;
}

.op1-order-notes li:last-child { border-bottom: none; }
.op1-order-notes p { margin: 4px 0 0; }

/* ---------- Addresses ---------- */
.op1-address-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.op1-address-card {
	border: 1px solid var(--op1-border);
	border-radius: var(--op1-radius);
	padding: 14px 16px;
	background: var(--op1-bg);
}

.op1-address-card address {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--op1-text);
	font-style: normal;
	margin: 0;
}

/* ---------- Cart ---------- */
.op1-cart-thumb { width: 56px; }
.op1-cart-thumb img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	border: 1px solid var(--op1-border);
}

.op1-cart-remove { width: 34px; text-align: right; }

.op1-cart-remove-link {
	font-family: var(--font-mono);
	font-size: 16px;
	line-height: 1;
	color: var(--op1-text-secondary);
	text-decoration: none;
	padding: 4px 6px;
	border-radius: 3px;
}

.op1-cart-remove-link:hover {
	color: var(--op1-text);
	background: var(--op1-border);
}

.op1-cart-coupon {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-right: 10px;
}

.op1-cart-coupon .input-text {
	width: 150px;
	margin: 0;
}

/* ---------- Payment method lists (checkout, pay page, add card) ---------- */
.op1-payment-methods ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--op1-border);
	border-radius: var(--op1-radius);
	overflow: hidden;
}

.op1-payment-methods ul.payment_methods > li {
	padding: 12px 14px;
	border-bottom: 1px solid var(--op1-border);
	background: var(--op1-bg);
}

.op1-payment-methods ul.payment_methods > li:last-child { border-bottom: none; }

.op1-payment-methods label {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--op1-text);
	text-transform: none;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.op1-payment-methods .payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	background: var(--op1-panel);
	border: 1px solid var(--op1-border);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--op1-text-secondary);
}

.op1-payment-methods .payment_box p { margin: 0 0 8px; }
.op1-payment-methods .payment_box p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
	.op1-order-head { flex-direction: column; }
	.op1-cart-coupon { display: flex; margin: 0 0 10px; }
	.op1-cart-coupon .input-text { flex: 1; width: auto; }
}