/* Orange Fashion dark style for the store, account, cart, checkout and policy pages.
   The home page (original.html) carries its own styles; these use the same colours and type. */

/* Theme palette and type (Twenty Twenty-Five), switched to the brand. Set on body so it wins over the theme's :root values. */
body {
  --of-bg: #17181A;
  --of-panel: #1E1F22;
  --of-line: #3A3C40;
  --of-ink: #ECEAE6;
  --of-ink-2: #B3B1AC;
  --of-muted: #8F9195;
  --of-caramel: #B95F33;
  --of-caramel-deep: #A0502A;
  --of-latin: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --of-sans: "Jost", "Noto Sans TC", "PingFang TC", "Heiti TC", "Helvetica Neue", Arial, sans-serif;
  --wp--preset--color--base: var(--of-bg);
  --wp--preset--color--contrast: var(--of-ink);
  --wp--preset--color--accent-4: var(--of-muted);
  --wp--preset--color--accent-5: var(--of-panel);
  --wp--preset--color--accent-6: var(--of-line);
  --wp--preset--font-family--manrope: var(--of-sans);
  color-scheme: dark;
  background: var(--of-bg);
  color: var(--of-ink);
  font-family: var(--of-sans);
  font-weight: 300;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

/* One language at a time: oorangee-lang.php marks <html> with the language chosen on the home page. */
html:not([data-lang="tw"]) .ofh-zh, html[data-lang="tw"] .ofh-en { display: none !important; }

/* Type */
body h1, body h2, body h3, body h4 { font-family: var(--of-latin); font-weight: 300; letter-spacing: .02em; color: var(--of-ink); }
body h1 { font-size: clamp(30px, 3.4vw, 46px); }
body h2 { font-size: clamp(22px, 2.2vw, 30px); }
body strong, body b, body th { font-weight: 500; }
body a { color: var(--of-ink); text-decoration-color: var(--of-line); text-underline-offset: .2em; }
body a:hover { color: var(--of-caramel); }
::selection { background: rgba(185, 95, 51, .32); }
.woocommerce-breadcrumb, .wc-block-breadcrumbs, .wp-block-woocommerce-breadcrumbs {
  font-family: var(--of-latin); font-size: 11px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--of-muted);
}
.woocommerce-breadcrumb a, .wp-block-woocommerce-breadcrumbs a { color: var(--of-muted); text-decoration: none; }
hr, .wp-block-separator { border-color: var(--of-line) !important; color: var(--of-line); }

/* Buttons */
body .wp-element-button, body .wp-block-button__link, body .button, body button.button, body a.button,
body .wc-block-components-button:not(.is-link), body .woocommerce-form-login__submit, body .single_add_to_cart_button {
  background: var(--of-caramel) !important; color: #FFFFFF !important; border: 1px solid var(--of-caramel) !important;
  border-radius: 0 !important; box-shadow: none !important; font-family: var(--of-latin) !important; font-weight: 400 !important;
  font-size: 12px !important; letter-spacing: .24em; text-transform: uppercase; padding: 14px 28px; text-decoration: none !important;
}
body .wp-element-button:hover, body .wp-block-button__link:hover, body .button:hover, body .wc-block-components-button:not(.is-link):hover,
body .woocommerce-form-login__submit:hover, body .single_add_to_cart_button:hover {
  background: var(--of-caramel-deep) !important; border-color: var(--of-caramel-deep) !important;
}
body .single_add_to_cart_button.disabled, body .wc-block-components-button:disabled { opacity: .45; }
/* Product grid buttons are outlined, like the home page's secondary button. */
body .wc-block-components-product-button .wp-block-button__link, body .wp-block-woocommerce-product-button .wp-block-button__link,
body .wc-block-components-product-button__button {
  background: transparent !important; color: var(--of-caramel) !important; padding: 11px 22px; font-size: 11px !important;
}
body .wc-block-components-product-button .wp-block-button__link:hover, body .wc-block-components-product-button__button:hover {
  background: var(--of-caramel) !important; color: #FFFFFF !important;
}

