/*
 * GDT — Product Options Styles
 * File:    gdt-product-options.css
 * Enqueue: functions.php → gdt_enqueue_component_styles()
 *
 * References Elementor Kit 8 global CSS tokens.
 * All colors and fonts are pulled from kit variables —
 * do not use static values here so the kit remains the
 * single source of truth.
 *
 * Scoped entirely to #prod-options so nothing bleeds
 * into the rest of the page.
 * ============================================================ */


/* ============================================================
   Override WooCommerce form colour variables within prod-options
   ============================================================ */

#prod-options {
    --wc-form-color-background: #1a1a1b;
    --wc-form-color-text:       var(--e-global-color-text);
    --wc-form-border-color:     rgba(255, 255, 255, 0.15);
}

/* ============================================================
   1. VARIATIONS TABLE — stack label above dropdown
   ============================================================ */

#prod-options .variations {
  display: block;
  width: 100%;
  border: none;
}

#prod-options .variations tbody,
#prod-options .variations tr {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#prod-options .variations tr:not(:last-child) {
  margin-bottom: 16px;
}

#prod-options .variations .label,
#prod-options .variations .value {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

#prod-options .variations .label {
  margin-bottom: 4px;
}

#prod-options .variations .label label {
  font-family: var(--e-global-typography-primary-font-family), sans-serif; /* Michroma */
  font-size: var(--e-global-typography-69f03e8-font-size);                /* clamp 0.75–0.875rem */
  font-weight: var(--e-global-typography-primary-font-weight);             /* 700 */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-global-color-38f343a);                                   /* #747474 muted */
  line-height: 1;
}

/* ============================================================
   2. SELECT / DROPDOWN — full width, modern, custom caret
   ============================================================ */

#prod-options select,
#prod-options .variations select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100%;
  display: block;
  box-sizing: border-box;
  background-color: #1a1a1b !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0px;
  color: var(--e-global-color-text) !important;
  padding: 12px 44px 12px 14px;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-74c8d73-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;

  /* Caret — default: muted white chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2C255%2C255%2C0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: calc(100% - 12px) 50%;
}

/* Hover — brighter border + brighter caret */
#prod-options select:hover {
  background-color: #222224 !important;  /* changed from rgba(255,255,255,0.09) */
  border-color: rgba(255, 255, 255, 0.40);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2C255%2C255%2C0.85)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

/* Focus — accent red border + red caret */
#prod-options select:focus {
  outline: none;
  border-color: var(--e-global-color-accent);
  box-shadow: 0 0 0 3px rgba(221, 12, 12, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23DD0C0C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

/* Override WooCommerce height/line-height resets */
#prod-options .value select,
#prod-options .wc-pao-addon-wrap select {
  height: auto;
  line-height: normal;
}


/* ============================================================
   3. TEXT INPUT — WC PAO custom engraving field
   ============================================================ */

#prod-options input[type="text"].wc-pao-addon-custom-text,
#prod-options input[type="text"].input-text {
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  color: var(--e-global-color-text);
  padding: 12px 14px;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-74c8d73-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#prod-options input[type="text"].wc-pao-addon-custom-text:hover,
#prod-options input[type="text"].input-text:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.40);
}

#prod-options input[type="text"].wc-pao-addon-custom-text:focus,
#prod-options input[type="text"].input-text:focus {
  outline: none;
  border-color: var(--e-global-color-accent);
  box-shadow: 0 0 0 3px rgba(221, 12, 12, 0.2);
}

#prod-options input[type="text"].wc-pao-addon-custom-text::placeholder {
  color: var(--e-global-color-38f343a);
}


/* ============================================================
   4. RADIO BUTTONS — WC PAO
   ============================================================ */

#prod-options input[type="radio"].wc-pao-addon-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  vertical-align: middle;
  display: inline-block;
  margin: 0 10px 0 0;
  flex-shrink: 0;
}

#prod-options input[type="radio"].wc-pao-addon-radio:hover {
  border-color: rgba(255, 255, 255, 0.50);
}

#prod-options input[type="radio"].wc-pao-addon-radio:checked {
  border-color: var(--e-global-color-accent);
  background-color: var(--e-global-color-accent);
  box-shadow: inset 0 0 0 4px #0D0D0E;
}

#prod-options input[type="radio"].wc-pao-addon-radio:focus {
  outline: none;
  box-shadow: inset 0 0 0 4px #0D0D0E, 0 0 0 3px rgba(221, 12, 12, 0.25);
}

#prod-options .wc-pao-addon-wrap [class^="wc-pao-addon-"] {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#prod-options .wc-pao-addon-wrap label[for^="addon-"] {
  cursor: pointer;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-74c8d73-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  color: var(--e-global-color-text);
  line-height: 1.4;
}


