/* =========================================================
   My Account – (menu on top)
   ========================================================= */

@media (max-width: 767px){

  /* 1) Stop side-by-side layout on mobile */
  body.woocommerce-account .woocommerce{
    display: block !important;
    gap: 0 !important;
  }

  /* 2) Navigation: full width, no desktop offsets */
  body.woocommerce-account .woocommerce-MyAccount-navigation{
    display: block !important; 
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;

    margin: 0 0 16px 0 !important;
    padding: 0 !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* 3) Turn links into grid */
  body.woocommerce-account .woocommerce-MyAccount-navigation ul{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul li{
    margin: 0 !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
    max-width: none !important;  
    width: 100% !important;
    text-align: center !important;
    padding: 12px 10px !important;
    border-radius: 6px !important;
  }

  /* 4) Content takes full width under the menu */
  body.woocommerce-account .woocommerce-MyAccount-content{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }
}

/* Extra small phones: 1 column menu */
@media (max-width: 420px){
  body.woocommerce-account .woocommerce-MyAccount-navigation ul{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   My Account > Orders 
   ========================================================= */

@media (max-width: 767px){
/*gaps on sides in all paskyra*/
	body.woocommerce-account .woocommerce{
    gap: 12px !important;
  }

	
  /* Prevent overflow caused by global button margins */
  body.woocommerce-account a.button,
  body.woocommerce-account button.button,
  body.woocommerce-account .woocommerce-Button.button{
    margin-left: 0 !important;
  }

  /*content fits the screen */
  body.woocommerce-account .woocommerce,
  body.woocommerce-account .woocommerce-MyAccount-content{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  /* Hide the table header */
  body.woocommerce-account table.woocommerce-orders-table thead{
    display: none !important;
  }


  /* Each order becomes its own bordered block */
  body.woocommerce-account table.woocommerce-orders-table{
    width: 100% !important;
    border-collapse: collapse !important;
  }

  body.woocommerce-account table.woocommerce-orders-table tbody tr{
    display: block !important;
    border: 1px solid #cfcfcf !important;
    margin: 0 0 12px 0 !important;
    background: #fff;
  }

  /* Each cell becomes a "row": label left, value right */
  body.woocommerce-account table.woocommerce-orders-table tbody th,
  body.woocommerce-account table.woocommerce-orders-table tbody td{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #cfcfcf !important;

    font-size: 13px !important;
    line-height: 1.3 !important;

    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Remove last divider inside each order */
  body.woocommerce-account table.woocommerce-orders-table tbody tr > *:last-child{
    border-bottom: 0 !important;
  }

  /* Label from data-title */
  body.woocommerce-account table.woocommerce-orders-table tbody th::before,
  body.woocommerce-account table.woocommerce-orders-table tbody td::before{
    content: attr(data-title) ":";
    font-weight: 700;
    color: #000;
    flex: 0 0 auto;
  }

  /* Value aligns to the right */
  body.woocommerce-account table.woocommerce-orders-table tbody th > *,
  body.woocommerce-account table.woocommerce-orders-table tbody td > *{
    margin-left: auto;
    text-align: right;
  }

  /* Actions cell: keep buttons on the right */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions{
    align-items: flex-start;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button{
    display: inline-block !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 0 0 8px !important; /* space between buttons */
    white-space: nowrap;
  }

  /* If buttons wrap, keep them aligned right */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions{
    flex-wrap: wrap;
    justify-content: space-between;
  }
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions::before{
    align-self: center;
  }
	
}

/* =========================================================
   My Account > Orders
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* IMPORTANT: allow the right column to shrink inside the flex layout */
  body.woocommerce-account .woocommerce-MyAccount-content{
    min-width: 0 !important;
    width: auto !important;
  }

  /* Reduce menu width a bit so the table has more room */
  body.woocommerce-account .woocommerce-MyAccount-navigation{
    flex: 0 0 180px !important;   /* adjust 160–220 if needed */
    width: 180px !important;
    margin-left: 0 !important;
  }

  /* Kill global button margins that cause overflow */
  body.woocommerce-account a.button,
  body.woocommerce-account button.button,
  body.woocommerce-account .woocommerce-Button.button{
    margin-left: 0 !important;
  }

  /* Make the table fit */
  body.woocommerce-account table.woocommerce-orders-table{
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;     
  }

  body.woocommerce-account table.woocommerce-orders-table th,
  body.woocommerce-account table.woocommerce-orders-table td{
    padding: 10px 8px !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
  }

  /*column widths to prevent overflow */
  body.woocommerce-account .woocommerce-orders-table__header-order-number,
  body.woocommerce-account .woocommerce-orders-table__cell-order-number{ width: 12% !important; }

  body.woocommerce-account .woocommerce-orders-table__header-order-date,
  body.woocommerce-account .woocommerce-orders-table__cell-order-date{ width: 22% !important; }

  body.woocommerce-account .woocommerce-orders-table__header-order-status,
  body.woocommerce-account .woocommerce-orders-table__cell-order-status{ width: 18% !important; }

  body.woocommerce-account .woocommerce-orders-table__header-order-total,
  body.woocommerce-account .woocommerce-orders-table__cell-order-total{ width: 20% !important; }

  body.woocommerce-account .woocommerce-orders-table__header-order-actions,
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions{ width: 28% !important; }

  /* Actions: keep as buttons but allow wrapping */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions{
    text-align: right;
    white-space: normal !important;
  }

  body.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button{
    display: inline-block !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 2px 0 2px 6px !important; /* wraps to next line when needed */
    max-width: 100%;
  }
}

/* gap between buttons in order table */
@media (min-width: 768px){
  body.woocommerce-account.woocommerce-orders
  .woocommerce-orders-table__cell-order-actions a.button{
    margin-right: 8px !important;
  }

  body.woocommerce-account.woocommerce-orders
  .woocommerce-orders-table__cell-order-actions a.button:last-child{
    margin-right: 0 !important;
  }
}

/* =========================================================
   My Account > Addresses
   ========================================================= */

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses{
  display: flex !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Kill float-based column layout + clearfix that can break side-by-side */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .col-2{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .clear,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::after{
  display: none !important;
  content: none !important;
}

/* Address cards */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{
  flex: 1 1 0 !important;            /* equal width */
  min-width: 0 !important;           /* prevents overflow */
  width: 100% !important;
  box-sizing: border-box;

  background: #F7F6F6;
  border: 1px solid #D3D3D3;
  border-radius: 6px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  text-align: left;
}

/* Header: title + edit button */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #D3D3D3;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3{
  margin: 0;
  font-size: 18px;
  color: #000;
}

/* Edit link as button (wraps safely) */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit{
  display: inline-block;
  padding: 10px 14px;
  background: #EDCD6F;
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 700;
  border-radius: 0;
  margin: 0 !important;             /* overrides your global button margins */
  max-width: 100%;
  white-space: normal !important;   /* allow wrapping */
  overflow-wrap: anywhere;
  line-height: 1.2;
  text-align: center;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover{
  background: #000;
  color: #EDCD6F !important;
}

/* Address text */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address p{
  margin: 0;
  font-size: 14px;
  color: #000;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Tablet/mobile: stack cards */
@media (max-width: 1024px){
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses{
    flex-direction: column !important;
    gap: 14px !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{
    padding: 14px;
  }
}

/* When header gets tight: stack title + button and make button full width */
@media (max-width: 900px){
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit{
    width: 100% !important;
  }
}

/* Extra small button polish */
@media (max-width: 420px){
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit{
    font-size: 14px !important;
    padding: 9px 12px !important;
  }
}

/* =========================================================
   My Account > Payment methods
   ========================================================= */

body.woocommerce-account .woocommerce-MyAccount-content{
  max-width: 100%;
  box-sizing: border-box;
}

/* Notices always fit the column */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* Reset the "button after info" positioning ONLY in My Account */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info + a.button{
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* Also reset your global button margins ONLY in My Account content */
body.woocommerce-account .woocommerce-MyAccount-content a.button{
  float: none !important;
  margin: 16px 0 0 !important;   
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Mobile: full width button */
@media (max-width: 767px){
  body.woocommerce-account .woocommerce-MyAccount-content a.button{
    width: 100% !important;
  }
}

/* =========================================================
   My Account > Edit Account
   ========================================================= */

body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content form,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content fieldset,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content .form-row{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content label{
  display: block;
  width: 100%;
  white-space: normal;
}

body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
.woocommerce-Input,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
input.input-text,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
select,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
textarea,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
.select2-container{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Password field wrapper: "eye" button inside */
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content .password-input{
  display: flex !important;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content .password-input input{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content .show-password-input{
  flex: 0 0 auto;
}

/* Cancel global button margin-left ONLY here */
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
button.button,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
.woocommerce-Button.button,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
a.button,
body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
input[type="submit"]{
  margin-left: 0 !important;
  display: inline-flex;
  justify-content: center;
}

/* Desktop: cap width + center */
@media (min-width: 1025px){
  body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm{
    max-width: 720px !important;
    margin: 0 auto !important;
  }
}

/* Mobile: full-width save button */
@media (max-width: 767px){
  body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
  button.button,
  body.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content
  input[type="submit"]{
    width: 100% !important;
  }
}

/* =========================================================
   My Account > Wishlist (empty state) – stack button under notice
   ========================================================= */
body.woocommerce-account .tinv-wishlist-clear p.cart-empty.woocommerce-info{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

body.woocommerce-account .tinv-wishlist-clear p.return-to-shop{
  display: block !important;
  width: 100% !important;
  clear: both !important;
}

body.woocommerce-account .tinv-wishlist-clear p.return-to-shop > a.button{
  position: static !important;
  float: none !important;
  transform: none !important;
  margin: 0 !important;
  white-space: normal !important;
  max-width: 100%;
}

/* Keep your nice mobile full-width button */
@media (max-width: 767px){
  body.woocommerce-account .tinv-wishlist-clear p.return-to-shop > a.button{
    width: 100% !important;
  }
}

/* =========================================================
   My Account > Wishlist (TI Wishlist)
   ========================================================= */

/* Content shrink properly in flex layout */
body.woocommerce-account .woocommerce-MyAccount-content{ min-width: 0 !important; }

body.woocommerce-account .tinv-wishlist form{
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Remove old margin/offset wrappers and use full width */
body.woocommerce-account .tinvwl-grid-wrapper{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Grid: columns adapt automatically based on available space */
body.woocommerce-account .tinvwl-grid{
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 24px !important;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

/* Tablet: allow slightly smaller cards */
@media (max-width: 1024px){
  body.woocommerce-account .tinvwl-grid{
    gap: 18px !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

/* Mobile: force 1 column */
@media (max-width: 767px){
  body.woocommerce-account .tinvwl-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Items: never fixed width */
body.woocommerce-account .tinvwl-grid-item{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Thumbnails: consistent size */
body.woocommerce-account .tinvwl-thumbnail img{
  width: 100% !important;
  height: 200px !important;
  object-fit: contain !important;
  display: block;
}

/* Kill your global button positioning/margins inside wishlist */
body.woocommerce-account .tinv-wishlist a.button,
body.woocommerce-account .tinv-wishlist button.button{
  float: none !important;
  margin-left: 0 !important;
}

/* Action button: fit card */
body.woocommerce-account .tinvwl-action .button,
body.woocommerce-account .tinvwl-action button{
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
}

/* =========================================================
   Wishlist PAGE (Elementor)
   ========================================================= */
@media (max-width: 767px){

  /* Prevent any horizontal overflow */
  body.page-id-4840 .page-content,
  body.page-id-4840 .elementor-4840,
  body.page-id-4840 .tinv-wishlist{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Undo any weird offsets / forced widths on mobile only */
  body.page-id-4840 .tinv-wishlist form,
  body.page-id-4840 .tinvwl-grid-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box;
  }

  /* Force 1 column on mobile */
  body.page-id-4840 .tinvwl-grid{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    box-sizing: border-box;
  }

  body.page-id-4840 .tinvwl-grid-item{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Images fit */
  body.page-id-4840 .tinvwl-thumbnail img{
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: contain !important;
    display: block;
  }

  /* Buttons fit the card */
  body.page-id-4840 .tinv-wishlist a.button,
  body.page-id-4840 .tinv-wishlist button.button{
    float: none !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}