/* Form fields */
body input[type=text], body input[type=email], body input[type=password], body input[type=tel], body input[type=number],
body input[type=search], body input[type=url], body select, body textarea,
body .wc-block-components-text-input input, body .wc-block-components-textarea, body .wc-blocks-components-select__select,
body .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  background: var(--of-panel) !important; color: var(--of-ink) !important; border: 1px solid var(--of-line) !important;
  border-radius: 0 !important; box-shadow: none !important; font-family: var(--of-sans);
}
body input:focus, body select:focus, body textarea:focus, body .wc-block-components-text-input input:focus {
  border-color: var(--of-caramel) !important; outline: none !important;
}
body select option { background: var(--of-panel); color: var(--of-ink); }
/* Size and sorting menus: the background above drops WooCommerce's arrow, so they get their own chevron and room for the text. */
body table.variations select, body .woocommerce-ordering select {
  -webkit-appearance: none; appearance: none; height: auto; min-width: 200px; line-height: 1.4; font-size: 14px;
  padding: 10px 38px 10px 14px !important;
  background: var(--of-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238F9195' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 14px center / 11px auto !important;
}
body .wc-block-components-text-input label, body .wc-blocks-components-select__label, body .wc-block-components-combobox label {
  color: var(--of-muted) !important;
}
body .woocommerce form .form-row label, body .woocommerce-form-login label {
  font-family: var(--of-latin); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--of-muted);
}
html[data-lang="tw"] body .woocommerce form .form-row label, html[data-lang="tw"] body .woocommerce-form-login label { letter-spacing: .12em; }
body .required { color: var(--of-caramel) !important; }
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox], body input[type=checkbox] {
  background: var(--of-panel) !important; border: 1px solid var(--of-line) !important; border-radius: 0 !important;
}
body .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--of-caramel) !important; }
body input[type=checkbox] { accent-color: var(--of-caramel); }
body .wc-block-components-radio-control__input { border-color: var(--of-muted) !important; background: transparent !important; }
body .wc-block-components-radio-control__input:checked::before { background: var(--of-caramel) !important; }
body .woocommerce-password-strength, body .show-password-input { color: var(--of-muted); }

/* Notices */
body .woocommerce-info, body .woocommerce-message, body .woocommerce-error, body .wc-block-components-notice-banner {
  background: var(--of-panel) !important; color: var(--of-ink) !important; border: 1px solid var(--of-line) !important;
  border-left: 2px solid var(--of-caramel) !important; border-radius: 0 !important;
}
body .woocommerce-info a, body .woocommerce-message a, body .wc-block-components-notice-banner a { color: var(--of-caramel); }
body .wc-block-components-notice-banner, body .woocommerce-message, body .woocommerce-info, body .woocommerce-error { font-size: 13px !important; }
body .wc-block-components-notice-banner > svg { fill: var(--of-caramel) !important; background: transparent !important; }
body .wc-block-components-notice-banner:focus { outline: 1px solid var(--of-line); outline-offset: 0; }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
body .woocommerce-message .wc-forward {
  background: transparent !important; border: 0 !important; padding: 0 !important; opacity: 1 !important; color: var(--of-caramel) !important;
  font-family: var(--of-latin) !important; font-size: 11px !important; letter-spacing: .2em; text-transform: uppercase; text-decoration: none !important;
}

/* Login and account */
body .woocommerce-form-login, body .woocommerce-form-register, body .woocommerce-ResetPassword, body form.lost_reset_password {
  background: var(--of-panel); border: 1px solid var(--of-line) !important; border-radius: 0 !important; padding: 32px !important;
}
/* Logged-out account pages (login, lost password): a narrow card in the middle of the page. */
body.woocommerce-account:not(.logged-in) .woocommerce { max-width: 440px; margin-left: auto !important; margin-right: auto !important; }
body.woocommerce-account:not(.logged-in) .wp-block-post-title { text-align: center; }
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  font-size: 13px !important; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; text-align: center; color: var(--of-ink-2); margin: 28px 0 14px;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login { padding: 26px 26px 20px !important; }
body .woocommerce-LostPassword a, body .lost_password a {
  font-family: var(--of-latin); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--of-muted); text-decoration: none;
}
body .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--of-line); }
body .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--of-line); margin: 0 !important; padding: 0 !important; }
body .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 0; font-family: var(--of-latin); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--of-ink-2); }
body .woocommerce-MyAccount-navigation li.is-active a { color: var(--of-caramel); }
body table, body th, body td { border-color: var(--of-line) !important; }

/* Product grids (store, categories, related products), sized like SSENSE (measured on ssense.com): tall 2:3 photos four
   across beside the category sidebar, 10px apart, and small text under each photo, left-aligned: brand, name, price.
   No buttons; the tile is the link. */
