/* Restyles WooCommerce's native "Il mio account" page (nav, tables, forms,
   notices) to match the rest of the site's dark theme + orange accent
   (#ff6608) instead of WooCommerce's plain default markup. Targets only
   WooCommerce's own stable, documented class names -- no theme markup is
   touched, so this survives WooCommerce/theme updates. */

/* The real containing element here (YOOtheme's own ".woocommerce" wrapper
   div around whatever WooCommerce content it's displaying) is a FLEX
   container, not plain block flow -- confirmed live via devtools
   (getComputedStyle(parent).display === "flex"). float/width are the
   wrong tool against a flex parent: float has no effect at all on a flex
   item, and a plain "width" only acts as a flex-basis hint that still
   gets shrunk by the flex algorithm alongside its sibling, which is why
   an earlier float+width(+!important) version of this rule kept getting
   overridden down to a fraction of the intended size. flex-shrink:0 on
   the nav (so it never shrinks below its basis) plus flex:1 on the
   content (so it takes the remaining space) is the correct fix for an
   actual flex parent. YOOtheme's own inline <style> block additionally
   ships several conflicting width:calc(25% - ...) rules for this exact
   element (page-builder-generated content we can't safely edit directly)
   -- !important is needed to beat those. */
/* YOOtheme sets an explicit column-rule (1.5px, light grey) on the
   ".woocommerce" flex parent -- the vertical divider line between nav and
   content. Harmless to disable outright: this parent isn't an actual
   multi-column layout, the rule is just left over from whatever grid
   settings the builder applied to this element. */
.woocommerce-account .woocommerce {
    column-rule: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: transparent;
    padding: 8px 0;
    margin-bottom: 30px;
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 30px !important;
}
/* The vertical divider line -- found by inspecting the live page -- is a
   1x406px ::before pseudo-element YOOtheme adds on .woocommerce-MyAccount-
   content itself (its own grid-divider technique), not a border/column-
   rule on either column. Hiding it directly. */
.woocommerce-account .woocommerce-MyAccount-content::before {
    display: none !important;
}
@media (max-width: 680px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        flex-basis: 100% !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content { margin-left: 0 !important; }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link {
    display: block;
    width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px;
    color: rgba(255,255,255,.8) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
    background: rgba(255,255,255,.05);
    color: #ffffff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    background: rgba(255,102,8,.12);
    color: #ff6608 !important;
    border-left: 3px solid #ff6608;
    padding-left: 17px;
}

.woocommerce-account .woocommerce-MyAccount-content {
    color: rgba(255,255,255,.8);
    font-size: 15px;
    line-height: 1.65;
}
.woocommerce-account .woocommerce-MyAccount-content a {
    color: #ff6608;
}
.woocommerce-account .woocommerce-MyAccount-content strong {
    color: #ffffff;
}
.woocommerce-account .woocommerce-MyAccount-content mark {
    background: transparent;
    color: #ffffff;
}

/* Orders / downloads tables */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    overflow: hidden;
    border-collapse: separate;
    color: rgba(255,255,255,.8);
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.woocommerce-orders-table th {
    background: rgba(255,255,255,.05);
    color: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: 12px 16px;
}
.woocommerce-account table.shop_table td,
.woocommerce-account table.woocommerce-orders-table td {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 12px 16px;
}
.woocommerce-account .woocommerce-orders-table__cell-order-status {
    color: #ff9a6f;
    font-weight: 600;
}
.woocommerce-account .woocommerce-button,
.woocommerce-account a.button,
.woocommerce-account button.button {
    background: #ff6608 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 18px;
    text-decoration: none !important;
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account button.button:hover {
    background: #e05a00 !important;
}

/* Forms: edit-account, edit-address, payment methods */
.woocommerce-account form .form-row label {
    color: rgba(255,255,255,.7);
    font-size: 13px;
}
.woocommerce-account form input.input-text,
.woocommerce-account form select,
.woocommerce-account form textarea {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #ffffff !important;
    border-radius: 4px;
    padding: 10px 12px;
}
.woocommerce-account form input.input-text:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
    border-color: #ff6608 !important;
    outline: none;
    box-shadow: none;
}
.woocommerce-account form select option {
    color: #000000;
}
.woocommerce-account .woocommerce-Address {
    padding: 0;
}
.woocommerce-account .woocommerce-Address-title h3 {
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 12px;
}
.woocommerce-account .woocommerce-Address-title a {
    color: #ff6608;
}

/* Notices -- WooCommerce floats any button inside these right by default
   (see woocommerce-layout.css's ".woocommerce-message .button{float:right}"
   rule), which overlaps the notice text instead of wrapping around it in
   this narrower column. Flexbox lays text and button side by side instead,
   wrapping to its own line on narrow screens. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: rgba(255,255,255,.05);
    border-top: 3px solid #ff6608;
    color: rgba(255,255,255,.85);
    border-radius: 4px;
    padding: 14px 20px;
}
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button {
    float: none;
    flex-shrink: 0;
    order: 2;
}
.woocommerce-account .woocommerce-error {
    border-top-color: #d9534f;
}

/* Payment methods list */
.woocommerce-account ul.woocommerce-PaymentMethods {
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    overflow: hidden;
}
.woocommerce-account ul.woocommerce-PaymentMethods li {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 14px 16px;
    color: rgba(255,255,255,.8);
}