/* ============================================================
   5. CHECKBOXES — WC PAO
   ============================================================ */

#prod-options input[type="checkbox"].wc-pao-addon-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  display: inline-block;
  margin: 0 10px 0 0;
  position: relative;
  flex-shrink: 0;
}

#prod-options input[type="checkbox"].wc-pao-addon-checkbox:hover {
  border-color: rgba(255, 255, 255, 0.50);
  background-color: rgba(255, 255, 255, 0.09);
}

#prod-options input[type="checkbox"].wc-pao-addon-checkbox:checked {
  border-color: var(--e-global-color-accent);
  background-color: var(--e-global-color-accent);
}

#prod-options input[type="checkbox"].wc-pao-addon-checkbox:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: 2px solid var(--e-global-color-c9d6a0f);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

#prod-options input[type="checkbox"].wc-pao-addon-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(221, 12, 12, 0.25);
}


/* ============================================================
   6. WC PAO ADDON SECTION CARDS
   ============================================================ */

#prod-options .wc-pao-addon-container {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

#prod-options .wc-pao-addon-name,
#prod-options legend.wc-pao-legend {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: var(--e-global-typography-69f03e8-font-size);
  font-weight: var(--e-global-typography-primary-font-weight);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-global-color-38f343a);
  margin-bottom: 12px;
  display: block;
  border: none;
  padding: 0;
}

#prod-options .wc-pao-addon-name .required,
#prod-options .wc-pao-legend .required {
  color: var(--e-global-color-accent);
  visibility: visible;
}

#prod-options .wc-pao-addon-price {
  color: var(--e-global-color-accent);
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-69f03e8-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  letter-spacing: 0;
  text-transform: none;
}

#prod-options .wc-pao-addon-description p {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-69f03e8-font-size);
  color: var(--e-global-color-38f343a);
  margin: 0 0 10px;
}


/* ============================================================
   7. FIELDSET RESET — WC PAO
   ============================================================ */

#prod-options fieldset.wc-pao-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

#prod-options .wc-pao-fieldset legend {
  float: none;
  width: auto;
}


/* ============================================================
   8. QUANTITY INPUT
   ============================================================ */

#prod-options .quantity {
	margin-left: 0px;
}

#prod-options .quantity .qty {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0px;
  color: var(--e-global-color-text);
  padding: 11px 14px;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-355b316-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  text-align: center;
  width: 72px;
  transition: border-color 0.2s ease;
}

#prod-options .quantity .qty:focus {
  outline: none;
  border-color: var(--e-global-color-accent);
  box-shadow: 0 0 0 3px rgba(221, 12, 12, 0.2);
}

#prod-options button[type="submit"] {
  margin-inline-start: 0;
}

#prod-options form.cart:has(.quantity input[type="number"]) button[type="submit"] {
  margin-inline-start: var(--button-spacing, 10px);
}

/* ============================================================
   9. WAPF — Field group section cards
   ============================================================ */

#prod-options .wapf-field-row {
	margin-left: 0 !important;
}

#prod-options .wapf-field-container {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* ============================================================
   10. WAPF — Section labels
   ============================================================ */

#prod-options .wapf-field-label label {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: var(--e-global-typography-69f03e8-font-size);
  font-weight: var(--e-global-typography-primary-font-weight);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--e-global-color-38f343a);
  display: block;
  margin-bottom: 12px;
}

/* Remove label bottom margin when description immediately follows */
#prod-options .wapf-field-label:has(+ .wapf-field-description) label {
  margin-bottom: 0;
}

/* Required asterisk */
#prod-options .wapf-field-label .required {
  color: var(--e-global-color-accent);
  text-decoration: none;
  border: none;
}

/* Description text — default (below inputs) */
#prod-options .wapf-field-description {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-69f03e8-font-size);
  color: var(--e-global-color-38f343a);
  margin-top: 4px;
  margin-bottom: 12px;
}

/* Description text — when immediately after label, strip top spacing */
#prod-options .wapf-field-label + .wapf-field-description {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 12px;
}

/* ============================================================
   11. WAPF — Radio buttons
   ============================================================ */

#prod-options .wapf-radios .wapf-checkable {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#prod-options .wapf-radios .wapf-input-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-74c8d73-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  color: var(--e-global-color-text);
  line-height: 1.4;
}

#prod-options .wapf-radios input[type="radio"].wapf-input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  margin: 0;
}

#prod-options .wapf-radios input[type="radio"].wapf-input:hover {
  border-color: rgba(255, 255, 255, 0.50);
}

#prod-options .wapf-radios input[type="radio"].wapf-input:checked {
  border-color: var(--e-global-color-accent);
  background-color: var(--white-grey);
  box-shadow: inset 0 0 0 4px #dd0c0c;                                    /* page bg — must stay static */
}