body .wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 34px 10px !important; }
@media (max-width: 1023px) { body .wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { body .wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
body .wc-block-components-product-image img, body .wp-block-woocommerce-product-image img, body .woocommerce-product-gallery img { background: #FFFFFF; }
body .wc-block-components-product-image { margin: 0 0 10px !important; }
body .wc-block-components-product-image img { aspect-ratio: 2 / 3 !important; object-fit: cover !important; width: 100%; }
body .wc-block-product { text-align: left !important; }
body .ofh-tile-brand { font: 400 12px/16px var(--of-sans); letter-spacing: .04em; text-transform: uppercase; text-align: left; color: var(--of-ink); margin: 0; }
body .wc-block-product-template .wp-block-post-title, body .wc-block-product .wp-block-post-title {
  font: 400 12px/16px var(--of-sans) !important; letter-spacing: .02em; text-transform: none; text-align: left !important; color: var(--of-ink-2); margin: 0 !important;
}
body .wc-block-product-template .wp-block-woocommerce-product-price, body .wc-block-product-template .wc-block-components-product-price {
  font: 400 12px/16px var(--of-sans) !important; letter-spacing: .02em; text-align: left !important; justify-content: flex-start; margin: 0 !important;
}
body .wc-block-product-template .wp-block-woocommerce-product-button { display: none; }
body .wp-block-post-title a { text-decoration: none; color: inherit; }
body .wc-block-components-product-price, body .wp-block-woocommerce-product-price, body .price {
  color: var(--of-ink-2) !important; font-family: var(--of-latin); letter-spacing: .02em;
}
/* Product page photo, small and square (the user's choice): a 300px square on computers, at most 260px on phones and
   tablets. The whole 2:3 photo sits in the square on white; thumbnails are squares too. */
@media (min-width: 782px) {
  body.single-product .wp-block-column:has(> .wp-block-woocommerce-product-image-gallery) { flex-basis: 300px !important; flex-grow: 0 !important; }
}
@media (max-width: 781px) {
  body.single-product .wp-block-woocommerce-product-image-gallery { max-width: min(60%, 260px); margin-left: auto; margin-right: auto; }
}
body.single-product .woocommerce-product-gallery__image img, body.single-product .flex-control-thumbs img {
  aspect-ratio: 1 / 1; object-fit: contain; background: #FFFFFF; width: 100%; height: auto;
}
/* Product page text at SSENSE's scale: brand, name and price 13px, the rest 12px. */
body.single-product h1.wp-block-post-title { font: 400 13px/18px var(--of-sans) !important; letter-spacing: .02em; margin: 0 0 10px; }
body.single-product .wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template] .wc-block-components-product-price { font: 400 13px/18px var(--of-sans) !important; }
body.single-product h2.wp-block-heading { font: 400 12px/16px var(--of-sans) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--of-ink-2); }
/* Inactive gallery thumbnails are half transparent; on white they look faded rather than grey. They sit centred under the photo. */
body .flex-control-thumbs { display: flex; justify-content: center; }
body .flex-control-thumbs li { background: #FFFFFF; }
/* Store page heading, result count and sorting: small, as on SSENSE. */
body h1.wp-block-query-title { font: 400 12px/16px var(--of-sans) !important; letter-spacing: .04em; text-transform: uppercase; margin: 6px 0 !important; }
body .woocommerce-ordering select { font-size: 12px; padding: 7px 34px 7px 12px !important; min-width: 170px; }
body .woocommerce-result-count, body .wc-block-product-results-count { color: var(--of-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
body .wc-block-components-sale-badge, body .onsale { background: var(--of-caramel) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 0 !important; }
body .wp-block-query-pagination a, body .page-numbers { color: var(--of-ink-2); }
body .page-numbers.current, body .wp-block-query-pagination .current { color: var(--of-caramel); }

/* Single product */
body .wp-block-woocommerce-product-meta, body .product_meta { color: var(--of-muted); font-size: 12px; letter-spacing: .08em; }
body .wp-block-woocommerce-product-meta *, body .product_meta * { font-weight: 400 !important; }
/* Tags are internal groupings (such as "sale"), not something to show buyers. */
body .product_meta .tagged_as, body .wp-block-woocommerce-product-meta .tagged_as, body .wp-block-post-terms.taxonomy-product_tag { display: none !important; }
body .wc-tabs li a, body .woocommerce-tabs .tabs li a { color: var(--of-muted) !important; font-family: var(--of-latin); letter-spacing: .16em; text-transform: uppercase; font-size: 12px !important; }
body .wc-tabs li.active a, body .woocommerce-tabs .tabs li.active a { color: var(--of-ink) !important; }
body .woocommerce-tabs .tabs li.active, body .wc-tabs li.active { border-bottom-color: var(--of-caramel) !important; }
body .quantity .qty { background: var(--of-panel) !important; color: var(--of-ink) !important; }
body table.variations th, body table.variations label { font-family: var(--of-latin); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--of-muted); }
body .reset_variations { color: var(--of-muted); font-size: 12px; }

/* Cart and checkout */
body .wc-block-cart-items, body .wc-block-cart-items th, body .wc-block-cart-items td, body .wc-block-cart-item__wrap,
body .wc-block-components-totals-wrapper, body .wc-block-components-panel, body .wc-block-components-order-summary,
body .wp-block-woocommerce-checkout-order-summary-block, body .wc-block-components-address-card, body .wc-block-checkout__actions,
body .wc-block-components-radio-control__option, body .wc-block-components-radio-control-accordion-option,
body .wc-block-components-quantity-selector, body .wc-block-components-sidebar-layout .wc-block-components-main {
  border-color: var(--of-line) !important;
}
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: inset 0 0 0 1px var(--of-caramel) !important;
}
body .wc-block-components-quantity-selector input, body .wc-block-components-quantity-selector button { background: transparent !important; color: var(--of-ink) !important; border-color: var(--of-line) !important; }
body .wc-block-components-order-summary-item__quantity { background: var(--of-caramel) !important; color: #FFFFFF !important; border-color: var(--of-caramel) !important; box-shadow: none !important; }
body .wc-block-components-product-name, body .wc-block-cart-item__product .wc-block-components-product-name {
  font-family: var(--of-latin); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--of-ink); text-decoration: none;
}
body .wc-block-components-product-metadata, body .wc-block-components-product-details { color: var(--of-muted); }
body .wc-block-components-totals-item__label, body .wc-block-components-title, body .wc-block-components-checkout-step__title {
  font-family: var(--of-latin); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 13px !important;
}
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 16px !important; color: var(--of-ink); }
body .wc-block-components-checkout-step__description, body .wc-block-checkout__terms, body .wc-block-components-totals-item__description { color: var(--of-muted); }
body .wc-block-components-address-card__edit, body .wc-block-components-panel__button { color: var(--of-caramel) !important; }
body .wc-block-components-product-badge { border-color: var(--of-line) !important; color: var(--of-muted) !important; }
/* Shipping is charged by the courier on delivery, so the zero-cost rate must not read "Free". */
body .wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label { display: none; }
body .wc-block-components-totals-shipping .wc-block-components-totals-item__value { font-size: 0 !important; }
body .wc-block-components-totals-shipping .wc-block-components-totals-item__value::after { content: "Paid on delivery"; font-size: 13px; color: var(--of-ink-2); }
html[data-lang="tw"] body .wc-block-components-totals-shipping .wc-block-components-totals-item__value::after { content: "到付"; }

/* Pre-order / re-order (oorangee-preorder.php): collection terms, the size form on product pages, section pages. */
.ofh-grid-terms { font-size: 13px; line-height: 1.6; color: var(--of-ink-2); margin-bottom: 16px; }
.ofh-grid-terms p { margin: 0 0 4px; }
.ofh-grid-terms strong { color: var(--of-ink); font-weight: 500; letter-spacing: .06em; }
.ofh-grid-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ofh-grid-size { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--of-latin); font-size: 11px; letter-spacing: .1em; color: var(--of-muted); }
body .ofh-grid-size input { width: 58px; padding: 8px 4px !important; text-align: center; font-size: 14px; }
.ofh-grid-total { font-size: 13px; color: var(--of-ink-2); margin: 4px 0 14px; }
.ofh-grid-total b { color: var(--of-ink); font-weight: 500; }
.ofh-grid.ofh-grid-off .ofh-grid-total, .ofh-grid-closed { color: var(--of-caramel); }
.ofh-collection { margin: 0 0 56px; }
body .ofh-collection-name { font-family: var(--of-latin); font-size: 15px !important; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 6px; }
.ofh-collection-terms { font-size: 13px; color: var(--of-ink-2); margin: 0 0 4px; }
.ofh-section-empty { color: var(--of-muted); }

