/* =========================================================
   Dr Tech Nerds — WooCommerce styling
   Shop archive / single product / cart / checkout / account.
   Matches the DTN brand: Plus Jakarta Sans, blue #0C63F5 + green,
   rounded cards, green→blue gradient CTAs.
   ========================================================= */

:root { --dtn-grad: linear-gradient(120deg, #35c14a 0%, #0C63F5 100%); }

.woocommerce, .woocommerce-page,
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-family: var(--f-sans, system-ui); color: var(--ink-2, #35425C); }

/* Cart/checkout/account render inside page.php's .dtn-prose (800px clamp) — undo it */
body.woocommerce-cart .dtn-prose,
body.woocommerce-checkout .dtn-prose,
body.woocommerce-account .dtn-prose { max-width: none; font-size: 15px; color: var(--ink-2, #35425C); }
body.woocommerce-cart .dtn-prose ul, body.woocommerce-checkout .dtn-prose ul { margin-left: 0; }
body.woocommerce-cart .dtn-prose li, body.woocommerce-checkout .dtn-prose li { margin: 0; }

/* -------- Buttons: green→blue gradient everywhere -------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt,
.woocommerce #place_order, .woocommerce button.single_add_to_cart_button,
.wc-block-components-button.contained, .wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--dtn-grad) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--f-sans, system-ui) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px -8px rgba(12,99,245,.5) !important;
  cursor: pointer;
  transition: filter .15s, transform .15s;
  text-shadow: none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover,
.wc-block-components-button.contained:hover, .wp-element-button:hover,
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover {
  filter: brightness(1.06); transform: translateY(-1px); color: #fff !important;
}
/* Secondary/ghost buttons */
.woocommerce a.button.wc-backward, .woocommerce .cart .button[name="update_cart"] {
  background: transparent !important; color: var(--ink, #0A1326) !important;
  border: 1px solid var(--rule-strong, rgba(10,19,38,.2)) !important; box-shadow: none !important;
}

/* -------- Shop archive: product cards -------- */
.woocommerce ul.products, .woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px; margin: 24px 0 0; padding: 0;
}
/* WooCommerce clearfix pseudo-elements become phantom grid items — kill them */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; list-style: none;
  background: var(--bg-elev, #fff); border: 1px solid var(--rule, rgba(10,19,38,.1));
  border-radius: 18px; padding: 16px; display: flex; flex-direction: column;
  box-shadow: 0 10px 26px -18px rgba(10,19,38,.28); transition: transform .15s, box-shadow .15s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(10,19,38,.32); }
.woocommerce ul.products li.product > a { display: flex; flex-direction: column; text-decoration: none; }
.woocommerce ul.products li.product img { width: 100%; height: auto; border-radius: 12px; margin: 0 0 14px; background: #f4f7fb; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--ink, #0A1326); padding: 0 0 8px;
}
.woocommerce ul.products li.product .price { color: var(--ink, #0A1326); font-weight: 800; font-size: 18px; margin: auto 0 0; }
.woocommerce ul.products li.product .price del { color: var(--ink-3, #6A7488); font-weight: 500; font-size: 14px; opacity: .8; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin-top: 12px; text-align: center; text-decoration: none; padding: 11px 16px; font-size: 14px; display: block;
}
.woocommerce ul.products li.product .added_to_cart { background: transparent !important; color: var(--accent,#0C63F5) !important; box-shadow: none !important; font-weight: 700 !important; }
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
  background: var(--signal, #2FAE4E) !important; color: #fff; border-radius: 99px; min-height: 0; min-width: 0; padding: 4px 10px; font-weight: 700; line-height: 1.4;
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { font-family: var(--f-sans); color: var(--ink-3, #6A7488); font-size: 14px; }
.woocommerce .woocommerce-ordering select { border-radius: 8px; border: 1px solid var(--rule); padding: 8px 10px; }

/* -------- Single product -------- */
.woocommerce div.product .product_title { font-family: var(--f-sans); font-weight: 800; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; color: var(--ink, #0A1326); margin-bottom: 10px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent, #0C63F5); font-size: 28px; font-weight: 800; }
/* WC hides the gallery (opacity:0) until its JS inits; force it visible so the image shows */
.woocommerce div.product .woocommerce-product-gallery { opacity: 1 !important; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 16px; display: block; max-width: 100%; height: auto; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--ink-2, #35425C); font-size: 15.5px; line-height: 1.6; }
.woocommerce div.product form.cart { margin-top: 18px; }
.woocommerce div.product form.cart .quantity input.qty { border-radius: 10px; border: 1px solid var(--rule); padding: 12px 8px; }
.woocommerce div.product .single_add_to_cart_button { padding: 14px 30px !important; font-size: 16px !important; }
/* "Customise / swap parts" ghost button next to Add to cart */
.woocommerce div.product form.cart .dtn-customise-build {
  display: inline-block; background: transparent !important; color: var(--accent, #0C63F5) !important;
  border: 1.5px solid var(--accent, #0C63F5) !important; box-shadow: none !important;
  margin-left: 10px; padding: 12px 22px !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none;
}
.woocommerce div.product form.cart .dtn-customise-build:hover { background: var(--accent-soft, #E1EDFF) !important; color: var(--accent, #0C63F5) !important; transform: translateY(-1px); }
@media (max-width: 520px){ .woocommerce div.product form.cart .dtn-customise-build { margin: 10px 0 0; display: block; text-align: center; } }
.woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0 0 0 0; margin-bottom: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--rule, rgba(10,19,38,.1)); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--bg-soft, #F6FAFF); border: 1px solid var(--rule); border-radius: 10px 10px 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ink-2); font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--bg-elev, #fff); border-bottom-color: var(--bg-elev, #fff); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.woocommerce div.product .woocommerce-tabs .panel { color: var(--ink-2); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--f-sans); color: var(--ink); }
.woocommerce div.product .woocommerce-tabs .panel ul { line-height: 1.7; }

/* -------- Cart (block) -------- */
.wc-block-cart-items__header { font-family: var(--f-mono, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3, #6A7488); font-size: 12px; }
.wc-block-cart-item__product-name, .wc-block-components-product-name { color: var(--ink, #0A1326) !important; font-weight: 700; text-decoration: none; }
.wc-block-cart__sidebar .wc-block-components-panel,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart .wc-block-components-totals-wrapper:last-child {
  background: var(--bg-elev, #fff); border: 1px solid var(--rule, rgba(10,19,38,.1));
  border-radius: 16px; padding: 20px; box-shadow: 0 12px 30px -20px rgba(10,19,38,.3);
}
.wc-block-cart__sidebar { position: sticky; top: 88px; align-self: start; }
.wc-block-components-totals-item__label { color: var(--ink-2, #35425C); }
.wc-block-components-totals-item__value { color: var(--ink, #0A1326); font-weight: 700; }
.wc-block-components-totals-footer-item { font-size: 18px; }
.wc-block-cart__submit-button { width: 100%; font-size: 16px !important; padding: 16px !important; border-radius: 12px !important; font-weight: 800 !important; }
.wc-block-components-quantity-selector { border-radius: 10px; }

/* -------- Checkout (block) -------- */
.wc-block-components-text-input input, .wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-checkout .wc-block-components-text-input input {
  border-radius: 10px !important; border-color: var(--rule, rgba(10,19,38,.15)) !important;
}
.wc-block-checkout__sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--bg-elev, #fff); border: 1px solid var(--rule, rgba(10,19,38,.1));
  border-radius: 16px; padding: 20px; box-shadow: 0 12px 30px -20px rgba(10,19,38,.3);
}
.wc-block-components-checkout-step__title, .wc-block-components-title { font-family: var(--f-sans); font-weight: 700; color: var(--ink, #0A1326); }
.wc-block-components-checkout-place-order-button { width: 100%; font-size: 16px !important; padding: 16px 26px !important; border-radius: 12px !important; font-weight: 800 !important; }
.wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option { border-radius: 10px; }
.wc-block-checkout__payment-method .wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option--checked { box-shadow: inset 0 0 0 2px var(--accent, #0C63F5); border-radius: 10px; }

/* -------- Notices -------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
  border-radius: 12px !important; font-family: var(--f-sans);
}
.woocommerce-message { border-top: 3px solid var(--signal, #2FAE4E) !important; }
.woocommerce-info { border-top: 3px solid var(--accent, #0C63F5) !important; }

/* -------- Account -------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--accent-soft, #E1EDFF); color: var(--accent, #0C63F5); }

/* =========================================================
   Product contact buttons + cart pill compaction + responsive
   ========================================================= */

/* ---- Product: "Talk to a nerd" WhatsApp + call, above add-to-cart ---- */
.dtn-product-contact { margin: 6px 0 18px; padding: 14px 16px; background: var(--bg-soft, #F6FAFF); border: 1px solid var(--rule, rgba(10,19,38,.1)); border-radius: 14px; }
.dtn-product-contact__label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2, #35425C); margin-bottom: 10px; }
.dtn-product-contact__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.dtn-pc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; font-family: var(--f-sans); font-weight: 700; font-size: 14.5px; text-decoration: none; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(10,19,38,.3); transition: filter .15s, transform .15s; }
.dtn-pc-btn:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff !important; }
.dtn-pc-btn svg { width: 18px; height: 18px; }
.dtn-pc-btn--wa { background: #25d366; }
.dtn-pc-btn--call { background: var(--accent, #0C63F5); }
@media (max-width: 520px) { .dtn-pc-btn { flex: 1 1 auto; justify-content: center; } }

/* ---- Cart/checkout: compact multi-column spec pills (bigger, less scroll) ---- */
/* Block cart renders each part as a span.wc-block-components-product-details__<stepkey>
   with "<span aria-hidden> / </span>" separators between them. Grid the parts, hide
   the "/" separators and the redundant "Case:" labels (each pill carries its own). */
.wc-block-components-product-details {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px; margin: 10px 0 0 !important; padding: 0 !important; list-style: none;
}
.wc-block-components-product-details > span[class*="__"] { margin: 0 !important; padding: 0 !important; border: 0 !important; display: block; }
.wc-block-components-product-details > span[class*="__"] > span[aria-hidden="true"] { display: none !important; } /* kill the " / " separators (nested inside each part span) */
.wc-block-components-product-details__name { display: none !important; } /* pill already carries the label */
.wc-block-components-product-details__value { display: block; }
.dtn-spec-row { font-size: 13px !important; padding: 8px 12px !important; width: 100%; box-sizing: border-box; border-radius: 10px !important; align-items: center; }
.dtn-spec-row__icon { width: 22px !important; height: 22px !important; flex: 0 0 auto; }
.dtn-spec-row__label { font-size: 10.5px !important; }
.dtn-spec-row__value { font-size: 13px !important; font-weight: 600; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25; }

/* ---- Cart: make "remove item" obvious ---- */
.wc-block-cart-item__remove-link {
  color: #c0392b !important; font-weight: 700 !important; font-size: 13px !important;
  text-decoration: underline !important; text-underline-offset: 2px;
}
.wc-block-cart-item__remove-link:hover { color: #a5281b !important; }
.wc-block-cart-item__quantity { align-items: flex-start; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary.entry-summary { width: 100% !important; float: none !important; margin: 0 0 24px !important; }
  .wc-block-components-product-details { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wc-block-cart__sidebar { position: static !important; }
}
@media (max-width: 480px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; }
  .woocommerce div.product .product_title { font-size: 26px; }
}