/* Megabutiken — WooCommerce-markup mot mockupens designvärden.
   WooCommerces egna stilmallar är avkopplade i inc/woocommerce.php, så den
   här filen klär Woos markup i samma tokens som assets/css/theme.css.
   Inga nya färger, typsnitt eller avstånd införs här. */

/* ---------- 1. Reapris och reamärke ---------- */

/* I mockupen fejkades rean med en knapp i sidfoten. I temat kommer
   kampanjpriset från WooCommerce, så märket följer produkten och inte
   reafältets på/av-inställning. */
.prod-badge { display: block; }

.prod-price del,
.pdp-price del,
.line-price del,
.hero-feature .prod-price del {
  color: #808080;
  margin-right: 6px;
  text-decoration: line-through;
}

.prod-price ins,
.pdp-price ins,
.line-price ins,
.hero-feature .prod-price ins {
  color: var(--yellow);
  font-weight: 700;
  text-decoration: none;
}

.pdp-price del { font-size: 18px; margin-right: 8px; }
.line-price del { font-size: 13px; }

.prod-price .amount,
.pdp-price .amount,
.line-price .amount { white-space: nowrap; }

.woocommerce-price-suffix {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- 2. Woos knappar ---------- */

a.button,
button.button,
input.button,
.single_add_to_cart_button,
.checkout-button,
.added_to_cart {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 16px var(--s6);
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--yellow);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

a.button:hover,
button.button:hover,
input.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.added_to_cart:hover {
  background: var(--yellow-hi);
  border-color: var(--yellow-hi);
  color: var(--on-yellow);
}

a.button:active,
button.button:active,
input.button:active,
.single_add_to_cart_button:active,
.checkout-button:active { transform: translateY(1px); }

button.button:disabled,
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
  background: transparent;
  border-color: var(--rule-2);
  color: var(--muted);
  cursor: not-allowed;
}

a.button.wc-backward {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-2);
}
a.button.wc-backward:hover {
  background: transparent;
  border-color: var(--yellow);
  color: var(--yellow);
}

/* ---------- 3. Meddelanden ---------- */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin: 0 0 var(--s5);
  padding: var(--s4);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--yellow);
  background: var(--ink-2);
  font-size: var(--t-small);
  color: var(--text);
}

.woocommerce-error {
  background: var(--yellow);
  color: var(--on-yellow);
  border-color: var(--on-yellow);
  flex-direction: column;
  align-items: flex-start;
}
.woocommerce-error li { color: var(--on-yellow); }
.woocommerce-error a { color: var(--on-yellow); text-decoration: underline; }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

@media (max-width: 560px) {
  .woocommerce-message .button,
  .woocommerce-info .button {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 4. Sortimentets filterlänkar ---------- */

a.chip {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 860px) {
  a.chip { min-height: 44px; }
}

/* ---------- 5. Köpblocket på produktsidan ---------- */

form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s5);
  margin: 0;
}

form.cart .quantity,
.woocommerce-variation-add-to-cart .quantity {
  width: 100%;
  max-width: 300px;
}

form.cart .quantity.hidden { display: none; }

.variations {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  display: block;
}
.variations tbody { display: block; }
.variations tr {
  display: block;
  margin-bottom: var(--s4);
}
.variations tr:last-child { margin-bottom: 0; }
.variations th,
.variations td {
  display: block;
  padding: 0;
  text-align: left;
  font-weight: 400;
}

.variations th.label label {
  display: block;
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.variations select {
  width: 100%;
  max-width: 300px;
  padding: 13px 44px 13px var(--s4);
  background-color: var(--ink-3);
  color: var(--text);
  border: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--yellow) 50%),
    linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color .14s ease;
}
.variations select:focus { border-color: var(--yellow); }
.variations select option { background: var(--ink-2); color: var(--text); }

.reset_variations {
  display: inline-block;
  margin-top: var(--s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
  border-bottom: 2px solid var(--yellow);
}

.single_variation_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  width: 100%;
}

.woocommerce-variation-price .price {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--yellow);
}
.woocommerce-variation-description { color: var(--muted); font-size: var(--t-small); }