/* Store pages (oorangee-store.php), laid out like SSENSE: a 220px category sidebar in small plain text, the grid beside it
   (inside the theme's wide width, four photos of about 270px across, as on ssense.com). */
.ofh-store { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 20px; align-items: start; }
/* Anything else WooCommerce puts in here (its notices box) spans both columns. */
.ofh-store > * { grid-column: 1 / -1; }
.ofh-store > .ofh-store-nav { grid-column: 1; }
.ofh-store > .ofh-store-main { grid-column: 2; }
.ofh-store-nav { position: sticky; top: 24px; font: 400 12px/20px var(--of-sans); letter-spacing: .02em; }
.ofh-store-nav summary { display: none; }
.ofh-store-nav a { color: var(--of-ink-2); text-decoration: none; }
.ofh-store-nav a:hover, .ofh-store-nav a.is-current { color: var(--of-ink); }
.ofh-store-nav a.is-current { text-decoration: underline; text-decoration-color: var(--of-caramel); text-underline-offset: .3em; }
.ofh-store-depts { display: flex; flex-wrap: wrap; gap: 2px 14px; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--of-line); }
.ofh-store-dept { margin: 14px 0 2px; color: var(--of-muted); text-transform: uppercase; font-size: 11px; }
.ofh-store-group { margin: 0 0 6px; }
.ofh-store-group > a { color: var(--of-ink); }
.ofh-store-group ul, .ofh-store-brands { list-style: none; margin: 0 0 0 10px; padding: 0; }
.ofh-store-brands { margin-left: 0; }
.ofh-store-group li, .ofh-store-brands li { margin: 0; }
@media (max-width: 900px) {
  .ofh-store { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ofh-store > .ofh-store-nav, .ofh-store > .ofh-store-main { grid-column: 1; }
  .ofh-store-nav { position: static; border: 1px solid var(--of-line); padding: 8px 12px; }
  .ofh-store-nav summary { display: list-item; cursor: pointer; text-transform: uppercase; color: var(--of-ink); }
  .ofh-store-nav[open] summary { margin-bottom: 10px; }
}
/* Product page (oorangee-store.php): the brand above the name, the description under the order button. */
body .ofh-pdp-brand { margin: 0 0 6px; }
body .ofh-pdp-brand a { font: 400 13px/18px var(--of-sans); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--of-ink); }
body .ofh-pdp-details { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--of-line); font: 400 12px/18px var(--of-sans); color: var(--of-ink-2); }
body .ofh-pdp-details ul { padding-left: 1.1em; margin: .5em 0; }