#prod-options .wapf-radios input[type="radio"].wapf-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 4px #dd0c0c, 0 0 0 3px rgba(221, 12, 12, 0.25);
}


/* ============================================================
   12. WAPF — Checkboxes
   ============================================================ */

#prod-options .wapf-checkboxes .wapf-checkable {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

#prod-options .wapf-checkboxes .wapf-input-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-74c8d73-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  color: var(--e-global-color-text);
  line-height: 1.5;
}

#prod-options .wapf-checkboxes input[type="checkbox"].wapf-input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0px;
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  position: relative;
  flex-shrink: 0;
  margin: 2px 0 0 0;
}

#prod-options .wapf-checkboxes input[type="checkbox"].wapf-input:hover {
  border-color: rgba(255, 255, 255, 0.50);
  background-color: rgba(255, 255, 255, 0.09);
}

#prod-options .wapf-checkboxes input[type="checkbox"].wapf-input:checked {
  border-color: var(--e-global-color-accent);
  background-color: var(--e-global-color-accent);
}

#prod-options .wapf-checkboxes input[type="checkbox"].wapf-input:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: 2px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

#prod-options .wapf-checkboxes input[type="checkbox"].wapf-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(221, 12, 12, 0.25);
}


/* ============================================================
   13. WAPF — Text input
   ============================================================ */

#prod-options input[type="text"].wapf-input {
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0px;
  color: var(--e-global-color-text);
  padding: 12px 14px;
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-74c8d73-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#prod-options input[type="text"].wapf-input:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.40);
}

#prod-options input[type="text"].wapf-input:focus {
  outline: none;
  border-color: var(--e-global-color-accent);
  box-shadow: 0 0 0 3px rgba(221, 12, 12, 0.2);
}

#prod-options input[type="text"].wapf-input::placeholder {
  color: var(--e-global-color-38f343a);
}


/* ============================================================
   14. WAPF — Price hint badge e.g. (+$10.00)
   ============================================================ */

#prod-options .wapf-pricing-hint {
  color: var(--e-global-color-v4-dull-gold);
  font-size: var(--e-global-typography-69f03e8-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
}


/* ============================================================
   15. WAPF — Product totals block
   ============================================================ */

#prod-options .wapf-product-totals {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

#prod-options .wapf-product-totals .wapf--inner {
	padding: 0;
}

#prod-options .wapf-product-totals .wapf--inner > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#prod-options .wapf-product-totals .wapf--inner > div:last-child {
  border-bottom: none;
  padding-top: 10px;
}

/* Row labels */
#prod-options .wapf-product-totals .wapf--inner > div > span:first-child {
  font-family: var(--e-global-typography-primary-font-family), sans-serif; /* Michroma */
  font-size: var(--e-global-typography-69f03e8-font-size);
  font-weight: var(--e-global-typography-primary-font-weight);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--e-global-color-38f343a);
}

/* Amount values */
#prod-options .wapf-product-total,
#prod-options .wapf-options-total {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-74c8d73-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  color: var(--e-global-color-text);
}

/* Grand total — slightly larger and accent coloured */
#prod-options .wapf-grand-total {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: var(--e-global-typography-355b316-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);             /* 600 */
  color: var(--e-global-color-v4-dull-gold);
}

/* ============================================================
   Misc Overrides
   ============================================================ */
#prod-options a.reset_variations {
	color: var(--e-global-color-accent);
}

#prod-options a.reset_variations:hover {
	color: var(--e-global-color-16c32cc);
}

#prod-options .stock {
	font-size: var(--e-global-typography-26f8a9d-font-size);
	color: var(--dull-gold);
}

/* ============================================================
   Product Gallery Overrides
   ============================================================ */

/* Lock gallery viewport to 4:3, override JS-set inline height */
.woocommerce-product-gallery .flex-viewport {
    aspect-ratio: 4 / 3.5 !important;
    height: auto !important;
}

.woocommerce-product-gallery__wrapper {
    height: 100% !important;
    /* Single-image products get NO .flex-viewport (WooCommerce only initialises
       FlexSlider for >1 image), and .flex-viewport is the only thing giving this
       gallery a height - so the whole stack collapsed to h=0 and the photo was
       invisible. Load-bearing ONLY in that case: when FlexSlider HAS given the
       viewport a definite height, height:100% resolves and this is ignored.
       Verified 2026-09-06: multi-image layout byte-identical with and without. */
    aspect-ratio: 4 / 3.5;
}

.woocommerce-product-gallery__image {
    position: relative !important;
    height: 100% !important;
}

.woocommerce-product-gallery__image > a {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
}

.woocommerce-product-gallery__image img:not(.zoomImg) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}