.stock {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yellow);
}
.stock.out-of-stock { color: var(--muted); }

.woocommerce-grouped-product-list {
  width: 100%;
  border: 1px solid var(--rule);
  border-collapse: collapse;
}
.woocommerce-grouped-product-list td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

@media (max-width: 860px) {
  .variations select { font-size: 16px; }
}

@media (max-width: 560px) {
  form.cart .quantity,
  .woocommerce-variation-add-to-cart .quantity,
  .variations select { max-width: none; }

  form.cart .single_add_to_cart_button,
  .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 6. Varukorgen ---------- */

a.line-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.line-name .variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s2);
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
.line-name .variation dt { font-weight: 400; }
.line-name .variation dd { margin: 0; }
.line-name .variation dd p { margin: 0; }

.woocommerce-remove-coupon {
  margin-left: var(--s2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.woocommerce-remove-coupon:hover { color: var(--yellow); }

.cart-collaterals { display: block; }

.cross-sells { margin-top: var(--s7); }
.cross-sells > h2 {
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
}

.wc-proceed-to-checkout .checkout-button { margin: 0; }

@media (max-width: 560px) {
  .step-go .checkout-button {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 7. Arkivtext och faktarad ---------- */

.term-description,
.page-description { margin-top: var(--s4); }

.term-description p,
.page-description p {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.pdp-fact a {
  color: inherit;
  border-bottom: 1px solid var(--rule-2);
}
.pdp-fact a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ---------- 8. Formulärfält ---------- */

/* Woo skriver ut sina fält med woocommerce_form_field. Kassans e-postfält får
   mockupens klasser via inc/checkout.php, resten klär vi här. */

.form-row {
  margin: 0 0 var(--s4);
}
.form-row:last-child { margin-bottom: 0; }

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-account-fields { margin-top: var(--s5); }

.form-row > label {
  display: block;
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.form-row .required {
  color: var(--yellow);
  border: 0;
  text-decoration: none;
}
.form-row .optional { color: #7f7f7f; }

.woocommerce-input-wrapper { display: block; }

.input-text,
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row textarea {
  width: 100%;
  padding: 13px var(--s4);
  background-color: var(--ink-3);
  color: var(--text);
  border: 1px solid var(--rule-2);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .14s ease;
}
.input-text::placeholder { color: #7f7f7f; }
.input-text:focus { border-color: var(--yellow); }
.form-row textarea { min-height: 120px; resize: vertical; }

.form-row select {
  width: 100%;
  padding: 13px 44px 13px var(--s4);
  background-color: var(--ink-3);
  color: var(--text);
  border: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--yellow) 50%),
    linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.form-row select:focus { border-color: var(--yellow); }
.form-row select option { background: var(--ink-2); color: var(--text); }

.woocommerce-invalid .input-text,
.woocommerce-invalid select,
.woocommerce-invalid .select2-container .select2-selection--single { border-color: var(--yellow); }
.woocommerce-invalid > label { color: var(--yellow); }

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
}
.woocommerce-form__label-for-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--yellow);
}

.woocommerce-password-strength {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}
.woocommerce-password-hint { font-size: 13px; color: var(--muted); }

/* Select2, som Woo använder till land och län i kassan. */

.select2-container .select2-selection--single {
  height: auto;
  padding: 13px var(--s4);
  background: var(--ink-3);
  border: 1px solid var(--rule-2);
  border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.2;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #7f7f7f; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 12px;
  height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--yellow); }
.select2-container--open .select2-selection--single { border-color: var(--yellow); }

.select2-dropdown {
  background: var(--ink-2);
  border: 1px solid var(--yellow);
  border-radius: 0;
  color: var(--text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 11px var(--s3);
  background: var(--ink-3);
  border: 1px solid var(--rule-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
}
.select2-container--default .select2-results__option {
  padding: 11px var(--s4);
  font-size: 15px;
  color: var(--muted);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--yellow);
  color: var(--on-yellow);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--ink-3);
  color: var(--text);
}

/* ---------- 9. Kassans kort och rutor ---------- */

.opt:focus-within { box-shadow: inset 0 0 0 2px var(--yellow); }
.opt-ikon img {
  max-height: 20px;
  width: auto;
}

.mb-frakt .sub:first-child { margin-top: 0; }
.mb-frakt .opts + .sub { margin-top: var(--s4); }

.payment_box {
  margin-top: var(--s4);
  font-size: 14px;
  color: var(--muted);
}
.payment_box p { margin-bottom: var(--s3); }
.payment_box p:last-child { margin-bottom: 0; }
.payment_box input[type="text"],
.payment_box input[type="email"],
.payment_box select {
  width: 100%;
  max-width: 340px;
  padding: 13px var(--s4);
  background-color: var(--ink-3);
  color: var(--text);
  border: 1px solid var(--rule-2);
  font-family: var(--sans);
  font-size: 15px;
}

.woocommerce-terms-and-conditions-wrapper { margin-top: var(--s5); }
.woocommerce-terms-and-conditions {
  margin-bottom: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--rule);
  background: var(--ink-2);
  font-size: 14px;
  color: var(--muted);
}
.woocommerce-terms-and-conditions-link { color: var(--yellow); }
.validate-required .woocommerce-terms-and-conditions-checkbox-text { color: var(--muted); }

.place-order { margin: 0; }

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.checkout_coupon {
  margin-bottom: var(--s6);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--rule);
  background: var(--ink-2);
}
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { margin-bottom: var(--s5); }
.woocommerce-form-login__rememberme { margin-bottom: var(--s4); }
.woocommerce-LostPassword {
  margin: var(--s3) 0 0;
  font-size: 13px;
}
.woocommerce-LostPassword a { color: var(--yellow); }

/* Woos overlay under AJAX-uppdateringen, i mörkt i stället för vitt. */
.blockUI.blockOverlay {
  background: var(--ink) !important;
  opacity: .55 !important;
}

/* ---------- 10. Order och kvitto ---------- */

.mb-order-details { margin-top: var(--s7); }
.mb-order-details .lines { margin-top: var(--s3); }

.woocommerce-order .receipt + .woocommerce-order-details { margin-top: var(--s6); }

.woocommerce-order-overview {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: var(--s5) 0 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.woocommerce-order-overview li {
  padding: var(--s4);
  background: var(--ink);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--text);
}

.woocommerce-customer-details { margin-top: var(--s6); }
.woocommerce-column__title,
.woocommerce-order-downloads__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.woocommerce-customer-details address {
  padding: var(--s4);
  border: 1px solid var(--rule);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 11. Mina konto-sidorna ---------- */

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 var(--s6);
  padding: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.woocommerce-MyAccount-navigation li { background: var(--ink); flex: 1 1 auto; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 15px var(--s4);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background .14s ease, color .14s ease;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--ink-3); color: var(--yellow); }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ink-3);
  color: var(--yellow);
  box-shadow: inset 0 0 0 2px var(--yellow);
}

.woocommerce-MyAccount-content p { color: var(--muted); }
.woocommerce-MyAccount-content p a,
.woocommerce-MyAccount-content li a { color: var(--yellow); }
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .button:hover { color: var(--on-yellow); }

.woocommerce-Addresses {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s5);
}
.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s3);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.woocommerce-Address-title .edit { font-size: 13px; color: var(--yellow); }
.woocommerce-Address address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.shop_table {
  width: 100%;
  border: 1px solid var(--rule);
  border-collapse: collapse;
  font-size: 14px;
}
.shop_table th {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  background: var(--ink-2);
  text-align: left;
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.shop_table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  color: var(--text);
}
.shop_table tr:last-child td { border-bottom: 0; }
.shop_table .woocommerce-orders-table__cell-order-actions { text-align: right; }
.shop_table .button {
  padding: 9px var(--s4);
  font-size: 12px;
}

.woocommerce-EditAccountForm fieldset {
  margin-top: var(--s6);
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}
.woocommerce-EditAccountForm legend {
  padding: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .woocommerce-MyAccount-navigation a { min-height: 44px; }
  .shop_table { display: block; overflow-x: auto; }
}