/* Header and footer bars (oorangee-chrome.php) */
.ofh-bar { background: #17181A; color: #ECEAE6; font-family: var(--of-latin); font-size: 12px; letter-spacing: .14em; line-height: 1.9; }
.ofh-wrap { max-width: 1200px; margin: 0 auto; padding: 18px 24px; }
.ofh-head { border-bottom: 1px solid #3A3C40; }
.ofh-head .ofh-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ofh-brand img { display: block; height: 32px; width: auto; }
.ofh-bar a { color: #ECEAE6; text-decoration: none; }
.ofh-bar a:hover { color: #B95F33; }
.ofh-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; text-transform: uppercase; }
.ofh-bar .ofh-zh { font-family: var(--of-sans); letter-spacing: .2em; }
.ofh-foot { margin-top: 64px; border-top: 1px solid #3A3C40; }
.ofh-foot .ofh-wrap { padding: 36px 24px; color: #8F9195; letter-spacing: .06em; }
.ofh-foot p { margin: 6px 0 0; }
.ofh-links { display: flex; flex-wrap: wrap; gap: 6px 0; }
.ofh-dot { padding: 0 10px; color: #5C5E62; }
@media (max-width: 600px) {
  .ofh-links { gap: 4px 18px; }
  .ofh-dot { display: none; }
  /* Two products per row: the outlined button spans the card and "Select options" stays on one line. */
  body .wc-block-components-product-button .wp-block-button__link { width: 100%; padding: 10px 6px; letter-spacing: .14em; white-space: nowrap; }
}